Step-by-Step Guide: Adding the Facebook “Like Box” to Your WordPress Website
- Determine the Facebook account and page that you want the “Like Box” to be associated with. If you’re not sure, navigate to the page in Facebook where you post comments that you would like to have brought into your WordPress site
- Copy the URL
- In your browser go to: http://developers.facebook.com/docs/reference/plugins/like-box/
- In the top box, Paste or type the URL of the Facebook page that you would like to associate with.
- For the width, you can leave it at the default setting of 292 pixels. If the width of the location where you would like to place the “Like Box” is different than 292 pixels, you can type it in now. If you’re now sure, it’s OK, you can change it later.
- For Color Scheme, you can choose light or dark. It’s just a matter of preference.
- Leave the remaining boxes checked.
- Click “Get Code”
- Highlight and copy the code from the “iFrame” box and press OK.
- Now, log in to your WordPress dashboard.
- On the left hand side under “Appearance” click on “Widgets”
- Drag a “Text” Widget over the to Primary Sidebar.
- When it opens, paste the iFrame code that you copied from Facebook into the body of the text box.
- Click Save.
- Now go to your website to see how it looks. If it looks too wide, you can adjust the width by changing the 292 to a smaller number, say 260, and press Save again.
- Go to your website and verify that it fits in the space provided. You can continue this process until it fits.
Congratulations! If you have followed these steps correctly you now have a Facebook Like Box in the sidebar of your WordPress website.
Facebook
Twitter
LinkedIn
Thanks, very useful!!!
I was losing time searching for the best plugin, but your solution is better! Easy, direct and customizable!
Thank you Alessandro. Yes, this plugin comes from facebook so you know it will be updated to correspond to future changes in their system.
Everything seems to work well until I press save on the text box. When I do the code disappears and nothing shows up on my sidebar. I’ve tried both the iframe and XFBML code. Am I doing somthing wrong? Thanks!
It doesn’t sound like you’re doing anything wrong. I’ve had that same problem with pasting in iframe code from the Amazon affiliate program. I always use the iframe code, not the xfbml. I would try several of the usual methods to correct the problem like, closing down and re-opening your browser program, trying it from a different browser (ex. Firefox instead of IE), closing down and re-starting your computer. Please let me know how that works out. If it doesn’t, I can dig deeper.