November 2, 2009

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.


24 comments:

Danoxs said...

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

Danoxs said...

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

daniel said...

Nice plugin. Will surely try this out.
thanks

bolang said...

Very nice widgets :D

Sai @ Blogger Help said...

@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 said...

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

Thanks Joe

Tomski said...

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

thanks thanks thanks :X

Anonymous said...

hey i cant find

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

:((

help me!!!

Divya Sai said...

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

Online Game Developers said...

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

Ani.

Brendan said...

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

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

Brendan said...

Thanks for the quick response Sai.

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

Viral H Parmar said...

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

http://goooglehacker.blogspot.com/ said...

hey buddy thanks for the important information !

peter said...

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.

speak_english said...

Thanks a lot, enjoyable!

dailyebookdownload said...

thnx! for this buddy...

Ahmed said...

thanks

Tadonku said...

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

Vysh @The Colourful Eyes said...

Cant find

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

Though expanded ... :(( Help me !

Ranjan Dhar said...

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy