Facebook Like/Fan Box For Blogger

Posted by Unknown on
facebook-fan-box

This tutorial is for everyone who has already created a Facebook Fan Page. If have not created one, try making one. A Fan Box or Like Box allows your Blog visitors to like your Facebook fan page, without leaving your blog. It can also display faces of the “likers” on your blog. To add the fan box to blogger, follow these steps:

1. Find out your Facebook Fan Page URL. To do that, just visit your Facebook Fan Page, and copy the url in the address bar.

image

In my case it is http://www.facebook.com/bloggerplugins (The url which you see in the address bar when you visit your fan page.) .Copy this url from your address bar.

2. Visit This page http://developers.facebook.com/docs/reference/plugins/like-box

You have already copied the Facebook fan page url. Paste this into the Facebook Page URL field

image

Select the choices appropriately and you can see a live preview of the Like/Fan box.

3.Once you are satisfied with the looks of the Like Box, Click on the “Get Code” button

4. Copy the xfbml code which gets generated.

image

5. Now login to your Blogger account and go to Design > Page Elements

Click Add a Gadget Link and Add an HTML/JavaScript Gadget

image

6.Paste the generated code as the Gadget’s Content

image

and Save the Gadget.

7.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, Go to Design/Template > Edit HTML and find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

image This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

8.Save the Template and you should see the Fan/Like Box on your blog’s sidebar.

Another variation

If you need a simpler Like button, without any extra decorations, then visit http://developers.facebook.com/docs/reference/plugins/like . In the code generator, paste your Facebook Fan Page’s url as the URL to Like and follow steps 3 to 5. Now you will get a simpler Like Button with count.

