How to add Facebook Like/Fan Box to Blogger

A Facebook Fan Box or Like Box is a great plugin that allows blog visitors to subscribe to your blog updates via their Facebook accounts, without leaving your blog. Once subscribing (by pressing the like button), visitors will receive your most recent blog updates on their Facebook page. This box also displays faces of the "likers" on your blog. Before creating a fan box, you should already have a Facebook fan page. If you haven't yet created, click here to learn How to Create a Facebook Fan Page.

facebook like box

Create a Facebook Like Box

1. Find out your Facebook fan page URL by visiting your Facebook fan page and copy the URL in the address bar - you can see how your URL should look like in this screenshot:

facebook page address

2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box

3. Paste your URL into the Facebook Page URL field, as it is shown below:

create facebook fan box

4. Once you are satisfied with the looks of the Like Box, click on the "Get Code" button

5. You'll be given two codes, titled HTML 5, XFBML and IFRAME. The one we need is the 'iframe' code. Select it and copy the code generated in this box, as it is shown in the example below:

facebook iframe code

Add the Facebook Fan Box to Blogger

6. Log in to your Blogger account, go to 'Layout' > click on the 'Add a Gadget' link

blogger layout, add a gadget

 7. From the pop-up window, scroll down and select the 'HTML/JavaScript' gadget:

html / javascript, blogger gadget

8. Paste the code in the empty HTML box:

javascript html gadget

9. Click Save and you're done.

54 comments:

  1. How To Add A Like Box like Ur I Mean At Right Side Facebook Is Written And When I Click A Like Box Appears How To Do This Plz THell

    ReplyDelete
  2. Thanks.... it helped me alot
    wwww.nafjan5.blogspot.com

    ReplyDelete
  3. Thanks! It really helped me! :))

    ReplyDelete
  4. thanks ...
    was a lot of help..
    netpowerinfo.blogspot.com

    ReplyDelete
  5. Thanx a lot man!! The article really helped.. Keep up the good work!

    ReplyDelete
  6. Actually - FB gives you two halves of a code - you need to c&p both halves of that code into the HTML/Java Box.

    ReplyDelete
  7. This was the first one that helped me. Thank you so much :D

    ReplyDelete
  8. thanks it helped a lot..

    ReplyDelete
  9. THIS IS A GREAT POST... KEEP IT UP..

    ReplyDelete
  10. Thanks a lot! It works :)

    http://olvidomadrid.blogspot.com

    ReplyDelete
  11. thanks a lot.. very usefull blog.

    ReplyDelete
  12. Your post seems good as I have added a like box to my blogger blog. Now I need to remove its border. Can you please help me?

    ReplyDelete
  13. Thank you. This is the best advice ever! :)

    ReplyDelete
  14. Thanks for you help.. you really rock...

    ReplyDelete
  15. oh my gosh, it took me forever to figure this out and finally I came across your blog!!! Thank you so much!! Didn't know I needed to use the iframe!!

    ReplyDelete
  16. facebook chance her policy not its feature is not working

    ReplyDelete
  17. Nice Post It's Really Help Full :D
    http://syedather.blogspot.com/

    ReplyDelete
  18. Thank you so much for this! I put both codes fb gave me into the HTML/Javascript box and it worked!

    ReplyDelete
  19. Thanks a lot man! The article really helped.. Keep up the good work!

    ReplyDelete
  20. Great Post, I love to read articles that are informative and actually have good content. Thank you for sharing your experiences and I look forward to reading more.

    ReplyDelete
  21. really helpful post for beginner ..

    ReplyDelete
  22. www.tamoorraj.blogspot.com

    Nice <3

    ReplyDelete
  23. the box seems to go out of my blog page and icant move it towards.when i change the size it becomes too small...can u tell me a standard size which will fit perfectly!thanks!
    https://sarazbeautytonic.blogspot.com

    ReplyDelete
  24. Hey!Thanq it worked :)
    Do you have a post how to get a comment layout like on your page??

    ReplyDelete
  25. Thank you so much! Very easy to follow. :)

    ReplyDelete
  26. Very good post, straightforward and it worked.

    ReplyDelete
  27. Thank you so much...this one really works.

    ReplyDelete
  28. I try it again and again but don't show on my blogger site. I use Avast Antivirus and Ad blocker Plus. Help me please.

    ReplyDelete

  29. really helpful post for beginner ..thanks.

    ReplyDelete
  30. I was unable to save after the page pop up

    ReplyDelete
  31. Anonymous3/01/2014

    Thanks for the helpful post! btw do you have any tips on increasing your facebook likes? I usually get my facebook likes from http://www.ytbot.com but I also want a way to gain them naturally.

    ReplyDelete
  32. everything here is very easy to follow. love this site

    ReplyDelete
  33. is this possible for this pop up to appear only to those who didn't liked it already, I mean it should check the cookie and see if the visitor has signed in to his fb account and if he already had liked the page then this pop up doesn't show.

    ReplyDelete
  34. thank you so much.........
    By follow this article i added my fb like page to my blogger.
    thanks

    ReplyDelete
  35. hey thanks alot...it helped me...i was searching for it since long...and found it finally...see i have included the plugin on my site - http://food8home.blogspot.com

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. thank you!!!!! i tried so many articles on how to do this, yours is the first one that actually WORKED :)

    ReplyDelete
  38. Finally, thank you! My Like box disappeared and I couldn't get it back!

    ReplyDelete
  39. Thanks alot......!!!!!!1

    ReplyDelete
  40. Extremely helpful! Thanks a million!! :)

    ReplyDelete
  41. Thanks alot sir it works very well...Thank you

    ReplyDelete
  42. I learn a lot! Thanks!

    ReplyDelete
  43. thanks u very much sir

    ReplyDelete
  44. thankssss thankssssss thankssss

    ReplyDelete
  45. Very nice usefull tool for the blogger. Thanks to the author.

    ReplyDelete
  46. It didn't work for me. I wonder what do I do wrong? The box doesn't appear on my page.

    ReplyDelete
  47. I can't make this tip for my blog :(

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!