WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Tutorials» How to Add the Facebook Like Box / Fan Box in WordPress

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

Last updated on May 15th, 2013 by Editorial Staff
310 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

310 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

24 Comments

Leave a Reply
  1. dharm says:
    Jul 7, 2017 at 2:23 pm

    i complete all steps but my website show error plz help me i dont understend proprly

    Reply
  2. nareshdetruja says:
    Dec 22, 2016 at 10:57 am

    Aewson information bro nice a article

    Reply
  3. Hector Jayat says:
    Apr 4, 2016 at 12:39 pm

    Amazing Tip, I was able to set this up in only 5 minutes. Thanks

    Reply
  4. Tina Gleisner says:
    Jan 26, 2016 at 2:04 pm

    Thanks for explaining the JavaScript code can go in the footer, and not the header as indicated by Facebook … although I’m only guessing at why this is better & would appreciate knowing the real reason (load time?)

    Reply
  5. Richard says:
    Aug 30, 2015 at 7:26 am

    To update your post, sadly it looks like the official Facebook plugin is now (2015) no longer official.

    It also has not been updated in a year and a half and now has a poor user rating.

    Reply
  6. Kitty says:
    Jul 16, 2015 at 3:15 am

    One question: I use the plugin, but why wordpress tells me that it’s not a valid facebook page url. It’s my own facebook site. How can I get the right url?

    Reply
    • Jurgen says:
      Dec 26, 2015 at 4:34 pm

      I’ve got the same issue … it says not a valid facebook url and it is mine

      Reply
  7. Peter says:
    Jul 4, 2015 at 6:54 pm

    I installed the plugin but I then received a warning the it is not compatible with WordPress seo by Yoast.
    Here is the message below.

    The Facebook plugin(s) might cause issues when used in conjunction with WordPress SEO by Yoast.

    Both WordPress SEO by Yoast and Facebook create OpenGraph output, which might make Facebook, Twitter, LinkedIn and other social networks use the wrong texts and images when your pages are being shared.

    Recommended solution
    We recommend you deactivate Facebook and have another look at your WordPress SEO configuration using the button above.

    I will try to install it manually and see if that works.

    Reply
  8. WPBeginner Staff says:
    Dec 16, 2014 at 7:25 pm

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

    Reply
  9. frank jer says:
    Dec 16, 2014 at 12:02 am

    why i cannot use the wordpress plugins?

    Reply
  10. carol neumann says:
    Sep 21, 2014 at 11:20 am

    Am confused; WordPress plugins do not download into Widgits. Plugins can only be placed before and/or after a post, not in the sidebar.

    Reply
  11. Sohail says:
    Mar 15, 2014 at 10:32 am

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

    Reply
  12. Chrys says:
    Nov 28, 2013 at 6:03 am

    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

    Reply
  13. Chrissy says:
    Oct 31, 2013 at 6:38 pm

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

    Reply
  14. Jeanette O'Hagan says:
    Oct 29, 2013 at 3:02 pm

    Great post, thanks. Just what I needed.

    Reply
  15. rajeshwar sharma says:
    Sep 4, 2013 at 1:11 am

    great work …keep the good work going…

    Reply
  16. giacomo says:
    Aug 17, 2013 at 7:43 am

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

    Reply
  17. Pummy says:
    Jul 5, 2013 at 3:08 am

    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.

    Reply
  18. Ankit says:
    May 21, 2013 at 5:08 am

    Great piece of information.

    Reply
  19. Ajay says:
    May 15, 2013 at 10:31 am

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

    Reply
    • Bob Downs says:
      May 15, 2013 at 11:53 am

      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.

      Reply
    • Editorial Staff says:
      May 16, 2013 at 8:25 am

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

      Reply
  20. Scott says:
    May 15, 2013 at 9:25 am

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

    Reply
    • Editorial Staff says:
      May 22, 2013 at 6:18 am

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

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
All in One SEO
Improve website SEO rankings with AIOSEO plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
DesignEvo
DesignEvo Coupon
Get 25% OFF on DesignEvo premium logo making service.
StartBooking
StartBooking Coupon
Get 20% OFF on StartBooking online scheduling software.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.