How to Add a Facebook Share button in Blogger

Advertisements
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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

11 comments

November 14, 2013 at 7:45 PM

wow, thanks for sharing bro

November 16, 2013 at 10:29 PM

Do a tutorial on Weebly too Thanks

January 22, 2014 at 2:29 PM

Didnt work for me...???

February 20, 2014 at 6:10 AM

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

March 7, 2014 at 3:58 PM

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

Editorial Team MOD
March 8, 2014 at 11:16 PM

Make sure your that there are no widget conflicting with it

March 21, 2014 at 6:26 AM

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

April 30, 2014 at 8:12 AM

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

January 1, 2016 at 9:10 PM

Can find no <data:post.body/

April 3, 2016 at 1:07 AM

thanks

July 20, 2016 at 5:39 AM

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

Post a Comment

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.