Add Facebook Share Button To Blog

Facebook share button with counter 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 with counter. You can visit the Facebook Share Button page and select the style that you may want to add to blogger.

Facebook Share Button with Big Counter

Share

<div style="float: right; padding: 4px;">
<a name="fb_share" type="box_count" 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 with Counter

Share

<div style="float: right; padding: 4px;">
<a name="fb_share" type="button_count" 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 with Counter in 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.

Now 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;”.

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"'>
<div style="float: right; padding: 4px;">
<a name="fb_share" type="box_count" 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>
</b:if>

That’s it. If you like this post then don't forget to share it.


source : http://bungtutor.blogspot.com/2010/12/add-facebook-share-button-with-counter.html

Artikel yang sama