Facebook Like Box – A step-by-step guide

Check out the step-by-step guide to get the Like Box in your WordPress sidebar – and make it look good.
[tweetmeme]

By: Martin Ove

[Update 22.10.2010: Facebook has changed the code a bit. Read more below the screenshot tour.]

If you want to connect your Facebook Page with your site, the Like Box is a great way to do it.

It allows you to show off your wall activity, pictures of your fans, number of fans, give you a good looking link and finally gives your user an opportunity to “Like” your Facebook Page directly from your site. Check out an example at Ledig – hvordan er det?

This is only one of the many ways to connect your Facebook Page with your site. It looks good though and it doesn’t take forever to set up.

Before you get going on the screenshot tour, you should have your Facebook Page set up and good to go.

Click on the picture below to start the step-by-step screenshot tour. Navigate through the screenshots with the arrow keys.

Question and comments are more than welcome, I hope the guide comes in handy.

Go to your page and click "edit page". It will take you to this screen, where you can click "Promote with a Like Box" as indicated here by the red rectangle.

Go to your page and click "edit page". It will take you to this screen, where you can click "Promote with a Like Box" as indicated here by the red rectangle.

That should take you here, where you can customize the Like Box.

That should take you here, where you can customize the Like Box.

Here’s the box without the stream. I recommend keeping the stream on though, it shows, that your Facebook Page has some activity.

Here’s the box without the stream. I recommend keeping the stream on though, it shows, that your Facebook Page has some activity.

Here it is without the header. It’s up to you to decide whether or not it goes with your theme.

Here it is without the header. It’s up to you to decide whether or not it goes with your theme.

Without the header or stream, the Like Box is just a box showing your fans, a link to your Facebook Page and a Like button.

Without the header or stream, the Like Box is just a box showing your fans, a link to your Facebook Page and a Like button.

You can customize the width, by typing a value in pixels. This is extra useful, if you already know the exact width, your gonna need. If this is your first time using the Like Box, you will probably have to alter it at a later stage. I’ll get to that.

You can customize the width, by typing a value in pixels. This is extra useful, if you already know the exact width, your gonna need. If this is your first time using the Like Box, you will probably have to alter it at a later stage. I’ll get to that.

You can also set the number of connections, which is the fans of your Facebook Page.

You can also set the number of connections, which is the fans of your Facebook Page.

I’m using Suffusion theme with WordPress, and I know, that I need a width of 238 pixels to make it fit perfectly. I click the header and stream on and set the connections to 10.

I’m using Suffusion theme with WordPress, and I know, that I need a width of 238 pixels to make it fit perfectly. I click the header and stream on and set the connections to 10.

This is what I get, when I press "get code". For my purpose, I need to copy-paste the code in the iframe window.

This is what I get, when I press "get code". For my purpose, I need to copy-paste the code in the iframe window.

Back in WordPress, I go to the widgets page. I choose the widget called "Text" and drag it to the sidebar area.

Back in WordPress, I go to the widgets page. I choose the widget called "Text" and drag it to the sidebar area.

I then paste the code from the iframe window in Facebook into the widget after I’ve clicked the little arrow to the right. In this piece of code, I can make all the adjustments, that I could also make in Facebook.

I then paste the code from the iframe window in Facebook into the widget after I’ve clicked the little arrow to the right. In this piece of code, I can make all the adjustments, that I could also make in Facebook.

I click save, and load up my site. Now, the widget looks good, but it isn’t my Facebook page it’s showing.

I click save, and load up my site. Now, the widget looks good, but it isn’t my Facebook page it’s showing.

I go to my Facebook Page and copy the id number that I’ve highlighted in the url bar.

I go to my Facebook Page and copy the id number that I’ve highlighted in the url bar.

Back on the widgets page, I replace the example id number with the id number of my own Facebook Page. I then click save and load my site again.

Back on the widgets page, I replace the example id number with the id number of my own Facebook Page. I then click save and load my site again.

That’s better. Now it’s my page, that the widget is showing. As you can see though, the widget cuts of the bottom part of my fan-area. The names are not fully visible. I need to add a few pixels of height to the widget.

That’s better. Now it’s my page, that the widget is showing. As you can see though, the widget cuts of the bottom part of my fan-area. The names are not fully visible. I need to add a few pixels of height to the widget.

There a two places in the code, that specify the height of the widget. They were 587 pixel before, I change them to 595, click save and see how that looks after reloading my site.

There a two places in the code, that specify the height of the widget. They were 587 pixel before, I change them to 595, click save and see how that looks after reloading my site.

Now that’s better, the names are fully visible now. Read on, and I’ll show you have to add a third row.

Now that’s better, the names are fully visible now. Read on, and I’ll show you have to add a third row.

I change the height to 670 pixels in both places, change the number of connections to 12 and then reload my site.

I change the height to 670 pixels in both places, change the number of connections to 12 and then reload my site.

It comes out like this. You can change the height as you see fit of course. If you need to change the width, it’s the same procedure. The width also needs to be changed two places, after which you can reload your site to check if it needs more or less width. That’s it. Thanks for reading.

It comes out like this. You can change the height as you see fit of course. If you need to change the width, it’s the same procedure. The width also needs to be changed two places, after which you can reload your site to check if it needs more or less width. That’s it. Thanks for reading.

Update 22.10.2010:

Facebook has changed the piece of code that tells the Like Box where to look for content since I wrote this post. Thanks AnnaD!

Instead of “finding” your Facebook Page with an id-number, the Like Box now uses the url of your page – you know, the address. The id-number should still work though. Thanks again, AnnaD.

Anyways, it used to look like this: “id=185550966885”, now it looks like this:

“href=http%3A%2F%2Fwww.facebook.com%2Fplatform”

The latter looks more confusing, but don’t be alarmed. First of all, you can copy-paste the url of your page into the field, when you get your Like Box in the first place. If you want to alter it afterwards, you can still do that.

What’s with the %3A%2F ?!?

I’m not the right guy to tell you why the / and : needs to be replaced by %3A and %2F, but it does, apparently.

Remember this: %3A = : and %2F = /

Take a look at it again, and you will see that href=http%3A%2F%2Fwww.facebook.com%2Fplatform translates into href=http://www.facebook.com/platform

So if you want to insert your own Facebook Page url, do this:

• Go to your Facebook Page and copy the whole url.(the address in the address bar of your browser)
• Go to your widget in WordPress(or whereever you use the code) and paste it into the code where the sample url is. Or where the id-number is, if you use the older code.
• Replace the : sign with %3A and the / with %2F. That should be it.
• Always remember to take care, that you insert the code-piece at the exact location and don’t accidentally remove any quotemarks or semi-colons and stuff like that.

All in all, you should end up with at piece of code, that looks something like this example from a previous Facebook Page of mine:

iframe src=”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F%23%21%2Fpages%2FLedig-hvordan-er-det%2F111128215599285&width=292&amp… and so on.