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 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:
- Head over to the developers like box page on Facebook.
- Type in your Facebook Page URL (has to be a business page and not a personal profile)
- Select your options.
- Click the “Get Code” button.
- Select iFrame, copy and paste the code it outputs into a text file.
- 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.
About Brian Bourn
Organize Your WordPress Pages Dashboard With Simple Page Ordering
Customize Your WordPress More Tag Link Text
WordPress Now Supports HTML In Image Captions
How to Use the WordPress Next Page Tag to Manage Long Content
WordPress Resources No Website Owner Should Be Without
There are designers that can make it pretty, coders that can make it work, and marketers that can make it sell — at 
Bourn Creative is a 
Great tip, I love this particular way of doing things, and your instructions are so clear. Thanks!
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.
Thanks for the step by step instructions, Jennifer–as always you make complicated things much simpler!
Way cool. Your instructions were easy to follow and even a Luddite could do it
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.
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.
Thanks ,Now i have the facebook like box on my blog
Thank you so much! This worked the first time. I have not had success following FB’s instructions, lol.
Awesome. Glad to hear to our post was easy to understand.
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.
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?
I am sorry but I am not sure what “Blue Griffon” is.
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.
You may want to take a look at the official Facebook plugin. The setup is a little more involved but it may help. http://wordpress.org/extend/plugins/facebook/
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
As far as I know you don’t need to set up a new App ID. I have used ours several times.
The Facebook Developers section of their site has documentation on the various options for implementation. https://developers.facebook.com/docs/plugins/
I would also take a look at the official Facebook WordPress plugin at the link above this comment.
Following their instructions for HTML5, the Like Box is working correctly. Thanks for the reply, Brian!
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.
There are numerous WordPress plugins you can you use for this. Two we like are Digg Digg and JetPack.
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…:)
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.
Thanks for this tutorial, This helped alot, Thanks again :)
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.
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
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
I looked at your site and it looks like you are having an issue with the width. Try changing the width to around 250px and that make it look correct.