How to Add Facebook Share Button with Counter to Blogger
Facebook share button is a perfect way to share blog posts and to show the number of shares that has been made for a particular blog post. There are two types with different styles, one with a big count button and the other one is inline button. To add it to Blogger select any one of the share buttons as mentioned below.
Facebook Share Button with Counter
<div style="float: right; margin: 4px;"> <a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div>
Facebook Share Inline Button Counter
<div style="margin: 4px;"> <a name="fb_share" type="button_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div>
Adding Facebook Share Button to Blogger
Go to Blogger Layout (Design) > Edit HTML and check the “Expand widget templates” box. Now find for <data:post.body/>
and just above it add any one of the above mentioned codes and save your template.
Let’s have an explanation
In the above codes, find for “float: right;”. If you want to have this on left within your post body, then change it to “float: left;” or else delete it as shown in second button.If you want the share buttons to be seen only for post pages, then put them into conditional tags. The code will be:
<b:if cond='data:blog.pageType == "item"'> <a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </b:if>
Resizing Facebook Share Button
After the launch of too many share buttons, the Facebook share button looks somewhat over-sized. After a small CSS tweak, this button can be resized to match the width with other buttons. To do this find ]]></b:skin>
and before it add:
.FBConnectButton_Text { padding: 2px 4px 3px !important; }
That’s it. If you like this post then don't forget to share it.