Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add the Facebook Like Box / Fan Box in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Add the Facebook Like Box / Fan Box in WordPress

Facebook like box also known as Facebook fan box has become a must have element for many website. It allows website owners to provide their users with an easy way to join their facebook community and get updates right in their Facebook news feed. Recently one of our users brought it to our attention that we have not covered the topic of how to add the facebook like box in WordPress. Although we have covered how to add the facebook like button, facebook send button, and facebook comments. In this article, we will show you how to add the facebook fan box in WordPress.

Adding Like Box using Official Facebook Plugin for WordPress

Perhaps the simplest way to add a facebook like box to your WordPress site is by using the official Facebook plugin for WordPress. First thing you need to do is install and activate the Facebook plugin. After activating the plugin, go to Appearance » Widgets. Simply drag and drop the Facebook like box widget to your sidebar. You will need to provide the URL of your facebook fan page in the widget configurations.

Facebook like box / fan box widget settings

The widget has the same options as Facebook social plugins for websites. You can choose to show a stream, show faces, remove header, change border color. There are currently only two themes available light and dark.

Adding like Box Manually Without using any Plugin

It is possible to add Facebook like box manually without using any plugin. Go to Facebook Social Plugin’s Like Box page. Provide the URL of your Facebook page and configure the looks of the like box.

Getting the code to manually add Facebook like box in WordPress

Press the Get Code button to get Like box code.

Facebook provides you multiple ways to add the like box code on your website. You can choose from HTML5, XFBML, and iframe. We will show you how to add each of them but you need to choose one. In our opinion HTML5 is a reasonably good option for most WordPress powered websites. XFBML is good for people using other Facebook plugins that use XFBML to display Facebook buttons. Use iframe if the first two options don’t work for you.

Facebook like box is available in multiple code formats

Adding HTML5 Facebook Like Box Code in WordPress

Click on the HTML5 tab from the code window and copy the first part of the code. They recommend that you paste it right after <body> tag which is usually found in your header.php file. However, it will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. The first part of the code would look like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This javascript connects your website to the Facebook’s javascript library. Now copy the second part of the code, which would look something like this:

<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

This part of the code tells the javascript that you loaded earlier to display the like box at this location and with these parameters. For the sake of this example, we will paste this code in the sidebar widgets. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and paste the code inside it. Save your widget and check your website.

This will work in any other area of your site as well. If you are savvy with code, then you can paste this in your footer, after post, etc.

Don’t forget to change the facebook fan page URL to your own page URL.

Adding XFBML Facebook Like Box Code in WordPress

Click on XFBML tab to get the code for XFBML Facebook like box. To add an XFBML Facebook Like Box you need to add three tiny pieces of code in WordPress.

Copy the first piece of code and paste it in your theme’s header.php file right after <body> tag. Similar to the last one, this code will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. This code would like something like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

This tiny javascript function connects your website to the Facebook’s javascript library.

The second line of code is an XML namespace declaration, and you need to add it in the <html>tag of your site. The easiest way would be to open your theme’s functions.php file, paste the following code:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

Lastly, copy the third line of code which would look something this:

<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

This code tells the javascript that you have loaded in the first step, to display the like box at this location and with these parameters. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and inside that text widget paste the third line of code. Save your changes and preview your website.

Adding Facebook Likebox iframe in WordPress

Click on the IFRAME tab to copy the iframe code. Go to Appearance » Widgets and drag and drop a Text widget to your sidebar. Paste the iframe code inside the text widget and save changes. Open your site to preview the facebook fan box.

We hope this article helped you add Facebook Like box / Fan box on your WordPress site. For questions and feedback please leave a comment. You can also follow us on Facebook.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • http://www.wpbeginner.com/ WPBeginner Staff

    You are probably using WordPress.com see our guide on the difference between WordPress.com and WordPress.org.

  • Sohail

    WELL DONE nice job Thats the real way to explain some thing. Thanks again for making such good tuts

  • Chrys

    Hi,

    I’ve tried everything to add it manually but the like box won’t appear! I really cannot figure out why..I put the codes in the right places though…

    Any idea?

    Kind regards

  • Chrissy

    Simple. Real and to the point. Thank you guys as usual very helpful!

  • Jeanette O’Hagan

    Great post, thanks. Just what I needed.

  • rajeshwar sharma

    great work …keep the good work going…

  • giacomo

    Hello! thanks for the tips…everything works like a charm ;)

  • Pummy

    Hi Sayyed.

    Your header and footer plugin is awesome. I think this is a must have plugin for wp beginners,
    You publish great posts with great detail.
    Thanks.

  • Ankit

    Great piece of information.

  • Ajay

    I use Jetpack’s widgets to add the Facebook box. I’ve found it easy to use with decent number of options

    • Bob Downs

      I’m with Ajay – the Jetpack Facebook Like Box widget is simple and easy to use without adding any other plugins than the Jetpack one.

    • http://www.wpbeginner.com Editorial Staff

      Agreed that’s why we have it mentioned at the top because most folks find it easier.

  • Scott

    iframe seems like the easiest way, not having to deal with the javascript. Are there any major disadvantages to using iframe?

    • http://www.wpbeginner.com Editorial Staff

      The only major disadvantage is that you can’t see Facebook Insights data.