Add Facebook Buttons and Widgets To Your Blog

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.

Leave a Reply

24 Comments on "Add Facebook Buttons and Widgets To Your Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
Danoxs
Guest

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

View Comment
Danoxs
Guest

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

View Comment
daniel
Guest

Nice plugin. Will surely try this out.
thanks

View Comment
bolang
Guest

Very nice widgets 😀

View Comment
Sai @ Blogger Help
Guest

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

View Comment
Joe
Guest

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.

View Comment
Divya Sai
Guest

Thanks Joe

View Comment
Tomski
Guest

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

View Comment
Anonymous
Guest

thanks thanks thanks :X

View Comment
Anonymous
Guest

hey i cant find

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

:((

help me!!!

View Comment
Divya Sai
Guest

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

View Comment
Online Game Developers
Guest

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

Ani.

View Comment
Brendan
Guest
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… Read more »
Sai - Blogger Widgets
Guest

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:
https://bloggerstop.net/2008/12/how-to-add-social-networking-buttons-to.html

View Comment
Brendan
Guest

Thanks for the quick response Sai.

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

View Comment
Viral H Parmar
Guest

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

View Comment
http://goooglehacker.blogspot.com/
Guest

hey buddy thanks for the important information !

View Comment
peter
Guest

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.

View Comment
speak_english
Guest

Thanks a lot, enjoyable!

View Comment
dailyebookdownload
Guest

thnx! for this buddy…

View Comment
wpDiscuz