How to add Facebook share Button to your blogger/blogspot posts

How to add Facebook share Button to your blogger/blogspot

With the growing popularity of social networking sites especially Facebook and Twitter, everyone want to publish everything on these sites. In fact, these sites could be great source of quality traffic for any blog. You can include a Facebook share button in each of your posts. This button will allow users to quickly share/like a post on Facebook.

In this article I would explain how we can add a Facebook share button to your blog that is a easy work to do.

Steps to Add Facebook Share Button above blog posts

To add Facebook share button below post title, simply follow these steps:

1. Login into your Blog Dashboard -> Design.
2. Select Edit HTML option. Back up your layout/template. Click ‘Download Full Template’ option, this help you backup your contents of your blog and if anything happens while editing the script, you can restore this backup to the default settings.

3. Go to Layout then select Edit HTML tab.
4. Check Expand Widget Templates checkbox located at the top of the script window. This will make the page refresh automatically.

5. Now search this tag in the snippet:

<data:post.body/>

6. Place the following code just  before the tag found in step 4:

<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

<data:post.body/>                           -Place the code before the <data:pst.body> tag.

Click on the Preview button to see the result and then save your template.

Add Facebook Share Button below  Blog Posts

To place a Facebook share button under each post instead at the top, you have to follow the exact steps given above but there is small change instep 5.

5- Place the following code right below the code found in step 4:

<data:post.body/>                          - Place the code after the <daga:post.body> tag

<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Button Modifications

You can also change the button type like adding a counter with the button. All you need is to replace TYPE OF BUTTON from the above code with:

button for a button like this:

button_count for a button like this:

box_count for a button like this:

icon for a button like this:

Search for more at Ascentranks.com, the Internet Marketing Company

About the Author

Firoz Muhammed is the author of this comprehensive article, who is a Social Media Enthusiast and writer on internet marketing and related topics. He is a successive blogger and expert in SEO, SMO and SEM and social media marketing.  You can reach him on his mail id: firozct@gmail.com

Search for more at Ascentranks' website, an SEO Company

References

Betemplates - http://www.betatemplates.com/2010/06/add-facebook-share-button-in-blogger.html

Facebook Developer Page -  http://developers.facebook.com/docs/