How to Add the Facebook Like Box to Your WordPress Site

Facebook Like BoxAfter my post on how to add the official Twitter Widget to your WordPress site without a plugin, several readers emailed me and asked me to explain how to add the Facebook Like Box to their WordPress site.

Now, Facebook doesn’t give you too many customizing options … They wan to make sure that no matter what it is always obvious it is a Facebook widget and that their brand is promoted.

With that said, there are a few options for adding a Like Box to a website, and the method below is probably the easiest and the one we choose to use for our clients.

For the record, we don’t use the like box, we prefer to just use the like button.

Here’s step-by-step instructions (with screen shots) on how to add the Facebook Like Box to your WordPress website or blog:

  1. Head over to the developers like box page on Facebook.
  2. Type in your Facebook Page URL (has to be a business page and not a personal profile)
    How to add the Facebook like box to your WordPress website
  3. Select your options.
  4. Click the “Get Code” button.
  5. Select iFrame, copy and paste the code it outputs into a text file.
    How to add the Facebook like box to your WordPress website
  6. Log in to your WordPress site and add a new text widget (or use an existing one) to your sidebar, paste in the code and save it.
  7. Take a look at your site and adjust the width and height properties of the pasted code until it looks right.

    Now your website visitors can click the like box on your site and become fans without having to directly go to your Facebook page.

About Brian Bourn

At the helm of Bourn Creative, is Brian, who manages the day-to-day business operations and all company projects. While he spends most days entrenched in code, Star Wars, WordPress, and the Genesis Framework building client websites and custom themes, Brian is also a brilliant business strategist and can often be found consulting with clients on how to best achieve their online goals.

Able to break down complicated topics into easy to understand, simple steps, Brian regularly attends and speaks at meetup groups, WordCamps (his favorite), networking events, and conferences on the topics of design, website strategy, and tech-nerd stuff.

Bourn Creative Recommends WP Engine

WP Engine WordPress Hosting Gain peace of mind knowing your website (the main source of your online income) is safe, secure, and protected with WP Engine - an insanely fast, infinitely scalable, backed up, secure, expert WordPress hosting company that’s got your back!

Comments & Feedback:

  1. Great tip, I love this particular way of doing things, and your instructions are so clear. Thanks!

  2. Thank you for the clear and concise “how to” on the FB Like Box. I was considering adding this widget to my existing site a few months ago but decide to just stick with using a custom icon. I’m wondering if there are any particular pros and cons or considerations in regarding choosing one over the other.

  3. Thanks for the step by step instructions, Jennifer–as always you make complicated things much simpler!

  4. Way cool. Your instructions were easy to follow and even a Luddite could do it

  5. Thanks Jennifer. I think that the Facebook Like box is a very important feature to have on your web site. I definitely have it on mine. Great tips and I’ll pass them along to anyone who needs step by step instructions.

  6. Absolutely brilliant explanation, thank you! After installing buggy plug-in upon buggy plug-in and finding an out-of-date instruction article from 2010, I finally came across your article and it worked first time.

  7. Thanks ,Now i have the facebook like box on my blog

  8. Thank you so much! This worked the first time. I have not had success following FB’s instructions, lol.

  9. I have to edit some info on my fb box on my website and the info was a great help. Thanks for this valuable info.

  10. I have tried this and other sites to include the Like button into the code of my web page but it doesnt work. I dont understand what I am doing wrong. I am using Blue Griffon, when I click where I want it to go on the page it shows me where to put the code and when I do that nothing happens or I get all kinds of messages saying the code isnt right or not placed right. Can you help?

  11. Hey Brian, Nice tutorial. I’ve placed the like box in my blog. Main problem of this box is it takes much time in loading.

  12. Hey Brian,
    This is pretty simple to follow. Thanks! Can you also explain this process using the HTML5 option? I’m asking because opting for the HTML5 as a future-proof way to use the Like Box. Or does that matter?
    And what about the “App ID of your App _______ “? Do I need to bother with this? It automatically loads a list of App IDs that I previously set up. Do I need to create a new one each time?
    Thanks!
    David

  13. Clear, but the problem is what about adding a “like” button to your site if you DON’T have a Facebook page? Not every WordPress site has a matching Facebook page.

    Thanks.

  14. Thanos F. says:

    Hey, really nice tut… i was searching for a plugin to do this but your way is more clear and flexible.. One quick question:
    I want to display in my website only the number of likes the total number of likes and the like button. I get this functionality by customizing the like box in the link you posted. The problem is that I want to get rid of the facebook page title as its obvious that this website is connected to my fb page.
    So is it possible to have something like [box with number of likes] like button. I dont mind for the layout i just want to remove the facebook page title..Is it possible?
    Thanx…:)

    • Thanos F. says:

      well, in fact i want something like this facebook like box that you have in this left sidebar.
      <———————– :)
      Number of likes that correspond to my fb page
      like button.
      That you be perfect!

      • For something like that you can just get the Like Button code for a single URL from the same Facebook Developers area as the Like Box and paste that into your site.

  15. Thanks for this tutorial, This helped alot, Thanks again :)

  16. Sometimes I feel like IFRAME code takes more time to load the website while using poor bandwidth. Which one you suggest for the best optimiztion HTML5/ IFRAME/ FBML

    I’m using WordPress.

    Sathish

    • The last time I created a Like Box for a client, I used the latest HTML5/FBML code from the Facebook Developers page, which without extensive testing, did appear to perform a little better. The downside is that it isn’t as easy to implement as the iframe method. You may want to check out the official Facebook WordPress plugin.

  17. Thanks for the tutorial. It really help me. God bless you and keep the good job up even if it does not pay. But I know good works always pay. Thanks

  18. I have done this several times and it doesn’t work. You can see http://www.postureretreat.com (the facebook box shows with ‘join me’) I have copied the code many many times and inserted it and used my facebook business page for my new site but nothing works. I then did it the plugin route and added the facebook like box widget plugin and that doesn’t work either. Any ideas?

    Thank you

  19. Nice and simple tutorial, however I feel using HTML5 is more safer and modern code that works well for easy and fast loading of pages.

    Great article Brian!

  20. This is perfect, I added it to my website and with a little bit of fine tuning it looks great on my website. So thank you very much!

  21. Thanks for the informative article Brian,

    Can you please tell me how you have created such a beautiful comment box. I am using the jet pack for the comments.

  22. Simple tips, but good for new user..

  23. any idea why this isnt working? is this article out of date? the widget just displays the exact text i’m given as the code (using iframe)

  24. Thank You for the step by step instructions. Very useful and worked perfectly.

  25. Thanks Brian! You rock!

Share Your Comments & Feedback:

*