Updated September 27, 2013 with the latest instructions!
If you have a Facebook fan page for your website or blog, you might want to consider adding a Like Box to your website. The Like Box is a widget that allows fan page admins to embed a widget featuring their fan page and Facebook activity right on their website.
One reason this Like Box is so valuable is because visitors to your website can become a fan of your Facebook page without ever having to leave your site. This will allow you to communicate with these visitors after they leave your site via status updates and posts that will appear in their Facebook newsfeeds. And since most Facebook users check their newsfeed on a daily or hourly basis, this is extremely valuable and FREE advertising. Installing the Like Box on your website will help you get more likes, more quickly.
1. Go directly to the Like Box developer page
Click here to navigate directly to the Like Box developer page (link will open in a new tab): https://developers.facebook.com/docs/reference/plugins/like-box/
2. Customize your Like Box
First, enter the URL of your Facebook page in the Facebook Page URL field.
You can also customized the width, height, and color scheme. Keep in mind that the smallest width your like box can be is 292px. Any smaller than that, and part of your box may be cropped awkwardly. Before installing the like box, my blog sidebar width was 280px, and I simply made the sidebar 12px wider to accommodate the like box.
3. Choose what to include in your like box
Next, you can choose what you want to include in your like box:
- Show Header - this will display a header that says “Find us on Facebook.” If there is no “us,” only a “me,” there is no way to override this copy at this time.
- Show Faces – this will display the faces of existing fans of your page. If someone views this like box on your site and one of their friends has also liked your Facebook page, she will see her friend as one of the faces shown in the box.
- Show Stream – this will display a stream of your most recent Facebook page updates.
- Show Border – this will display a 1px wide border around your like box.
For the version I have on my site, I only deselected Show Stream.
4. Install the Like Box on your site
Once you’re finished making your customizations, click Get Code.
You have a few different types of code snippets to choose from here. I personally think that the iframe version is the easiest — it also lets you modify the width and height right in the code in case you need to make any last-minute customizations, without having the jump back-and-forth to the Facebook like box customizer. But it’s up to you! If you have a WordPress blog, navigate to your widgets panel. Install the “Text” widget (arbitrary text or HTML), and copy in your fan box HTML code.
By default, the background of the like box is transparent. If you’d like to change the background color to white, for example, simply add the code background-color:#ffffff; to the style tag.