Add Facebook share button with counter

This tutorial will show you how to add a Facebook share button to each blog post in a Blogger blog. The button comes with a counter (optional) that shows a live count of how many times a post has been shared -a way to gauge the post popularity.

This button lets people share the containing post without leaving your blog. It will detect the correct post URL regardless of the type of page you are at -be it home page, individual/post page or any other page.

Now let us proceed,

1. Go to Template > Edit HTML > Proceed.
2. Back up your template.
3. Tick the  Expand Widget Templates checkbox on top right corner of the template HTML window.
4. Find the following code in your HTML, this is the code for your post content:

    <data:post.body/>

5. Paste the Facebook button code immediately below (after) it:

   <!-- Facebook share button Start -->
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div style='float:left;padding:5px 5px 5px 0;'>
   <a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
   </div>
   </b:if>
   <!-- Facebook share button End -->
   

   Update: [July 2010] Add conditional tag to prevent button from appearing on static pages.

6. Configure button

   Choose the type of button by replacing the value of  type attribute (in line 4) with the corresponding code below.

   FB button	Code
   	box_count
   	button_count
   	button
   	icon

   Note: The counter will only show up after the count reaches 3.
7. Button repositioning
   The steps above positioned the button on bottom left of each post. You can change the positioning if you like:
   • Position it on top of post
     Insert the button code before (instead of after) <data:post.body/>.
   • Position it on the right
     Change the float in line 3 from left to right.
8. Displaying button on static pages
   • To also display the button in static pages, remove the conditional tag -code line 2 and 6.
9. Preview, you should see the button appear at the end each post.
10. If you like what you see then click Save.

Enjoy!

P.S. Having trouble with Facebook picking up wrong description for your shared links? Go to Facebook share showing wrong description –solved! to fix it.