standard icon

How to Add the Facebook Like Box to Your WordPress Site

After 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 want 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.

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.

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.

Subscribe To Our Blog & Never Miss A Thing

Sign up to get new our latest posts and announcements delivered straight to your inbox. Seriously, at this point, what’s one more email?

Comments & Feedback:Check out what others have to say about this post!

  1. 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.

  2. 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.

  3. 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.

  4. zara

    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?

  5. 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?

  6. robert

    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.


  7. Thanos F.

    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?

    • Thanos F.

      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.

  8. 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.


    • 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.

  9. I have done this several times and it doesn’t work. You can see (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

  10. 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!

  11. nicole

    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)

Share Your Thoughts & Opinions!

Have something to say, add, or share? Speak up!