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?
25 thoughts on “How do I add a Facebook “like” box to my blog?”
My problem is, that I can not create like box. I have tried many things, few hours – it doesn’t appears. Yes-doesn’t appears.
With other URL going well. Only my URL doesn’t work. Help, please!
Facebook Page; https://www.facebook.com/decochrome.co.uk
Thanks!
i added facebook like box to my blog but when vistors clickinh like button its asking confirm and again when they are ckicking confirm button its showing page does not exist……can you tell why its happening….plz help me as soon as possible… i am waitng for your reply……thank you..!!!
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???
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…
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!!!
Nice post.I am also using this facebook plugin. Thanks! 🙂
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 http://www.kikin.com and I look forward to hearing from you. Best.
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?
nice tutorial, i just follow the steps and implement it for my site
http://comicphotos.blogspot.com/
no words to say thank u
Dave, you have missed something about changing iframe code to desired code form.
dude you r A++++
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.
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?
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.
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
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!”
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?
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
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
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
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
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.
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
what do I do if my ID number doesn’t work ..
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!