Add a Facebook Like Box to Your WordPress Blog

Adding a Facebook Like Box to your WordPress blog enables users to like your Facebook Page and view its stream directly from your website. In this video, I’ll show you how to add a Facebook Like Box to the sidebar of your WordPress blog.


You need to upgrade your Flash Player to version 8 or newer.


Like this tip?

Would you like to receive the WordPress Tip of the Day delivered straight to your inbox each and every day?
Click here to subscribe now!

Comments (29)

Trackback URL | Comments RSS Feed

  1. Dominic says:

    Can this be done on a wordpress.com blog? When I try to do this, the text disappears when I go to save it.

  2. Ben Cope says:

    @Dominic – no, you are not able to paste iframe code into a text widget with a wordpress.com blog. Adding a facebook fan box widget as shown in this video requires a self-hosted WordPress blog. =)

  3. Sabera says:

    I have a self hosted wordpress blog and the text still disappears as @Dominic above has said. What should I do?

  4. Ben Cope says:

    @Sabera – Your site (onelifetoeat.com) is not a self-hosted WordPress blog; your site is running on wordpress.com using a custom domain name.

    That explains why the facebook code is disappearing when you try to save it. =)

  5. Clay says:

    So is there any work around for adding facebook like box to a wordpress.com blog?

  6. johny d says:

    thanks dude!!:)

  7. Ben Cope says:

    Unfortunately, due to security concerns, wordpress.com users cannot add the facebook like box to their sites:

    http://en.support.wordpress.com/code/

  8. DTKB says:

    We can't get this to work and did this exactly the same way. Any ideas?

  9. Iampneuma says:

    For some reason every time I paste it to the text section just like you did , when I click ‘save’ the text disappears and won’t add, neither save. I’ve tried a few times, but I don’t know what to do. Help please!

  10. Iampneuma says:

    nm i read my answer in the other comments.

  11. Lazarria says:

    Thanks.. that was quick and easy!

  12. Really well done explanation. Thanks!

  13. Ragman says:

    Thank you for a great video. Please note that in Firefox the get code option displays colon and forward slashes in a odd set of characters and causes your like box to disappear.

  14. Paul says:

    Just pasting the id number did not work for me and perhaps some other people are having the same problem. When you are on your fan page hover over your top left logo or photo, you should see your whole Facebook URL down the bottom of your browser window. While hovering on your logo, Right click and choose copy this link then paste that into your widget address bar. Hope this helps.

  15. Kate says:

    I feel like before people start these videos they need to explain that wordpress hosted blogs such and don’t let you do anything cool on them like this. I kind of figured that’s why the pasting of the code wouldn’t work. I’ll have to wait until later this week when I move it from wordpress.com.

  16. All dear friends,
    Like all other friends I am also having the same problem,I too cant add the like box but I am managing with some idea which is working out for me.
    URL :: http://indiancriticz.wordpress.com/2011/03/17/adding-facebook-like-box-widget/
    Hope so its useful !! :D :D

  17. Just to be clear, this is for http://WordPress.org sites not http://Wordpress.com but I am glad to see you have worked it out!

  18. Catherine says:

    This worked great but I’m having one issue. I use the theme Devolux. I don’t have the stream added and I do want to see the faces of our fans/likes. I pasted the iFrame code as it appears but when I view my blog site the box cuts off 1/2 the Like box. It doesn’t appear to be something in the code, rather the theme? Can you help?

  19. Catherine,

    Did you set the width and the height for the Live Stream? How about the dimensions for the sidebar widget? In our Dream Theme, we select the text widget and drag it over to the sidebar and then just drop in the code. Simple. Check with the developer for the theme you are using to see what solutions they recommend.

  20. Catherine says:

    I didn’t install the Live Stream, only the “like box”. The code gives me the option to adjust the width but not the height. I don’t see where to adjust the height on the widget itself. I submitted the question to the creator, although the last blog comment response he posted was May 2010. Hoping to get a quick response. Any ideas you may have…? I appreciate your help Kimberly!

  21. Duane says:

    How do I determine if my site is a “self-hosted” site, or not?

  22. José Neto says:

    I did all mentioned and the result is that instead of the like box i get the text code shown. Otherwise what was said on the other posts when i paste the code it was saved exactly as suposed and didn´t dissapear.

    Am i doing something wrong ot it as to do with the fact that i have a wordpress.com site?

  23. Correct, José, as far as I know it doesn’t work on wordpress.com :(

  24. Duane… if your site is something like… mysitename.wordpress.com then your site is hosted by WordPress. In order to have self-hosting you have to pay for service through a hosting company such as Our Bluehost. Roughly about 6 bucks or so a month.

  25. Jerry Purvis says:

    I’ve been doing exactly what you say and everyone else is saying. I add the code to a text box in a sidebar widget, but when I save, and reload my site, nothing shows up. This is a self-hosted site.

  26. Imraan says:

    thank you for this awesome tip.

  27. thank you for this awesome tip.

  28. Pablo says:

    THANKS FOR THE VIDEO! For the best help for Like Box in Facebook in spanish visit my Site.

  29. bsnl tablet says:

    Thanks for the solution it works great..

Post a Comment




If you want a picture to show with your comment, go get a Gravatar.