Get More Likes – How to Add a Facebook Like Box to your Website

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.

Facebook Like Box URL

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.

Elements of a Facebook Like Box

For the version I have on my site, I only deselected Show Stream.

Deselect 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.

Facebook Like Box 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.

For a complete, step-by-step walkthrough on how to create and optimize your Facebook page, download the eBook Stand Out on Facebook.

Stand Out on FacebookIn this eBook, you’ll learn how to:
  • Create a beautiful Fan Page that looks sleek and professional
  • Get more likes with a like-gated content offer strategy
  • Develop and maintain a Facebook fan engagement strategy
  • Build a content schedule to keep fans coming back for more

Comments

  1. says

    Hi this is just what i wanted but it does not seem to work i get the header and then a huge blank nothing? I am with Blogger to scared to move to wp for now really want to but so not tech savvy even after 4 years gee! still learning html here…
    Dannie

  2. Marike Smit says

    Hi there, I have followed the steps and when I test my website the area where the likebox would be is blank and it says file or directory could not be found. Any ideas what I am doing wrong?
    Thanks

Trackbacks

Leave a Reply