Add Facebook Buttons and Widgets To Your Blog

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

Add these buttons to your blog and help your visitors to share your articles easily on FB.
Instructions to follow:
Log in to Blogger -> Layout -> Edit HTML, and select the tickbox "Edit Widget Templates"
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:

Code to paste:

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

Button #1

Code to paste:

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

Button #2

Code to paste:

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

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):
Facebook Live Stream Box

4. And visit this page to add a Facebook Fan Box Widget to your blog.

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

23 comments

Write comments

Danoxs

November 02, 2009 2:33 PM delete

Great hack ^^

Now the ones that always comment as Anon can now coment using FB :)

BTW: Of course I'm nominating/voting you in the Ma-something awards =D

November 02, 2009 2:59 PM delete

Sorry for double-posting, but how exactly do I put my comment box ? Tried everything but nothing happens :(

daniel

November 03, 2009 1:31 AM delete

Nice plugin. Will surely try this out.
thanks

bolang

November 03, 2009 4:28 AM delete

Very nice widgets :D

Sai @ Blogger Help

November 03, 2009 10:45 AM delete

@Daniel,
Thanks a lot for the nomination.
According to facebooks tutorial, you have to include a simple code snippet to the html tag and host a cross-domain file. Even I have tried it, but to no avail.
I think we should better wait for an update from them...

Joe

November 07, 2009 5:00 AM delete

Greetings friend,
You made a spelling error in the first paragraph "Feasebook" I think it's suppose to be Facebook. :((

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.

Divya Sai

November 07, 2009 3:29 PM delete

Thanks Joe

Tomski

November 13, 2009 1:42 PM delete

please help im having troubles adding this to my buttons site which has some neat facebook button ans such and would lve to have this so that the buttons get shared on facebook but cant get it working the site in questions is
buttonshut.com

regards

Anonymous

November 22, 2009 7:25 AM delete

thanks thanks thanks :X

January 09, 2010 3:20 PM delete

hey i cant find

div class='post-header-line-1'/

:((

help me!!!

January 09, 2010 3:32 PM delete

Make sure you have marked the tick box "expand widget templates"

Online Game Developers

February 22, 2010 3:47 AM delete

Thanks Divya, for the wonderful info. I have also added my networked blogs widget in my blog.

Ani.

Brendan

February 23, 2010 6:36 PM delete

As always (an unlike some other blogs) your code works a dream.

I'm having one problem though. I wonder if you can help?

I truncate my blog posts and you can see the facebook sharer appear on the truncated posts on my homepage as well as on each indiviual post's permalink page.

Clicking on the facebook sharer on any of the individual pages works ok, but when you share from the homepage, it chooses to share my blogs main url rather than the specific posts url.

I've also installed a similar Twitter button, and that seems to work fine both ways.

Can you help?

Thanks.

Sai - Blogger Widgets

February 24, 2010 12:38 AM delete

These buttons are javascripts provided directly by FB, so nothing much can be done, you have two options:

1. Either show these buttons only in the permalink post pages, and hide them in homepage. by using this code:

<b:if cond='data:blog.pageType == "item"'>
CODE_FOR_FB_BUTTON_WILL_COME_HERE
</b:if>

2. Use the FB button code from this page, that will submit the unique url even in the homepage, but it cannot count the number of submissions:
http://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html