4+ Easy Ways to Make WordPress Social Share Without a Plugin
4+ Easy Ways to Make WordPress Social Share Without a Plugin: If it can be difficult, why make it easier? Uh no. That means if you can create a WordPress social share without a plugin, why should you use a plugin? The fewer plugins, the lighter the blog, the fewer “gaps” it has.
If you don’t like tweaking themes, it’s better to just install the plugin right away. I recommend Sassy Social Share. But if you have a hulking spirit like me, please continue reading this article until it’s finished.
You don’t need to be good at programming to be able to work on the innards of a WordPress theme. As long as you “know” just Html, CSS, Php & Js is more than enough. Other implementation examples like I discussed in the article WordPress customization tips are also quite simple.
4+ Easy Ways to Make WordPress Social Share Without a Plugin
The social share button is an important element in a blog, especially in the article section. The share button on social media will make it easier for readers to share your article on their accounts.
Some of the reasons your article is shared:
- Your article contains trending news.
- Readers find your articles helpful.
- Your article hits the emotional side of the reader.
- Readers feel “I really am” after reading the article.
If those are some of the reasons why people want to share an article on social media. This time, I will share how to create a Facebook & Twitter share button without using a plugin.
1. Adding Functions
Please login to your WordPress blog dashboard. Enter the menu Appearance >> Theme editor. In the file list on the right, find and click function.php. Enter this code:
function wcr_share_buttons() { $url = urlencode(get_the_permalink()); $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); include( locate_template('social-share.php', false, false) );}2. Create a New File
Create a PHP file with the name social-share.php. How? Please login to your blog cPanel, then enter the File Manager. Find your theme folder, like the image below (I happen to use a child theme):
Click +File in the upper left, create a file social-share.php.
If so, go back to the menu Appearance >> Theme editor on your blog dashboard. A new file should appear called social-share.php. Please enter the code below:
<ul class="share-buttons"> <li> <a class="share-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $title; ?>&url=<?php echo $url; ?>" target="_blank"> <svg id="twitter" data-name="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.1 47.2"> <title>twitter</title> <path d="M54.86,20.19v1.55c0,15.74-12,33.88-33.88,33.88A33.64,33.64,0,0,1,2.74,50.27a24.55,24.55,0,0,0,2.88.15A23.84,23.84,0,0,0,20.4,45.33,11.93,11.93,0,0,1,9.27,37.07a15,15,0,0,0,2.25.18,12.58,12.58,0,0,0,3.13-.41A11.91,11.91,0,0,1,5.1,25.17V25a12,12,0,0,0,5.38,1.51A11.92,11.92,0,0,1,6.8,10.61,33.84,33.84,0,0,0,31.35,23.06a13.44,13.44,0,0,1-.29-2.73,11.92,11.92,0,0,1,20.61-8.15,23.43,23.43,0,0,0,7.56-2.87A11.87,11.87,0,0,1,54,15.88,23.87,23.87,0,0,0,60.84,14,25.59,25.59,0,0,1,54.86,20.19Z" transform="translate(-2.74 -8.42)"/> </svg> <span>Tweet </span> </a> </li> <li> <a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>" target="_blank"> <svg id="facebook" data-name="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.61 59.03"> <title>facebook</title> <path d="M47.2,12.76H41.63c-4.36,0-5.18,2.09-5.18,5.11v6.71h10.4l-1.38,10.5h-9V62H25.59V35.07h-9V24.57h9V16.84c0-9,5.5-13.87,13.52-13.87a69.4,69.4,0,0,1,8.09.43Z" transform="translate(-16.59 -2.97)"/> </svg> <span>Share </span> </a> </li></ul>Change the sentence “Tweet Guys” and “Share Guys” as you wish.
Why does the above script only load Facebook and Twitter? Because these 2 social media are the most popular. Google+ is dead. Instagram can’t be used to share articles. LinkedIn is still rarely used in Singapore.
3. Adding CSS
Still in the theme editor. Open the file style.css and enter this code:
.share-buttons { font-size: 17px; margin: 0 0 30px; z-index: 2; position: relative; text-align: center; list-style-type: none; padding: 0; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-start;}.share-buttons li { height: auto; flex: 0 1 auto; width: calc(50% - 1px); margin-right: 1px;}.share-buttons li:last-child { width: 50%; margin-right: 0;}.share-buttons svg { fill: #fff; width: 16px; height: 12px;}.share-buttons a { display: block; padding: 12px 12px 10px; text-align: center; color: white !important;}.share-buttons li:first-child a { border-radius: 3px 0 0 3px;}.share-buttons li:last-child a { border-radius: 0 3px 3px 0;}.share-twitter { background: #1da1f2;}.share-facebook { background: #3b5998;}Later it looks like your blog is usually a little messy. Because the CSS code above has been adjusted to the Mobitricks.info blog layout. So you adjust it yourself. If you are confused, please ask via comments.
Read: 18 Influencer Outreach Strategies to Optimize Your Campaign and Get Better Success Rates
4. Call the Script
It’s finished the process of entering the code to create a WordPress social share without a plugin. It’s really easy, right? To display it in the article, you can use a shortcode:
<?php wcr_share_buttons(); ?>Still in the theme editor, please open the file single.php. Enter the shortcode above into the file. Adjust its location to the layout of your blog theme. I happen to be using the Hook feature of GeneratePress, so I don’t enter the manual in single.php.
Alhamdulillah, the short guide on how to create a WordPress social share without a plugin is finished. I got the original source code from the cool blog Wpcrumbs.com. How, are there any obstacles?
