Add Facebook Buttons and Widgets To Your Blog

November 3, 2009 by admin
Filed under Blogger Tricks, Facebook, Widgets

Facebook has already overtaken Yahoo according to the stats from Alexa. So along with search engine optimization, you should also try to bring some traffic from social networking sites like Feacebook.

This tutorial will show you how to add referent kinds of the facebook buttons in your blog. Adding these buttons to your blog will help your visitors to share your articles easily on FB.

Instructions to follow:

Now find this code in your template:

<div class=’post-header-line-1′/>

Now immediately below it, paste the code for the facebook button (select the appropriate one for your blog).

As a link:

If you want the above style button in your blog copy this code and past it.

<!–FB-BUTTON-STARTS–><b:if cond=’data:blog.pageType == "item"’>
<span style=”text-align: right;“>
<a name=”fb_share” type=”icon_link” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</span></b:if><!–FB-BUTTON-STOPS–>

Button #1

Code to paste:

<!–FB-BUTTON-STARTS–><b:if cond=’data:blog.pageType == "item"’><span style=”text-align: right;“>
<a name=”fb_share” type=”button_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</span></b:if><!–FB-BUTTON-STOPS–>

Button #2

Code to paste:

<!–FB-BUTTON-STARTS–><b:if cond=’data:blog.pageType == "item"’><span style=”text-align: right;“>
<a name=”fb_share” type=”box_count” href=”http://www.facebook.com/sharer.php”>Share</a><script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share” type=”text/javascript”></script>
</span></b:if><!–FB-BUTTON-STOPS–>

Their are other Facebook Widgets you can display on your blog:
1. Facebook Profile Badge
2. Facebook Photo Badges
3. Live Stream Box (Just like the twitter widget):