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.

Share button float left

Share button float right

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.

Popular posts from this blog

Add Google Web Fonts to Blogger

How to Add Extra Gadget/Widget Section to Blogger Header

Add Open Graph Protocol Meta Tags to Blogger