November 4, 2013

How to Add a Facebook Share button in Blogger

You probably have seen those Facebook share buttons on various blogs that allows people to share your post on their Wall through a simple click. In the past, we have already shown how to add a Facebook Like button on your blog. In this article, we will show you how to add a Facebook Share button in Blogger. It displays the total share count which gives you another reason to get more and more targeted traffic from Social Media websites like Facebook. First and foremost, you have to login into your Blogger account.

Once logged in, go to Your Blog >> Template >> Edit HTML >> Search for <data:post.body/>  and paste the following code either above or below it (depending upon your needs as mentioned below). 
  • For Below Posts: In case you want to display the share button at the end of your posts then paste the following code below <data:post.body/>  tag. 
  • For Above Posts: However, if you want to display the share button at the beginning of your posts then paste the following code above <data:post.body/>   tag.
<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='BUTTON-TYPE'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>

Now its up to you, what kind of button you would like to display on your site. Facebook provided a couple of options like Vertical, Horizontal or without counter buttons. To customize your button type, just replace "BUTTON-TYPE" with any of the following:
  1. box_count for full tall button with counter
  2. button_count for small button with counter
  3. button for without counter
  4. icon for a small thumb (without counter)
Once everything is done, save your template by pressing "Save template" button present at the top of the HTML template editor. Now go and check your site to see if everything is working just fine or not. 

We hope this tutorial have helped you in learning How to Add a Facebook Share button in blogger. We're also planning to add it on the next design update. Let us know what are your thoughts about this button? Does it gives you a little bit more Social Traffic? Lets have a meaningful conversation a head.

11 comments:

  1. Do a tutorial on Weebly too Thanks

    ReplyDelete
  2. Thanks bro successfully added to my site
    Komputer Tips www.ktips.info

    ReplyDelete
  3. It is not working for me, doens matter how many times i try it

    ReplyDelete
    Replies
    1. Make sure your that there are no widget conflicting with it

      Delete
  4. I cannot get this to work no matter what I do. Tried putting code before and after tag, in every place the tag appears in the code. Tried changing templates, and tried moving/disabling widgets. This is driving me nuts. Please help. http://blog.heavywoodband.com

    ReplyDelete
  5. Its work. If the first pasted at tag not working, Try next tag.

    ReplyDelete
  6. I find it and also paste but Nothing show...... not good, no working
    els thanks for sharing your reviews

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.