Facebook Like/Fan Box For Blogger

1/29 10:24:00 AM Saturday, January 29 ,

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 (The url which you see in the address bar when you visit your fan page.) .Copy this url from your address bar.

2. Visit page

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

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

117 comments :

  1. Diman7January 29 at 3:48 PM

    thanks, i put this code with the "Facebook Share Button-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

  2. polycarbonate sheetsJanuary 29 at 4:04 PM

    good one to use thanks for the post i like it

  3. Jabroo TipsJanuary 29 at 4:30 PM

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

  4. Social BookmarkingJanuary 31 at 10:51 AM

    Great. I Like it

  5. SchmitzlJanuary 31 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!

  6. VeeFebruary 1 at 3:15 AM

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

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

  8. MathukuttyFebruary 3 at 7:00 AM

    You can easily get all codes from facebook. 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 (left side bar). If it is helpful, you can reply through contact menu.

  9. AnonymousFebruary 3 at 9:25 PM

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

  10. Beben KobenFebruary 3 at 11:35 PM

    For about it, facebook have launch in here my friend

    And don't forget for look my fan page ;) :D

  11. PragatiFebruary 5 at 2:21 PM

    I was searching for the same for my blog.
    Thanks for the guidance.

  12. Maryland MoversFebruary 6 at 2:51 AM

    really that code works thanks for sharing man

  13. diLFebruary 9 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?

  14. UnknownFebruary 9 at 11:58 AM

    @diL - Refer facebook-like-box-for-blogger.html

  15. NgomongNgapakFebruary 11 at 11:29 PM

    Nice info. Tks

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

  17. UnknownFebruary 18 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

  18. AnonymousFebruary 20 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 although I have removed the widget for now as it was not working

  19. Tutorial KomputerFebruary 23 at 9:00 AM

    thanks for share,,,

  20. CurvyCdnFebruary 25 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!

  21. forhuntersbyhuntersFebruary 26 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...

  22. BULALUFebruary 28 at 5:14 AM

    thanks....i'll try

  23. YuliaslovicMarch 2 at 2:20 PM

    waw keren

  24. Joy@Thrifty Parsonage LivingMarch 3 at 3:26 AM

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

  25. Mencari FaktaMarch 5 at 5:18 AM

    THANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

  26. UnknownMarch 9 at 5:13 PM

    you are the best

  27. Duncan D. Horne - the Kuantan bloggerMarch 11 at 2:19 PM

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

  28. Jill HamiltonMarch 13 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

  29. chetanMarch 13 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

  30. ardiMarch 14 at 11:54 AM

    thank you....

  31. Justine of SewCountryChickMarch 16 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

  32. AaronMarch 16 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?

  33. Godson ThomasMarch 19 at 12:35 PM

    Nice Explanation. Thank you.

  34. UnknownMarch 21 at 8:27 PM

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

  35. fredrikMarch 22 at 5:39 AM

    thanks for the information.....

  36. swetaMarch 24 at 1:11 PM

    good

  37. slumberApril 1 at 5:26 PM

    Great. I Like it..

    thanks for the information.....

  38. Design StrawApril 6 at 4:30 PM

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

  39. adminApril 17 at 5:22 AM

    i'm already use it..

  40. jackApril 18 at 7:20 AM

    Thank you!

  41. Peter VandenBergApril 21 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

  42. Yogesh DhimanApril 24 at 12:25 AM

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

  43. Marsha CooperApril 27 at 7:58 AM

    I am not getting this to show up on my blog :( Any way you can tell me why??
    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!!

  44. AnonymousApril 27 at 1:23 PM

    Nice info.... Thanx

  45. JacquelineMay 5 at 9:51 PM

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

  46. Tom RetterbushMay 8 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?

  47. berkowits hair & skin clinicMay 12 at 4:57 PM

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

  48. UnknownMay 21 at 11:48 PM

    Great information & great tool. Thanks.

  49. AnonymousMay 23 at 6:33 PM

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

  50. ahyarMay 27 at 5:57 PM

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

  51. techtioMay 28 at 8:40 AM

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

  52. Penang Property BookJune 2 at 6:36 PM

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

  53. Eke IsraelJune 3 at 9:35 PM

    wow thanks alot tis works

  54. Em MJune 7 at 11:14 PM

    Hi! I followed your instructions, and even though the "live preview of the Like/Fan box" as you called it came out as it should be (ie directing people to my blog's Facebook page), when I copied the code into the HTML Gadget box and saved it, the actual Like Box on my blog just said "social plugin for Facebook" and takes anyone who clicks it to the Social plugins page on FB Any suggestions please? The same happens even when I copy the code straight into the HTML of the blog.

  55. Red.JJune 14 at 8:29 PM

    thanks.. it helps a lot

  56. Akash RaiJune 18 at 12:08 PM

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

  57. JamJune 20 at 12:18 PM

    Thanks is useful

  58. BrianJune 29 at 7:52 PM

    Nice !!!!!

  59. BrianJuly 31 at 10:54 PM

    Nice post

  60. Farah LiyanaAugust 2 at 7:26 AM

    not working for me. it just show "social facebook plug in"
    need help

    thank you

  61. Muhammad Almer Septa VioryAugust 3 at 2:30 PM

    me too farah

  62. UnknownAugust 6 at 1:44 PM

    thx

  63. tabiAugust 8 at 9:27 AM

    awesome tip i really searching on it

  64. UnknownAugust 11 at 4:31 PM

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

  65. WeIrD WoRLDAugust 15 at 7:38 PM

    The like box is not working for my blog

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

  66. AgusAugust 25 at 10:21 AM

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

  67. Lynzi M.September 16 at 9:47 AM

    Worked perfect! Thanks

  68. AnonymousSeptember 19 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." so I don't know my what is my URL. Can you help me?

    Thanks

  69. AnonymousSeptember 19 at 12:24 AM

    hi

  70. JohnSeptember 26 at 6:28 AM

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

  71. janice vidalOctober 10 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

  72. UnknownOctober 10 at 7:57 AM

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

  73. sudheeraOctober 17 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

  74. sudheeraOctober 17 at 3:56 PM

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

  75. PhotographyOctober 20 at 5:50 PM

    Not working anymore. why?

  76. UnknownNovember 1 at 10:17 AM

    i tried this my blog 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.

  77. Ranul HashikaNovember 6 at 6:01 PM

    thanks

  78. UnknownNovember 7 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!

  79. AnonymousNovember 11 at 8:25 AM

    AWESOME~~ LOVE IT

  80. Cindy SmithNovember 20 at 7:33 PM

    Thank You dude ;)

  81. AnonymousNovember 25 at 4:00 PM

    Not working for me :( any other way please?

  82. AnonymousNovember 25 at 4:29 PM

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

  83. Kunal RajputNovember 28 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:


    Any help would be appreciated. Thanks.

  84. UnknownDecember 1 at 9:11 PM

    Thanks!

  85. wahabDecember 5 at 2:04 AM

    merci pour le partage de l'info

  86. Top 10 ThingDecember 13 at 3:36 AM

    Awesome Its Working.. thank you

  87. Nirati December 19 at 4:07 PM

    Didn't work for me. HELP :S

  88. anurag mishraDecember 27 at 11:35 PM

    yes it work for my blog

  89. The Ripple EffectDecember 30 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.

  90. The Ripple EffectDecember 30 at 9:14 AM

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

  91. UnknownDecember 30 at 10:48 PM

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

  92. sunilJanuary 2 at 5:47 PM

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

  93. Anna SawińskaJanuary 10 at 1:25 PM

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

  94. Natasha January 15 at 6:29 PM

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

  95. GandrungDarsoJanuary 18 at 6:37 PM

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

  96. ROYAL TIGERJanuary 20 at 12:50 AM

    please resolve this problem when i try

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

  97. ΓιαννηςJanuary 29 at 4:15 PM

    Thanx.....very useful post.

  98. Dev RaxFebruary 18 at 10:36 PM

    Thanks, really helpful.

  99. KevetteFebruary 19 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 :)

  100. AnonymousFebruary 20 at 7:22 PM

    i dosnt work?

  101. AnonymousFebruary 22 at 9:16 PM

    I did it Take a look :)

    Thanks

  102. AnonymousFebruary 23 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.

  103. UnknownFebruary 27 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?

  104. AnonymousMarch 12 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 ):

  105. UnknownMarch 20 at 1:12 PM

    I can't make it work i can't install this on my blog

  106. RafalMarch 31 at 8:48 PM

    I did that and it is working perfectly

  107. Team Breda WeekApril 3 at 1:08 AM

    Do you know if its work with the new template of blogger "Dynamic effect" if my translation is good.

  108. Computer For DummyApril 12 at 3:41 PM

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

  109. AnonymousApril 21 at 8:59 PM

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

  110. Ahsan GhumanFebruary 26 at 12:53 AM

    thanksssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

  111. KAMRAN KHANApril 4 at 11:14 PM

    Thanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

  112. UnknownApril 14 at 5:16 PM

    Nice post, excellent article. Really helpful & informative article.

    Find Everything About Search Engine Optimization

  113. UnknownApril 29 at 7:05 AM

    very very thanx brother ; I have added like box

  114. UnknownMay 27 at 5:09 PM

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

  115. UnknownJune 8 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.

  116. Akbar IlyasJuly 31 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. :)

  117. UnknownApril 16 at 10:30 PM

    So helpful. Thanks