A Facebook Like Box in your sidebar is an excellent way to alert your readers to your Facebook page and let them "Like" it right from your blog.
Facebook makes it easy to grab the code for your Like Box, however, if you need to change the width of the box at all, sometimes faces get cut off like this:
Not cool.
So, in this video tutorial, I'll show you how to configure, install and then tweak the size of your Like Box so it fits into your sidebar nicely and cleanly.
Can't see the video? Watch it here.
Update 11/4/2011: If your code box doesn't look like mine does in the video, check out the how to in WordPress and Blogger.
Video Notes
- Here's the Like Box. (Find all of the plugins you can use for your Facebook page here.)
- Enter your Facebook page URL.
- Choose the width of the box. This will be determined by your sidebar width. Here's how you can see behind any website.
- Choose a color scheme and whether or not to show faces (why not?), your stream or the header.
- You can also define a border color using any hexidecimal color code. I used light gray indicated by #cccccc (must begin with a # sign). If you don't want a border, choose #ffffff (white) or the color of your background.
- Click the "Get Code" button and copy it.
- In your Dashboard, drag a text widget into your sidebar (How to Use WordPress Widgets).
- Paste your code in to your text widget.
If you need to adjust the height of your Like Box, enter the following piece of code after the data-height property.
To show one row of faces, use this:
data-height="218"
To show two rows of faces, use this:
data-height="293"
Of course, you can tweak the numbers to get it just as you'd like.
That's it! You just installed a Like Box. Easy Peasy. Have you Liked my page? 
Thank you! Thank you! I did it all by myself! Your tutorials are always sooooo helpful and I have learned so much from you!! Thanks a bunch!
You are very welcome! Glad it worked.
Once again Amy….thank you, thank you, thank you! Your site makes it possible for technology challenged bloggers like me to have a vibrant and up to date site!
Glad to help!
That's very helpful. I tried to add this once, but it was too wide. Now it fits. However, I'm still getting cut off faces, even with adding the height code. Any ideas?
I'm not seeing cut off faces. Could it be that you had to clear your cache?
That must have been it. It took a while, but the faces look good now
Thanks so much for your help!
Thanks, I always wanted to know how to do this!
Hi Amy,
I was just pointed to your website and am sooo pleased to have found it! I am trying to set up a site and am such a newbie that I need step-by-step instructions, so thank-you!
One problem with setting up a Facebook Like Box though. I have tried repeatedly to put in my URL for Facebook into the space it said to do so, and I keep getting a pink box popping up saying it is not recognized. This doesn't make sense, as I can find my page using it quite easily, AND my FB link buttons on my site work using it. I thought Facebook might have help somewhere, but I can't find that either. Any ideas? It seems that one place is not recognizing it and I'm not sure how to get around that.
Thanks a bunch,
Jenn
My initial thought is that maybe you're using https instead of http in your link? I would try that first to see if it works.
I had the same problem – but I got it to work and recognize my url by entering the url I wanted THEN I clicked on the blue question mark next to the URL box and it got it! Hope that helps!
Well I've tried both and the error keeps popping up saying:
Could not retrieve id for the specified page. Please verify correct href was passed in.
Not entirely sure what that means, and I can't seem to see anywhere to contact FB and ask them. As I said before, the link works from everywhere else.
Thanks for the suggestion though.
Jenn
Did you google that error? This is what I do.
Yes. It seems that there are a few errors but the solutions are not easy to follow. Something about adding a like box "the old way", which involves doing something with code. I think I'll do what you suggest and step away from the computer on this one for a few days, then try again.
thank-you!
Jenn
Somehow it's not working for me. I set up a 'page' from my Facebook for my blog and I have never been able since then to put a 'like' box on my blog. Can't figure out what I've done.
Oh well. Your tutorial is easy to follow though.
Really? I just pasted your FB page URL in the Like Box code generator and it worked just fine. But before you try again, I see you have over 25 fans which means you are eligible for a vanity URL.
Well, you're right…and brilliant.
(I have no idea what I was doing that wasn't right.) So I did what you said and now have a cute lil' like box. *happy dance*. …Thank you for your help!
Glad it worked!
Thanks so much! Looks great on the site! http://www.effectivecouponing.com
Hi Amy, this article is awesome, however I have a question about adding a Blogfrog widget to my WordPress.com blog, I did everything you listed here but my button does not show up once I paste the code into my text widget, in fact once i click on save the code changes by itself.
can you help me please thanks
When you say your button doesn't show up, are you referring to the BlogFrog widget? I'm not sure if BlogFrog is something allowed on WordPress.com?? Not sure about that, but that might be the case. You might check the help section of BlogFrog to see if you can find anyone information about pasting the widget in a WordPress.com blog.
Amy, when I click 'get code' it doesn't look like yours in the video. It's HMTL5, but there are 2 boxes of code: one that I have to put after the opening and one to put in the widget. I would do that, but I'm not sure how to in php. Any thoughts?
I should add, I'm using Genesis Prose theme.
OK, I see what you mean. Alright, here's how to do it:
You have to paste that first snippet right after your tag. This is located near the top of your page in the code. Genesis makes it easy to paste it. Simply go to Genesis –> Theme Settings and scroll down to the bottom of that page. You'll see a box where you can paste code for Header/Footer scripts. Paste it in there. Then, paste the second bit in a widget.
(For those of you not using Genesis, you should be able to find your
tag in your header file. Appearance –> Editor.)You are lovely! I was wondering if it had to do with the header/footer box. Thanks for the help and all the wonderful WP posts. They're coming in useful as I'm setting up my first WP blog.
Okay, I put the first code in my Genesis > Theme Settings Header script section. I put the second snippet in a text widget in my sidebar. And it's not showing up. I can't figure out what I'm doing wrong. 8}
Strange, I started doing something else, and it showed up. Here's to hoping it stays lol. Thanks for the post.
I am trying to do this on my site (I'm using twenty ten) but I don't know where to put the first code. Can you help me find it?
Having similar issues to Michelle, and I'm on blogspot, not WordPress.. Facebook is giving me 2 boxes of code. I looked through the html of my page, and never did seem to find where to put that first box full of code. Tried doing just the bottom box as text and also as html. Apparently without the top stuff, she won't go. I'm on blogspot, not wordpress.
OK Ann, on Blogger you'll have to Edit your Design by clicking on Design –> Edit HTML. At this point I would backup your HTML just in case.
OK, find the tag in all that code. Paste that first snippet BELOW the tag (note that you are looking for the not just the word "body"–you need the whole thing). Then paste the second snippet of code in a gadget wherever you want it on your page (like your sidebar).
What is the tag? I do not know what I am looking for! I have the snippet copied but what exactly am I looking for in my html?
I really need help with this! I need you to hold my hand…in which place EXACTLY do I paste that first snippet of code for my like box. I have everythingready but can't tell where to put it – please help me!
https://www.facebook.com/notes/nithya-swaminathan/adding-the-facebook-like-button-to-a-blogger-blog/384177412674
I found out how to do this, here.
Hi Amy, I'm using your site for all my questions as I have a new blog that i'm trying to put together. Your last reply to Ann is exactly where i'm stuck, i'm on blogspot as well I just need to know exactly what line i'm looking for to place the the first box full of code, you mentioned the word "body" can you give me the exact wording so I can find it the HTML. Once I find exactly where to place the first snippet then I think I know what i'm doing after that.
Thanks
Michelle
Does the FB account have to be a page?
In order to have a FB page, you have to have a personal profile first, then you can set up your page. This tutorial is a box for your page.
This seems super easy but it's still not working for me. I'm using Website Tonight on Go Daddy, and it's DREADFUL. Like some of the other commenters, I have two boxes of code. I think I'm definitely missing something, and it's making me crazy!
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Hey Amy,
Great info. Not sure what's going on with mine. I am able to get it on WordPress, but if you look, you see that the whole right side is cut off. I can make it narrower, but it keeps smushing the posts I'm trying to put in there. Any ideas?
Hi Amy!
I'm wondering if you know how to code the Facebook Like box so that it links back to a specific article, rather than the main page without having to generate the code each time. If you click over to my blog you'll see what I mean. On the left-hand side of each blog post, I have the like button, tweet, and pin-it. For the tweet button it gave me the option to "use page url" for the share url, and "use the title of the page" for the tweet text (see here: https://twitter.com/about/resources/buttons#tweet), but for the facebook and pinterest buttons I could only figure out how to link to the main url of my website, rather than have a code that adjusts to whichever page my reader has clicked on, so whenever somebody wants to share the blog post, it will share my website instead. I hope that makes sense. Let me know if you have any suggestions.
Thanks so much!
hmmmmm….I just tried this, and it won't work. I use blogger. Any advice?
Hi Amy…ugh, I have worked several hours trying to get the like box and mind also says "error fetching the like box for this specific page" I literally worked on it all night at work for 7hrs. but my fb share links to my page from my blog. I tried a couple othr plug ins but they are not as simple as how you explained. I have about 50 fans and have an vanity url…it just will not work…it is http://www.facebook.com/fitandbeyond40 does it look problematic????
This looks like your Personal Profile (and not a Page)? The Like Box only works for Pages. I think that might be your problem.
Hi Amy…I feel like saying it is me again?? I want to soon feature a give away on my blog, but I am unable to get my like box or feeds to go to my FB…would it make any sense to do this without having those features, or would it not make a difference. I feel that I am missing something. I truly want to grow my blog audience but do not have BIG bucks to get it professionally done…www.fitandbeyond40.com
Hi Marge! I think promoting on your blog and Facebook (and cross-promoting) is ideal. Curious why you couldn't get your Like Box to work?
Hi Amy: I've been trying to figure out how to add a "follow me on facebook" button to each of my posts in WordPress.com. I already have the FB like box in my sidebar and have a small icon at the bottom of each post but those buttons are super small in wordpress.com and I can't control the size. So, wondering if you know where to get the code?
Hi Martha, try here.
Thanks for all your great tutorials!
Do we not have to do step 1. Include the JavaScript SDK on your page once, ideally right after the opening tag?
I'm not looking at it at the moment, but choose the option for HTML.
Thanks because i tired many code to get like button on my blog but your blog so much help me.
You're welcome, Jaimin.