How to add Facebook Like/Fan Box to Blogger

Posted on March 12, 201252 comments
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. AdeelAugust 14, 2012 at 5:03 AM

    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. UnknownSeptember 25, 2012 at 12:35 AM

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

    ReplyDelete
  3. You You XueNovember 17, 2012 at 2:31 AM

    Thanks! It really helped me! :))

    ReplyDelete
  4. shafikkDecember 14, 2012 at 11:03 PM

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

    ReplyDelete
  5. The Mango ChroniclesDecember 19, 2012 at 8:40 PM

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

    ReplyDelete
  6. UnknownDecember 28, 2012 at 12:46 AM

    Thanks!!! ^_^

    ReplyDelete
  7. Mermaid SueDecember 30, 2012 at 8:13 PM

    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
  8. AnonymousDecember 31, 2012 at 4:19 AM

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

    ReplyDelete
  9. jobalertnowFebruary 6, 2013 at 4:24 AM

    thanks it helped a lot..

    ReplyDelete
  10. Lloyd OstertagFebruary 8, 2013 at 10:46 AM

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

    ReplyDelete
  11. · Olvido Madrid ·February 14, 2013 at 2:54 AM

    Thanks a lot! It works :)

    http://olvidomadrid.blogspot.com

    ReplyDelete
  12. Zainal ZakariaFebruary 14, 2013 at 9:44 AM

    thanks a lot.. very usefull blog.

    ReplyDelete
  13. Ankit @ Blogger Tips TricksFebruary 14, 2013 at 12:42 PM

    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
  14. Blog girlFebruary 23, 2013 at 1:07 AM

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

    ReplyDelete
  15. AkilaFebruary 23, 2013 at 8:54 AM

    Thanks for you help.. you really rock...

    ReplyDelete
  16. Katie De LaFebruary 27, 2013 at 8:25 AM

    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
  17. Tariqur RahmanNovember 2, 2013 at 4:53 AM

    facebook chance her policy not its feature is not working

    ReplyDelete
  18. Syed Ather RizviNovember 10, 2013 at 11:01 PM

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

    ReplyDelete
  19. TheCyborgMomNovember 12, 2013 at 8:27 AM

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

    ReplyDelete
  20. Rakmoddin InamdarDecember 12, 2013 at 11:50 AM

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

    ReplyDelete
  21. KironDecember 27, 2013 at 3:40 AM

    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
  22. RanaDecember 27, 2013 at 3:42 AM

    really helpful post for beginner ..

    ReplyDelete
  23. UnknownJanuary 9, 2014 at 6:56 AM

    www.tamoorraj.blogspot.com

    Nice <3

    ReplyDelete
  24. UnknownJanuary 16, 2014 at 4:59 AM

    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
  25. SunshineJanuary 17, 2014 at 9:10 AM

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

    ReplyDelete
  26. Autumn JonesJanuary 25, 2014 at 3:25 PM

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

    ReplyDelete
  27. MommyFrazzledJanuary 29, 2014 at 2:14 PM

    Very good post, straightforward and it worked.

    ReplyDelete
  28. summerFebruary 8, 2014 at 7:34 PM

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

    ReplyDelete
  29. Faisal AhammadFebruary 17, 2014 at 6:33 AM

    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
  30. KironFebruary 21, 2014 at 5:32 AM


    really helpful post for beginner ..thanks.

    ReplyDelete
  31. UnknownFebruary 23, 2014 at 5:01 AM

    I was unable to save after the page pop up

    ReplyDelete
  32. AnonymousMarch 1, 2014 at 7:46 AM

    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
  33. My Yellow BellsApril 2, 2014 at 4:27 AM

    everything here is very easy to follow. love this site

    ReplyDelete
  34. JerboyMay 17, 2014 at 7:55 AM

    It worked! Thanks!

    ReplyDelete
  35. ddJune 15, 2014 at 10:01 PM

    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
  36. UnknownJune 28, 2014 at 5:27 AM

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

    ReplyDelete
  37. buzzhairsJuly 4, 2014 at 5:20 PM

    Tnx, it worked!

    ReplyDelete
  38. UnknownJuly 19, 2014 at 8:45 AM

    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
  39. Spectives Design & BuildJuly 30, 2014 at 8:03 AM

    This comment has been removed by the author.

    ReplyDelete
  40. kate @ livinglovinglaughingJuly 31, 2014 at 5:34 PM

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

    ReplyDelete
  41. LauraAugust 4, 2014 at 7:19 AM

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

    ReplyDelete
  42. Mr. PandeyAugust 4, 2014 at 2:49 PM

    Thanks alot......!!!!!!1

    ReplyDelete
  43. UnknownAugust 19, 2014 at 5:56 AM

    Extremely helpful! Thanks a million!! :)

    ReplyDelete
  44. UnknownAugust 20, 2014 at 6:00 AM

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

    ReplyDelete
  45. AnonymousAugust 30, 2014 at 11:16 PM

    tnx a lot!!

    ReplyDelete
  46. FarahSeptember 1, 2014 at 12:05 PM

    I learn a lot! Thanks!

    ReplyDelete
  47. Droid-boys.blogspot.comSeptember 2, 2014 at 12:04 AM

    Thanks <3

    ReplyDelete
  48. UnknownNovember 20, 2014 at 4:33 AM

    thanks u very much sir

    ReplyDelete
  49. UnknownMarch 7, 2015 at 11:13 PM

    thankssss thankssssss thankssss

    ReplyDelete
  50. Cricket BinodonMarch 10, 2015 at 2:42 AM

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

    ReplyDelete
  51. a NYC WomanMarch 11, 2015 at 10:48 AM

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

    ReplyDelete
  52. LisaMarch 12, 2015 at 7:13 PM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)

Privacy PolicyDisclaimerTerms of ServiceSitemapCopyright Policy

Copyright © Helplogger. Powered by Blogger. All Rights Reserved.