Get More Likes – How to Add a Facebook Like Box to Your Site

How to Add a Facebook Like Box To Your WebsiteUpdated August 30, 2014 with the latest instructions!

If you have a Facebook 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 news feeds. 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.

Step 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):

Step 2: Enter Your Page URL

First, enter the URL of your Facebook page in the Facebook Page URL field.

Facebook Like Box Creator

Before you click Get Code, 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. Customize 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 Posts (a.k.a. Stream) – this will display a stream of your most recent Facebook page posts.
  • Show Border – this will display a 1px wide border around your like box.

Facebook Like Box Settings

For the version I have on my site, I only have Show Friends’ Faces and Show Border selected.

Facebook Like Box Features

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 step-by-step walkthrough on how to create a Facebook page that makes money, download the ebook 20 Day Facebook Fix.

20 Day Facebook Fix

In this ebook, you’ll learn how to:

  • Optimize your page to get more likes QUICKLY.
  • Beat Facebook's algorithm so more fans see your posts.
  • Drive organic growth without spending tons of cash.
  • Create a giveaway to turn fans into email subscribers.

Add to Cart   Read More



  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…

    • says

      Dear Dannie, Go to blogger layout, click on add a gadget, Then Chose Basic Gadgets,
      and then find HTML/JavaScript Gadget there, Click on it and then paste the Facebook page IFRAME Code here,,,I think You will SucCeed Insha ALLAH…

  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?

  3. Rizwan says

    Hi Diana i have follow all of steps but its not working nothing to display and The file or directory could not be found. Kindly help

  4. Elias Hazari says

    please help me anybody……. I dont get this ifream code………please anybody give me ifream code….

  5. Tom Cannavaro says

    You wasted 14 pages can’t you simplify things. face Book is more a pain then informative. Tom C

Leave a Reply