We have been getting a lot of requests to write a blog post tutorial on how to properly make a Facebook Like Box. Well here it is!

You can generate the code for the widget at developers.facebook.com/plugins along with Like Buttons, Send Buttons, Comments, Activity Feeds, Recommendations, Registration, Facepile & Live Stream widgets which we will get into later.

So If you click on Like Box it will take you here.

Here you will see something similar to what is shown below.

So it’s pretty straight forward from here but here are some helpful tips.

Facebook Page URL

If you are not sure how to find yours click here.

Width

Now you can set the width to whatever you like or your website will allow (widget side bar, footer etc.) But too skinny and things will start to get out of whack. Wider the better. We actually designed our WordPress theme around the size and spacing of the fans thumbnails at the bottom because we are neat freaks! To get a row of 4 fans at the bottom to be centered down to the pixel of your like box set the width at 237. Feel free to experiment.

Height

Same goes for height depending on what options you wish to include like faces and stream which we will cover next. Our like box has both. We wanted 2 rows of fans thumbnails and names so to have even spacing below the bottom row of names you can leave it blank and the widget will conform to that typically. If it does not, go back and set the width to where you want it.

Color Scheme

This is a newer option. It can either be light (like we have) or dark (looks good with darker sites).

Show Faces

This controls the fans faces at the bottom. If you want them, check it. If not, un-check.

Border Color

By default the border is a mild grey blueish color. You can change it to most colors. If does not accept color codes (though that would be useful) but you can say white, black, blue, navy, pink etc and it will change the border color.

Show Stream

The stream is your news feed. We have it so no matter what page of the website you are on you can jump to recent articles. You can disable it and just show faces or also disable faces and just show your thumbnail, link to your fan page and like box.

Show Header

Checking this will add a box at the top that says “Find us on Facebook”. We unchecked it and added a custom animated gif above ours.

Now you can GET CODE!

You can choose HTML5, XFBML or IFRAME. We use IFRAME. Choose whatever you are more comfortable with.

Once you get the code you can also see your choices marked true or false as you selected and the width and height set by by numbers so if you like you can play with the code as you like from here.

That’s it!