Comments

  1. Diman7January 29, 2011 at 3:48 PM

    thanks, i put this code with the "Facebook Share Button-http://www.bloggerplugins.org/2009/10/facebook-share-count-button-blogger.html", and this like box not working for me.
    maybe do you know why? because before that all worked perfectly

    ReplyDelete
  2. polycarbonate sheetsJanuary 29, 2011 at 4:04 PM

    good one to use thanks for the post i like it

    ReplyDelete
  3. Jabroo TipsJanuary 29, 2011 at 4:30 PM

    Thanks for sharing.. Just found a tutorial for which i was looking for..

    ReplyDelete
  4. Social BookmarkingJanuary 31, 2011 at 10:51 AM

    Great. I Like it

    ReplyDelete
  5. SchmitzlJanuary 31, 2011 at 1:50 PM

    Please not that a widget like this wil considerably slow down the loading of your Blogger site! Been having this widget for quite a while and had some annoyed visitors!

    ReplyDelete
  6. VeeFebruary 1, 2011 at 3:15 AM

    I use this feature on my page. Thanks for the info!

    ReplyDelete
  7. UnknownFebruary 2, 2011 at 6:46 PM

    I used this like box, but I don't understand why the faces is not shown.. only the stream is shown.. www.bloggerclick.com

    ReplyDelete
  8. MathukuttyFebruary 3, 2011 at 7:00 AM

    You can easily get all codes from facebook http://www.facebook.com/badges/. You can directly add the code to Blogger, Typepad or select other and copy/paste to any website/wordpress. In wordpress, create a Text widget and paste the code. I have done it in http://vision4life.in (left side bar). If it is helpful, you can reply through contact menu.

    ReplyDelete
  9. AnonymousFebruary 3, 2011 at 9:25 PM

    i dont even know how to put gadgets into my blog.

    ReplyDelete
  10. Beben KobenFebruary 3, 2011 at 11:35 PM

    For about it, facebook have launch in here my friend
    http://www.facebook.com/pages/create.php
    And don't forget for look my fan page ;) :D
    http://www.facebook.com/pages/Prodigy-of-Head/122292581115426

    ReplyDelete
  11. PragatiFebruary 5, 2011 at 2:21 PM

    I was searching for the same for my blog http://worknfunn.blogspot.com.
    Thanks for the guidance.

    ReplyDelete
  12. Maryland MoversFebruary 6, 2011 at 2:51 AM

    really that code works thanks for sharing man

    ReplyDelete
  13. diLFebruary 9, 2011 at 1:30 AM

    how to make "become a fan" and "like" widget like u have in the bottom of ur post?? would u like to share it?

    ReplyDelete
  14. NgomongNgapakFebruary 11, 2011 at 11:29 PM

    Nice info. Tks

    ReplyDelete
  15. VanessaFebruary 16, 2011 at 12:30 AM

    I have used the Facebook Like Box on my blog for quite a few months now, but since Facebook has made changes to the pages, it is no longer working on my blog.

    ReplyDelete
  16. UnknownFebruary 18, 2011 at 11:59 PM

    yes i have followed the instructions and it works for me
    Can anyone tells me about how to add facebook widget to the blog
    http://infofaisalabad.blogspot.com/

    ReplyDelete
  17. AnonymousFebruary 20, 2011 at 6:30 AM

    There are some issues with it. If you are still signed on your facebook page while using it, it won't work, you'll get a blank block even just at the preview stage.

    But even if you sign off, the preview works, but when I put it on my blog, it just shows a generic "Follow us on facebook" page with no link to my page, not even a name. What am I doing wrong?

    My blog is at http://filmandempire.blogspot.com although I have removed the widget for now as it was not working

    ReplyDelete
  18. Tutorial KomputerFebruary 23, 2011 at 9:00 AM

    thanks for share,,,

    ReplyDelete
  19. CurvyCdnFebruary 25, 2011 at 3:48 AM

    Oh, thank you! I was trying to edit the HTML coding to no avail! The box takes up a lot of vertical room. I wish there was a way to make it smaller. I suppose I could just use the basic button instead of the box. When I have more people liking my site it should look good though, so I'll leave it for now and see how it goes. Thanks so much!

    ReplyDelete
  20. AnonymousFebruary 26, 2011 at 6:53 AM

    I just get a white box- any reason why? Also- doesnt your addres have to have /pages/ in the url? Is this for a fan page or for a proflie? It doesn't work for me...
    www.forhuntersbyhunters.com

    ReplyDelete
  21. BULALUFebruary 28, 2011 at 5:14 AM

    thanks....i'll try

    ReplyDelete
  22. YuliaslovicMarch 2, 2011 at 2:20 PM

    waw keren

    ReplyDelete
  23. Joy@Thrifty Parsonage LivingMarch 3, 2011 at 3:26 AM

    Thanks for the tutorial, I'll give it a try.

    ReplyDelete
  24. Mencari FaktaMarch 5, 2011 at 5:18 AM

    THANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

    ReplyDelete
  25. AnonymousMarch 9, 2011 at 5:13 PM

    you are the best

    ReplyDelete
  26. Duncan D. Horne - the Kuantan bloggerMarch 11, 2011 at 2:19 PM

    Congratulations on the blog of note! Thanks for the helpful information. Very easy to follow your step-by-step guide.

    www.duncaninkuantan.blogspot.com

    ReplyDelete
  27. Jill HamiltonMarch 13, 2011 at 12:33 AM

    So, it was all easy, well-explained, etc... but the faces aren't shown. And in the html it says "show faces true" which, with my completely vague understanding of the mysteries of html, means that it should indeed be showing the faces.

    Any advice...?

    jill
    http://inbedwithmarriedwomen.blogspot.com

    ReplyDelete
  28. chetanMarch 13, 2011 at 2:20 PM

    can u help me i have a problem in feed burner
    they are posting my whole feed in email i want to only post the headline and two three lines how can i do that pls help me my email morbi_style@yahoo.com

    ReplyDelete
  29. ardiMarch 14, 2011 at 11:54 AM

    thank you....

    ReplyDelete
  30. Justine of SewCountryChickMarch 16, 2011 at 9:50 PM

    Thanks I'm trying to move away from the Follower button on blogger because people can't join if they don't have gmail or yahoo.the like button is less of a commitment

    ReplyDelete
  31. AaronMarch 16, 2011 at 11:20 PM

    This script no longer works on Blogger. I had a badge and it got dropped by blogger. When I tried to redo it won't work. I think because FB upgraded their JAVAscript and blogger didn't. Do you know what's going on?

    ReplyDelete
  32. Godson ThomasMarch 19, 2011 at 12:35 PM

    Nice Explanation. Thank you.

    ReplyDelete
  33. UnknownMarch 21, 2011 at 8:27 PM

    Thanks, the explanation was great and it made it really easy.

    http://tinastraveltrials.blogspot.com/

    ReplyDelete
  34. fredrikMarch 22, 2011 at 5:39 AM

    thanks for the information.....

    ReplyDelete
  35. swetaMarch 24, 2011 at 1:11 PM

    good

    ReplyDelete
  36. slumberApril 1, 2011 at 5:26 PM

    Great. I Like it..

    thanks for the information.....

    ReplyDelete
  37. Design StrawApril 6, 2011 at 4:30 PM

    Great I like it very much....... thank you

    ReplyDelete
  38. adminApril 17, 2011 at 5:22 AM

    i'm already use it..

    ReplyDelete
  39. jackApril 18, 2011 at 7:20 AM

    Thank you!

    ReplyDelete
  40. Peter VandenBergApril 21, 2011 at 9:22 PM

    I had a lot of trouble figuring out how to get the fixed height of the box to work out right on my blog...this might be something you could address to make thing easier for people. Thanks

    ReplyDelete
  41. Yogesh DhimanApril 24, 2011 at 12:25 AM

    Sure will use it for my blog. Thanks.. :)

    ReplyDelete
  42. Marsha CooperApril 27, 2011 at 7:58 AM

    I am not getting this to show up on my blog :( Any way you can tell me why??
    http://marshasspot.blogspot.com
    I was hoping to have it up when I post my next giveaway as one way to enter it will be to like my new fan page.
    Any help is appreciated! I see someone say they think that facebook upgraded something but that blogger didn't?

    Thanks!!

    ReplyDelete
  43. AnonymousApril 27, 2011 at 1:23 PM

    Nice info.... Thanx

    ReplyDelete
  44. JacquelineMay 5, 2011 at 9:51 PM

    Thanks - you are the only one that I found that explained this correctly!

    ReplyDelete
  45. Tom RetterbushMay 8, 2011 at 10:08 AM

    I can't get it to work. It looks fine on the preview, but on my Blogger blog all I get is "Find us on Facebook" box like thing. It looks like it's half constructed, but like something is missing. I tried three time and am getting really frustrated. Now what?

    ReplyDelete
  46. berkowits hair & skin clinicMay 12, 2011 at 4:57 PM

    Very Nice Information I am going to have one such box on my blog too

    ReplyDelete
  47. UnknownMay 21, 2011 at 11:48 PM

    Great information & great tool. Thanks.

    ReplyDelete
  48. AnonymousMay 23, 2011 at 6:33 PM

    Hi, i use this too... but the show faces dosent work ;( is it broken?

    ReplyDelete
  49. ahyarMay 27, 2011 at 5:57 PM

    Thanks, ur article make my blog seem nice and good job!!

    ReplyDelete
  50. techtioMay 28, 2011 at 8:40 AM

    thank you bloggers, this is very helpful for bloggers .... and assist in the competition

    ReplyDelete
  51. Penang Property BookJune 2, 2011 at 6:36 PM

    Hi, no face and like button showed..please advice..thanks

    ReplyDelete
  52. Eke IsraelJune 3, 2011 at 9:35 PM

    wow thanks alot tis works

    ReplyDelete
  53. Red.JJune 14, 2011 at 8:29 PM

    thanks.. it helps a lot
    http://theredjodie.blogspot.com/

    ReplyDelete
  54. Akash RaiJune 18, 2011 at 12:08 PM

    Awesome Its Working......Keep Blogging...every one....:-)

    ReplyDelete
  55. BrianJune 29, 2011 at 7:52 PM

    Nice !!!!!

    ReplyDelete
  56. BrianJuly 31, 2011 at 10:54 PM

    Nice post

    ReplyDelete
  57. Farah LiyanaAugust 2, 2011 at 7:26 AM

    not working for me. it just show "social facebook plug in"
    need help
    http://farahfarly.blogspot.com

    thank you

    ReplyDelete
  58. Muhammad Almer Septa VioryAugust 3, 2011 at 2:30 PM

    me too farah

    ReplyDelete
  59. UnknownAugust 6, 2011 at 1:44 PM

    thx

    ReplyDelete
  60. tabiAugust 8, 2011 at 9:27 AM

    awesome tip i really searching on it

    ReplyDelete
  61. UnknownAugust 11, 2011 at 4:31 PM

    Thanks for the fantastic article. I learnt a lot in just two minutes :)

    ReplyDelete
  62. WeIrD WoRLDAugust 15, 2011 at 7:38 PM

    The like box is not working for my blog: eshayaris.blogspot.com

    I guess BloggerPlugins has also got some problem with the like box and hence has not implemented this feature in the site!!!!

    ReplyDelete
  63. AgusAugust 25, 2011 at 10:21 AM

    Nice post bro...
    thanks for share with us...

    ReplyDelete
  64. Lynzi M.September 16, 2011 at 9:47 AM

    Worked perfect! Thanks

    ReplyDelete
  65. AnonymousSeptember 19, 2011 at 12:16 AM

    Hi all,
    Can you help me? I tried to put like box in my blogger, but i have problem with the word " Could not retrieve id for the specified page. Please verify correct href was passed in." My URL is http://www.facebook.com/ngosblog.cambodia and i have changed from http://www.facebook.com/bloggerplugins . so I don't know my what is my URL. Can you help me?

    Thanks

    ReplyDelete
  66. AnonymousSeptember 19, 2011 at 12:24 AM

    hi

    ReplyDelete
  67. JohnSeptember 26, 2011 at 6:28 AM

    hi thank for the tutorial, i success to make it.

    ReplyDelete
  68. janice vidalOctober 10, 2011 at 12:20 AM

    mine really did not work and the coding that was already there and the coding on your was really different, at leas the line that i was suppose to change was not the same

    ReplyDelete
  69. UnknownOctober 10, 2011 at 7:57 AM

    @Janice - choose xfbml from the drop down instead of HTML5

    ReplyDelete
  70. sudheeraOctober 17, 2011 at 3:54 PM

    :( when I try to edit my HTML it says "template-skin only available for templates version 2 and above" why is that..? please help

    ReplyDelete
  71. sudheeraOctober 17, 2011 at 3:56 PM

    "template-skin only available for templates version 2 and above" why this comes up when I try to save HTML?

    ReplyDelete
  72. PhotographyOctober 20, 2011 at 5:50 PM

    Not working anymore. why?

    ReplyDelete
  73. UnknownNovember 1, 2011 at 10:17 AM

    i tried this my blog bulbsandbubbles.blogspot.com and only a white box appears.. help please. i labelled the widget 'under construction' for now in case it needs some time to load from facebook.

    bulbsandbubbles.blogspot.com

    ReplyDelete
  74. Ranul Hashika GomasNovember 6, 2011 at 6:01 PM

    thanks

    ReplyDelete
  75. UnknownNovember 7, 2011 at 11:16 PM

    Thank you!! I needed the step-by-step that you provided in order to be successful at getting this to work!

    ReplyDelete
  76. AnonymousNovember 11, 2011 at 8:25 AM

    AWESOME~~ LOVE IT

    ReplyDelete
  77. AnonymousNovember 25, 2011 at 4:00 PM

    Not working for me :( any other way please?

    ReplyDelete
  78. AnonymousNovember 25, 2011 at 4:29 PM

    Yes! Finally i got it worked!... woooo! Thank you so much!

    ReplyDelete
  79. Kunal RajputNovember 28, 2011 at 5:56 PM

    Hey, thanks for sharing the info. I installed this plugin on my blog but for some reason it automatically adds a scroll bar at the bottom. I have even played around with the width adjustment tool in the design template but that doesn't help! I basically want to get rid of the scroll bar, have a look here:

    http://kunalrajput.blogspot.com

    Any help would be appreciated. Thanks.

    ReplyDelete
  80. UnknownDecember 1, 2011 at 9:11 PM

    Thanks!

    ReplyDelete
  81. wahabDecember 5, 2011 at 2:04 AM

    merci pour le partage de l'info

    ReplyDelete
  82. Top 10 ThingDecember 13, 2011 at 3:36 AM

    Awesome Its Working.. thank you

    ReplyDelete
  83. Nirati December 19, 2011 at 4:07 PM

    Didn't work for me. HELP :S
    thisistherealitarin.blogspot.com

    ReplyDelete
  84. anurag mishraDecember 27, 2011 at 11:35 PM

    yes it work for my blog http://sure2download.blogspot.com/

    ReplyDelete
  85. The Ripple EffectDecember 30, 2011 at 8:52 AM

    Brand New blog - I've tried a couple of times to add this in and it won't appear. Not sure where I am making the mistake. cleansecritic.com

    ReplyDelete
  86. The Ripple EffectDecember 30, 2011 at 9:14 AM

    I think I got it. Had to add the third box of code in.

    ReplyDelete
  87. UnknownDecember 30, 2011 at 10:48 PM

    @The Ripple Effect - your blog is showing a 404 error page for me. have you configured the custom domain properly?

    ReplyDelete
  88. sunilJanuary 2, 2012 at 5:47 PM

    i will definately use this feature in my blog...thnx bro.!!!

    ReplyDelete
  89. Anna SawińskaJanuary 10, 2012 at 1:25 PM

    I think there have been some changes from 1st January 2012 and the changes to html template do not work properly. Any updates on that?

    ReplyDelete
  90. Natasha January 15, 2012 at 6:29 PM

    Thank you so much! You are such a great help!

    ReplyDelete
  91. GandrungDarsoJanuary 18, 2012 at 6:37 PM

    thank you! i have already made it and running :)

    ReplyDelete
  92. ROYAL TIGERJanuary 20, 2012 at 12:50 AM

    please resolve this problem when i try http://hdworldgold.blogspot.com/

    Could not retrieve id for the specified page. Please verify correct href was passed in.

    ReplyDelete
  93. ΓιαννηςJanuary 29, 2012 at 4:15 PM

    Thanx.....very useful post.

    ReplyDelete
  94. Dev RaxFebruary 18, 2012 at 10:36 PM

    Thanks, really helpful.

    ReplyDelete
  95. KevetteFebruary 19, 2012 at 10:50 PM

    Thank you, thank you, thank you. I've been searching for over a week and finally found your site. Awesome tip. Worked great. Yay! (you are bookmarked :)

    ReplyDelete
  96. AnonymousFebruary 20, 2012 at 7:22 PM

    i dosnt work?

    ReplyDelete
  97. AnonymousFebruary 22, 2012 at 9:16 PM

    I did it Take a look :)

    Thanks

    ReplyDelete
  98. AnonymousFebruary 23, 2012 at 3:27 AM

    can you help me... please I don't know what to do. Where will I paste the code and how will it work after pasting. thanks.

    ReplyDelete
  99. SFebruary 27, 2012 at 12:23 AM

    Thanks a lot! These images are a bit outdated now, but I was able to figure things out and get my button in there.

    Not sure what to do for dinner?

    easyasbananas.blogspot.com

    ReplyDelete
  100. AnonymousMarch 12, 2012 at 9:00 PM

    im kinda stuck at the html part... i put the fb tag next to the html but when i wanted to see it, it says that i need to close the XML code must be closed properly.. but when i erased the codes, everything was normal and the like thingy didnt appear... help me ):

    ReplyDelete
  101. UnknownMarch 20, 2012 at 1:12 PM

    I can't make it work i can't install this on my blog: http://300mbfilmss.blogspot.com/

    ReplyDelete
  102. RafalMarch 31, 2012 at 8:48 PM

    I did that and it is working perfectly http://dobretesty.blogspot.com

    ReplyDelete
  103. Team Breda WeekApril 3, 2012 at 1:08 AM

    Do you know if its work with the new template of blogger "Dynamic effect" if my translation is good.
    You can see the template here: http://lebredaweek.blogspot.fr/

    ReplyDelete
  104. Computer For DummyApril 12, 2012 at 3:41 PM

    Thanks sir for your great information. Thanks a lot.
    Computer dummy

    ReplyDelete
  105. AnonymousApril 21, 2012 at 8:59 PM

    I couldn't believe I followed your instructions and it messed up my blog.

    ReplyDelete
  106. Ahsan GhumanFebruary 26, 2013 at 12:53 AM

    thanksssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

    ReplyDelete
  107. KAMRAN KHANApril 4, 2013 at 11:14 PM

    Thanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    ReplyDelete
  108. UnknownApril 29, 2013 at 7:05 AM

    very very thanx brother ; I have added like box www.mianshakir.blogspot.com

    ReplyDelete
  109. Nepali MyanmarMay 27, 2013 at 5:09 PM

    it's work, thank you very much for you help.

    ReplyDelete
  110. UnknownJune 8, 2013 at 12:54 PM

    Excellent blog.You are sharing such a informative blog and this post gave to us lot of knowledge about fan box for blogger and after reading you post I will trying this.

    ReplyDelete
  111. Akbar IlyasJuly 31, 2013 at 4:02 PM

    Great little guide! I think all sites should have social media links these days, otherwise they're losing out on some valuable resources and free advertising. Imagine DubLi or eBay with such integrated features, for example.

    Facebook integration into your site is a nice feature. I especially liked the fact that you explained how to make the code validate. :)

    ReplyDelete
  112. UnknownApril 16, 2015 at 10:30 PM

    So helpful. Thanks

    ReplyDelete

Post a Comment