Simple Blogger Tutorials

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.

19 comments :

  1. Nice tutorial. The XFBML code display the count numbers while the iframe doesn't.

    ReplyDelete
  2. Why it doesn't work on my facebook?

    ReplyDelete
  3. It's for your blog to share it to Facebook. Have you added everything as told above to your blog?

    ReplyDelete
  4. thanks for this tip but please after applying this line of code, my like and send buttons where nolonger displaying on my blog, please you can see for yourself www.trueinternetworld.blogspot.com

    ReplyDelete
  5. I can see you Facebook share button.

    If you are using XFBML Like Button for Blogger then the above codes for share button may create problem.

    ReplyDelete
  6. Anonymous21 May, 2011

    thank u very much

    ReplyDelete
  7. thx for sharing! It appears on my Blog. But one thing I wanna ask for help is, is it possible to display the profile pic who shared my blog? that helps count and show the popularity of my blog. Should you have any idea of what to add? Thx a lot!

    ReplyDelete
  8. Facebook share button don't show profile pictures. It's available only in Like Button for blogger.

    ReplyDelete
  9. hi thnanks for the script.
    but the buttons on my blog is not correctly..
    i am unable to like... because when i tries to like ... count begins but as soon as i brought cursor away from button count reinialize to zero(0)..
    please tell me how can i remove this problem..
    i am leaving here my post link for the convience..
    http://prgskills.blogspot.com/2011/07/program-to-check-wheather-entered.html

    ReplyDelete
  10. I didn't went into any such problem as you have mentioned while liking your post. Clear your browser's cache to see if the problem exists.

    ReplyDelete
  11. Nothing is shown at my blog.I have done the things mentioned above.Can any body suggest me what happened.

    ReplyDelete
  12. works great but the count doesn't show a number if it is 0.

    ReplyDelete
  13. This could be a problem from Facebook's side. Wait a day or two and try clearing browsers cache.

    ReplyDelete
  14. If the same person click the share button would it goes into count?

    ReplyDelete
  15. I think no but I may be wrong. At first it may show increase in count but on refreshing the page it may come down.

    ReplyDelete
  16. How do I edit the conditional tag "item" so that the button will appear on home page as well as on post pages?

    ReplyDelete
  17. Use:
    <b:if cond='data:blog.pageType == "item"'>
    Above codes...
    </b:if>

    ReplyDelete
  18. This is great, but how do I get the button to be at the bottom of my post instead of to the side near the top?

    ReplyDelete
  19. Find <data:post.body/> and below it add the FB codes as told above.
    To disable the floating for the large FB share button, find float: right; and delete it.

    ReplyDelete

Don't SPAM! Read comment policy.

Like