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:
Add Facebook link to your blog
Code to paste:
<!--FB-BUTTON-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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
Add Facebook link to your blog
Code to paste:
<!--FB-BUTTON-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'><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
Add Facebook link to your blog
Code to paste:
<!--FB-BUTTON-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'><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-->


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.

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

24 comments

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

Reply
avatar
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 :(

Reply
avatar
November 03, 2009 1:31 AM delete

Nice plugin. Will surely try this out.
thanks

Reply
avatar
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...

Reply
avatar
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.

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

Reply
avatar
Anonymous
November 22, 2009 7:25 AM delete

thanks thanks thanks :X

Reply
avatar
Anonymous
January 09, 2010 3:20 PM delete

hey i cant find

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

:((

help me!!!

Reply
avatar
January 09, 2010 3:32 PM delete

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

Reply
avatar
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.

Reply
avatar
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.

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

Reply
avatar
February 24, 2010 7:08 AM delete

Thanks for the quick response Sai.

Shame there's no real fix. I think I'll hide it on the homepage for now.

Reply
avatar
March 06, 2010 5:36 AM delete

nice one... i really appriciate your work. great going.

Reply
avatar
March 09, 2010 1:35 PM delete

hey buddy thanks for the important information !

Reply
avatar
April 30, 2010 5:19 AM delete

Hi sai,

I've applied the Facebook share coding to my template and save,but nothing happened,why is it so?thanks in advance.you're great.

Reply
avatar
September 30, 2010 1:46 PM delete

Hello Blogfren,

Dang! I've been searching for this a long time and here it is. ok can't wait to install em....

Thank You Bloggerstop team....

Reply
avatar
March 21, 2011 6:46 AM delete

Cant find

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

Though expanded ... :(( Help me !

Reply
avatar
October 08, 2011 11:00 AM delete

Thanks! Great help!
http://ranjandhar.blogspot.com/

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon