How do I add a Facebook "like" box to my blog?

I've been inspired by your Facebook fan page, Dave, and have one of my own. Now that I have it, though, I'd like to be able to inclue a "like" box on my blog so that people not only see a link to the fan page, but see a few members, etc. I have seen it done on other blogs but can't figure out what they did. Is it a Wordpress plugin?

Dave's Answer:

This is something I've been thinking about adding to my site too, so your timing is good: it spurred me into exploring and figuring out the solution. Turns out that the capability to add a little mini-Facebook area to your blog (or any other page you manage, of course) is built-in to Facebook, but it's a bit tricky to find and, more likely than not, it'll move by the time you change it as the UI is ever-evolving. No Wordpress plug-in required!

What I'm assuming is that you aren't interested in just a "Like" button, but in something that's more sophisticated and useful to your potential fans, something where they'll see it, read through what's there, and click on "join" or "like" and join your Facebook family too. Hope I'm right! :-)

To start, go to Facebook and log in to your account. Now, on the left side, click on:

Once you click on "Ads and Pages" you'll see a list of the pages you're administering. Mine looks like this:

As you can see in the highlight, you want to click on "Edit Page" here. Now, scroll down and look on the right side for the following:

That's what we want. Click on it and if you're like me, you'll see a very slick ad box for someone else's fan page. Not sure what's up with that, but we'll fix it to reference my fan page in a second. For now, here's what you'll see:

Unless you have lots of screen space to devote to this widget, I suggest that the first thing you disable is the news stream from the group. Do that by unchecking the box adjacent to "Show stream".

Now it's a bit more manageable:

Let's fix things so that it's highlighting my Facebook fan page. To do that you will probably need to open up a new tab onto Facebook, then go to "Edit Page" again. Notice the URL address bar in the browser. It'll look like this:

The numeric sequence at the end -- in this case 207652508738 -- is what we need in the "Facebook Page ID" box. Select it in the address bar, copy it, then paste it into the box. Suddenly you're looking at your own fan page:

Notice here that I've limited it to show five fans, but the box hasn't shrunk down and now has some empty space. Not so good. One last tweak I'll make is to have it be a more standard 250 pixels wide by changing that field:

Looks good, so click on "Get Code" and the scary HTML pops up:

Simply copy and paste the code in the first box, an iframe, into the HTML source of your page or blog template, and you should be good to go!

Here's the end result:

Neat, eh?

Categorized: Blogs and RSS Feeds , Facebook Help (Article 9430, Written by Dave Taylor)
Tagged: blog widgets, facebook fan pages, facebook groups, fan pages, wordpress
Previous: How do I delete or cancel my Facebook account?
Next: How do I sign up / create a Facebook account?

Subscribe!

Never miss another Q&A article! Click to subscribe:

Comments

Thank you for providing the missing piece of the puzzle, which for me was the numbers at the end of the URL and how to find them. Bravo!

Posted by: Frank Branderson at May 20, 2010 5:53 PM

what do I do if my ID number doesn't work ..

Posted by: Robert Kennedy at May 26, 2010 10:59 PM

Hi. Dave I have been struggling with this Facebook social plugin for about 2-3 hours now. I did everything exactly as you said. I copied my ID and it shows up as my page, but when I get the HTML and then put it into the site, it comes up as the sample page. Or lactose free milk? Any reasons why this may be happening? Thanks,
Troy Ballard

Posted by: Troy at June 11, 2010 4:04 PM

Never mind Dave. Apparently I needed to make an actual facebook profile before it would let me create the like box.
Thanks anyway.
Great site by the way.

Posted by: Troy at June 12, 2010 12:46 PM

Finally got round to setting up a Facebook page for my site and this looks a great way to integrate it tighter into my main page. Thanks

Posted by: Steve at June 14, 2010 4:00 PM

Do you know if there is a way to change the language of the box? I'd like to have it in French as all of my visitors are from France.

Thanks

Posted by: Josephine at August 4, 2010 12:00 PM

Question - when I installed this it showed up as "You like this. Unlike" as it does in your examples until the last image. The only way I could figure out to make it show as "Like this" was to Unlike my own page. That doesn't strike me as the correct solution. What am I doing wrong?

Thanks!!

Liz

