Social sharing buttons are a great way to promote any content. Adding such buttons to your WordPress blog is a great idea. Your visitors will be able to share your posts or like them using their favorite social network accounts. This way, you can garner even more readers to your website.
The best way to make it easy for your visitors to share your content across social websites is by adding their official sharing widgets in your articles. Adding them in a decent place will ensure that they are used. You can add such widgets on top of your posts or right at the end of articles. You can also make such sharing widgets float in your page.
There are tons of plugins in WordPress that are built primarily for adding Facebook, Twitter, Google Plus, LinkedIn etc. widgets. But, if you want to reduce the number of WordPress add-ons, then you can manually add sharing codes to your articles. It is a simple process. You just have to copy paste some code provided by Facebook/Twitter/Google Plus etc.
Step 1: Generating the Code
For Facebook
- Visit this page to generate the like button or visit this page to generate the share button.
- In the URL to Like or URL to Share field, just leave the default value or enter your website. We will change it later to automatically include your WordPress post permalink URL.
- You can leave the pixel width value blank or enter a desired value based on the space you have in your template.
- Choose a Layout of your like or share button.
- Personally I prefer button_count if I am adding the like button at the beginning of a post and box_count if I add the like button at the end of a post. It is totally up to you to choose a button layout.
- After setting everything up, click on the “Get Code” button.
- You will get a standard JavaScript code and a plugin code that looks something like this:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=348328435295070&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.thisfox.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
Since, you’d like your visitors to share the URL of your post, change the value in data-href to
data-href=”<?php the_permalink(); ?>”
So your updated code becomes:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=348328435295070&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
Note that your appId value will be different. Keep the code in a text file in notepad or your favorite text editor.
For Twitter
- Visit this page to generate Twitter sharing buttons.
- Choose the “Share a link” button and configure it.
- You can give a page URL and tweet text. To keep it simple, just configure to use the page URL and the title of the page.
- You can also configure other values like:
- Showing Count: Displays the number of times the link has been shared on Twitter.
- Via: Enter your Twitter username if you’d like to be mentioned in the Tweet.
- Recommend: Enter your Twitter username in this field if you’d like to give the sharer and option to follow you.
- Hashtag: Input a hashtag or leave it blank.
Based on your configurations a code is generated, that looks something like this:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="gamesnepal" data-related="gamesnepal">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
To give your sharing button a tall box with count style add data-count=”vertical” to your code.
So your code becomes:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="gamesnepal" data-related="gamesnepal" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
Here is a documentation on additional things that you can configure.
Keep it saved in a text file.
For Google Plus
- Visit this page to generate codes for sharing to Google Plus.
- Choose the size between small, medium, standard and tall.
- Configure the annotation to display the sharing count.
- Configure your language.
- A code will be generated that will look something like this:
<!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-size="tall"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Other Social Networks
You can also add other additional social networks such as LinkedIn or Tumblr. Configuring and generating codes is automated once you input some basic details.
Step 2: Placing the Code
In WordPress, every template has its unique code and you will have to figure out where exactly to place the codes that you generated above. Basically, you will have to browse to your /wp-content/themes/<yourthemename>/ folder and edit the single.php file. Add the social sharing codes that you’ve generated above.
You will want to paste the codes after the following post loop.
while ( have_posts() ) : the_post();
Identify the html tags and place social sharing buttons in the exact location that you want to. Save your file and see how they look in your articles. Modify it, move it around and position them exactly how you want to. This isn’t an easy way but works great if you have some HTML knowledge.