A Facebook like box is meant to be placed on web apps, blogs and websites to increase likes on a Faceboook page. The like box lets your site visitors to like your Facebook page instantly without leaving your website.

You may have seen the Facebook like box on other websites. If you have a website or blog, then you should also add it to get more Facebook fans.

The typical like box we’ve seen till date is deprecated now and will stop working on June 23, 2015. But you need not to worry, as we now have the new Graph API v2.3 powered Facebook Page plugin that allows you to display the fan box in more trendy ways.

You may grab the code for the new Facebook like box at the official page plugin site, but here are the ways to install it on different platforms along with the optimized code.

Facebook Like box for different platforms

The code for the like box is same for all platforms. It is ready for use after modifying the URL attribute only, but there are more areas (highlighted in the code below) that you may want to change:

<div class="fb-page" data-href="https://www.facebook.com/techably" data-width="500" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>

  1. data-href: The URL of your Facebook page, eg. http://www.facebook.com/techably
  2. data-width: An integer value as the width of the fan box (minimum: 280, maximum: 500)
  3. data-hide-cover: false by default, you may change it to true if you want to hide the cover image
  4. data-show-facepile: Set to false to hide the faces of the fans.
  5. data-show-posts: The default value is false, modify it to true if you wish to show the page feed.

Assuming you’ve made the changes to the above code accordingly, see below how you can add it to your website or blog.

Static Website

Edit you website’s HTML template, and add it to a suitable place. If you are not able to figure out where to add the code, you may post your query in the comments section.

WordPress

  1. Navigate to Appearance » Widgets in your WordPress dashboard
  2. Add a new text widget to the sidebar
  3. Finally add the code and Save the changes

Now visit your WordPress blog to see the new like box in action.

Blogger

  1. Go to the Layout section of your blog in the Blogger dashboard
  2. Click “Add a Gadget” link where you want to display the like box
  3. Select “HTML/JavaScript” gadget from the gadget list
  4. Finally paste the code and Save.

    5. You’ve successfully added the new fan box to your blog!

    Weebly

    1. Go to the “Build” section of your blog or site in your Weebly account
    2. Drag an “Embed Code” widget to the place where you want your fan box to appear
    3. Click the widget to set custom HTML
    4. Finally paste in the code for your fan box, the changes will be saved automatically

    Take a look at your Weebly site/blog to see the like box live.

    And that wraps it up. If you found this post helpful, you may join our Facebook page for more stuff like this. If you got stuck somewhere while following the article, feel free to ask a question in the comments below.