Facebook Surprise

Facebook used to call it a Facebook Fan Page and people would “fan” the page. Now it's a Facebook Page and people “like” it. Ok, so you know this. But what about that Facebook Fan Box that's currently in a text widget in your sidebar?

Have you noticed that it doesn't load most of the time anymore? Facebook is (not-so) secretly telling you it's time to switch to a Facebook Like Box.

Here's how to create a Facebook Like Box (comes in two forms — iframe and XFBML):

1. For both forms: Log into Facebook, go to the Facebook Page you want to create a box for. Click “Edit Page” (only available if you're an admin) and then look at the URL of the edit page.

At the end of the URL it will say: id=somenumber — copy that somenumber — that's the Facebook Page ID.

2. Go to http://developers.facebook.com/docs/reference/plugins/like-box and put your Facebook Page ID into the Facebook Page ID field.

IMPORTANT: When you load the above URL, a sample Facebook Page ID will be in the Facebook Page ID field. This is NOT your Facebook Page. Delete that ID number and replace it with your own.

Customize the Facebook Like Box and click “Get Code.”

3. A box will appear with the code for you to copy.

4. If you want the Facebook Like Box in iframe format, just copy the code and paste it into a text widget. That's it — all done.

5. If you want the Facebook Like Box in XFBML format, copy the code and paste it into a text widget. WAIT, you're not done yet.

6. You need some javascript from Facebook. It's found athttp://developers.facebook.com/docs/reference/javascript

I advise that you don't put the javascript in the header but rather the footer so your page loads first and then the Facebook Like Box loads.

Some themes have convenient boxes where you can drop the javascript into.

For Thesis 1.7, put it in Thesis-Site Options-Stats Software/Scripts-Stat and Tracking Scripts (these scripts output in the footer).

For Genesis (I haven't tested this out), put it in Genesis-Theme Settings-Header/Footer Scripts-“Enter scripts/code you would like output to wp_footer():”.

7. Now the Facebook Like Box in XFBML format is done.

Personally, I prefer XFBML to iframe. What about you? And why?