Posted by: Elizabeth Bolton at August 6, 2010 3:15 PM

I can't get my code to "stick". I get it in there and press save, it looks like it's saving for a second and then just blink out....Am I doing something wrong???
While I'm at it, do you have a site to show me how to put my posts on my facebook site automatically?
THANKS..your directions are so good for a semi illiterate computer operator.
~~Lynette

Posted by: Lynette at August 8, 2010 7:03 AM

I've been messing around with this for a while now trying to generate a Like Box for a Fan Page for my business. Only catch is when I enter the numeric value, it comes up as a stream from my personal Facebook Page and not my Fan Page (www.facebook.com/todayfm) - any suggestions?

Posted by: Aodhan at August 8, 2010 7:30 AM

Hey, can you please explain what the below sentence means? I don't have a clue where and how to find the HTML source of the page..can you pls put screen shots?
"Simply copy and paste the code in the first box, an iframe, into the HTML source of your page or blog template, and you should be good to go!"

Posted by: Hemraj at August 14, 2010 3:05 PM

Do you know if there is a way to change the language of the box? I'd like to have it in French as all of my visitors are from France.

Thanks

Posted by: sansoft at August 26, 2010 5:15 AM

Dave,

These are terrific instructions for something I have spent hours trying to do. I now finally have the code that I want to paste. Almost there. But where and how do I paste it? (See, I know nothing.)

Thanks very much. I don't like to put my credit card on the Internet but would be happy to buy you a cup of coffee if you give my your address so I can send a check.

Posted by: Nancy Petro at September 2, 2010 9:24 AM

Hi Dave wonderful steps and instructions on how to get the like-box working however I have been having a problem in getting the like-box to display if I'm not signed into facebook. Is it possible to get the like box to display without being signed into facebook?

Posted by: Bill at September 15, 2010 9:55 AM

Dave,

It appears that Facebook switched up its widget and instead of asking for the Facebook Page ID, it asks for the Facebook Page URL. So when I enter the URL, everything in the preview looks great but when i paste the iframe code into my blog, an error message occurred. I'm confused. Can you please advise? Thanks.

Posted by: Skip at September 21, 2010 11:06 AM

dude you r A++++

Posted by: Sam at November 27, 2010 12:58 AM

Dave, you have missed something about changing iframe code to desired code form.

Posted by: Sona at December 17, 2010 2:21 AM

nice tutorial, i just follow the steps and implement it for my site

http://comicphotos.blogspot.com/

no words to say thank u

Posted by: monisha at February 12, 2011 10:40 AM

I followed all these steps, but when I save this is all that shows up in the widget:

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FProduct-Junky%2F200439579968253&width=250&colorscheme=light&show_faces=true&stream=false&header=false&height=62

I copied the iframe code into a widget on wordpress (which says you can use html)

what am I doing wrong?

Posted by: Brii at February 17, 2011 11:52 PM

I wanted to speak with you regarding a partnership to promote kikin to your audience. Our innovative browser companion is perfect for your audience and has great potential to generate new revenue opportunities for you but also increase traffic and awareness among our 1.5MM users and growing. Give kikin a try at www.kikin.com and I look forward to hearing from you. Best.

Posted by: Larry at February 19, 2011 12:37 PM

Nice post.I am also using this facebook plugin. Thanks! :)

Posted by: Gayward Mendoza at April 5, 2011 8:08 PM

I got the code from facebook but i can not find where i should paste it to.. what do u mean: paste it into the HTML source of your page or blog template, and you should be good to go!

Please help!!!

Posted by: Cisem at April 12, 2011 7:54 AM

I try to add this to my site also, but I have a strange problem... I see the logo of facebook there but nothing else... I can not see the photos of people like the page...

I have try to use it for 2 hours know and still nothing...

The site is in wordpress...

I even try to add the same code in another site of mine (in joomla) but the problem stays the same...

Posted by: danny jenkowski at April 30, 2011 8:34 AM

I got to the last step but don't know where to put the pkuggin, I copy and paste but am confused where to paste it???

Posted by: judy denu at August 10, 2011 4:47 PM

I have something to say, now that you mention it, but ...

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you for all your efforts on this Web site by buying you a cup of coffee!

I do have a comment, now that you mention it!