How to add or update the Facebook Like Box on Blogger

This is the revised guide replacing my previous posts on 'How to add the Facebook Fan Box on Blogger' and 'How to add the Facebook Like Box on Blogger'.

The code for the Like Box plugin has changed since Facebook switched to the new Timeline layout, so the older posts I mentioned above no longer apply.



The Facebook Like Box has also been updated so that it appears on your blog even while you're logged in as the page admin.  However, the Like Box still won't work while you're in preview mode on Facebook.

Here are the new instructions for adding the Facebook Like Box on Blogger and how you can update the existing Like Box on your blog.

---

Instructions:

1.  Get the code for your Facebook Like Box.

You can do this through the Facebook Social Plugin Page, or from your own Facebook page by going to Admin Panel > Manage > Edit Page > Resources > Use Social Plugins > Like Box. 

See the pics below for more info: 

a) Open Facebook Page Admin Panel

b) From Admin Panel > Click Manage and Edit Page

c) Click Resources > Use Social Plugins

d) Scroll down and click Like Box.

2.  Under Facebook Page URL, delete the URL that's currently in the box and replace it with your Facebook Page's web address.

For example, my Facebook Page's URL is http://www.facebook.com/pages/Maria-Tan/102277350547, so that's what I pasted in the box.

Once you enter the correct URL, your Like Box will appear on the right hand side, instead of the default Facebook Platform Like Box.

3.  Customize any of the other settings, i.e. Width, Height, Color, Faces, Stream, Header and click Get Code.

The settings I used were:
width="200" (The width of your Like Box)
height="558"
Color scheme=Light (White or Black background)
Show faces ticked (Pictures of people who like your page)
Show stream ticked (Info from your wall posts)
Show header unticked (Find us on Facebook bar)

4.  Copy the code under IFRAME.

5.  Sign in to Blogger and click Layout.

6.  Click Add a Gadget.

7.  Choose Basics > HTML/Javascript

8.  Add a Title and paste the code for your Facebook Like Box under Content.

9.  Click Save.

10.  View your blog and edit the HTML/JavaScript box again if necessary.

11.  Don't forget to Save the changes once you are finished :)

---

Updating the Facebook Like Box on Blogger

1.  Follow the previous instructions from Steps 1 to 4.

2.  Log in to your blog.

3. Go to your Like Box and click on the Edit icon (see pic to your left).

4.  Paste the Like Box code under Content.

5.  Click Save.