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 already done so, please see here How to Create a Facebook Fan Page.

facebook like box

How to 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. Next, visit this page: https://developers.facebook.com/docs/plugins/page-plugin

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

create facebook fan box


Note: If you don't want to display the timeline of your Facebook page, remove the "timeline" text under the "Tabs" section. You can also specify the Width and Height of the Facebook fan box and change other several options such as using a Small Header, hiding Cover Photo and Show Friend's Faces.

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

5. Next, you'll be given two code options: JavaScript SDK and IFRAME. The one we will use for this tutorial is the iFrame code. Select it and copy the code generated in this box as shown in the screenshot below:

facebook iframe code

Adding 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. Once the pop-up window appears, scroll down and select the 'HTML/JavaScript' gadget:

html / javascript, blogger gadget

8. Paste the iFrame code in the empty HTML box:

javascript html gadget

9. Click the 'Save' button and you're done adding the Facebook Like or Fan box to Blogger.

52 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 ...
    was a lot of help..
    netpowerinfo.blogspot.com

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

    ReplyDelete
  5. 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
  6. This was the first one that helped me. Thank you so much :D

    ReplyDelete
  7. Thanks a lot! It works :)

    http://olvidomadrid.blogspot.com

    ReplyDelete
  8. 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
  9. Thank you. This is the best advice ever! :)

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

    ReplyDelete
  11. 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
  12. facebook chance her policy not its feature is not working

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

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

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

    ReplyDelete
  16. 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
  17. really helpful post for beginner ..

    ReplyDelete
  18. www.tamoorraj.blogspot.com

    Nice <3

    ReplyDelete
  19. 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
  20. Hey!Thanq it worked :)
    Do you have a post how to get a comment layout like on your page??

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

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

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

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

  25. really helpful post for beginner ..thanks.

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

    ReplyDelete
  27. 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
  28. everything here is very easy to follow. love this site

    ReplyDelete
  29. 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
  30. thank you so much.........
    By follow this article i added my fb like page to my blogger.
    thanks

    ReplyDelete
  31. 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
  32. This comment has been removed by the author.

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

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

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

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

    ReplyDelete
  37. thankssss thankssssss thankssss

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

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

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

    ReplyDelete