How to set up social sharing buttons for Blogger post on home page? [Facebook Google + Twitter]

The reason behind sharing this article is not to give tutorial on how to add social buttons,but to explain that the social buttons provided by Facebook,Google Plus and Twitter let you share either the current opened page or a specific URL.

However,on the home page their are several post with different URL and if you select to share the current open page then it will share the home page,to avoid this problem I am sharing this tutorial to make it more easy.So have a look.

To get start first get all the buttons with the following settings.

Facebook

Make sure that you get like button not like box.Click here to get it.

The Code you will get after clicking get code is:

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://bloggerever.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

The above code you will get in two parts,you have to do a bit change in second part that is change the data-href="http://bloggerever.com" with expr:data-href="data:post.url".

Twitter

Now get the Twitter link share button right here.

The code you will get is:

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bloggerever.com" data-via="bloggerever">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>

Just replace the data-url="http://bloggerever.com" with expr:data-url="data:post.url".

Google Plus

Now get the Google Plus button right here.

The code will get is:

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-href="http://bloggerever.com"></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>

Same replace the data-href="http://bloggerever.com" with expr:data-href="data:post.url".

Then what?

These code should be added under the div with class post.Actually,I've just changed these codes according to Blogger,it will now work well.If you didn't get something,just throw a comment below.