Sunday, 6 April 2014

How to Add a Facebook Share button in Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXTRIH9RJISpnfuJQUdUujtG3os8kK4EculewIU_7wj5lJElV19s-0njIRIbym2zu8qQ8TvrenYvm8mFAdUYmqKA1txcw0bznxslbiN70fUNywrTsdbzeR6nO9COrPKfXLvSTHNDnwKeP/s1600/How-to-Add-a-Facebook-Share-button-in-Blogger.png

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.

0 comments:

Post a Comment


Tips Tricks And Tutorials

You can also receive Free Email Updates:

Widget by NBT

Tips Tricks And Tutorials

You can also receive Free Email Updates:

Widget by NBT

Tips Tricks And Tutorials

You can also receive Free Email Updates:

Widget by NBT