Add Facebook Like Box In WordPress – FB Fan Box For WordPress

How To Add Facebook Like Box In WordPress – FB Fan Box For WordPress

We came across many websites, blogs, and forums of various kinds and what we noticed utmost is the Facebook like box. Most of the sites were displaying their Facebook fan page in sidebar and even some as a popup window. It is the social proof and by displaying the like box in your website you are promoting your own fan page. Also it makes your visitors to join your Facebook community and get whatever updates that you make in your Facebook fan page. Here we will see how to add Facebook like box in wordpress.

We once made a post about importance of Facebook likes and yes it’s really worth to maintain a presence in Facebook. It is the right place where you can engage with your loyal fans. Have you ever liked a page for the reason that your friend liked it recently? If it is yes, then it is worth to add Facebook fan box in your website.

There are even bloggers who display all such numbers in sidebar and footer like Alexa rank, Page Rank, Twitter followers, subscribers count etc. All that is to show the popularity of the website and with Facebook like box you can show pretty faces by saying “find us on Facebook”. Whenever a visitor who lands on your site and identifies a face in like box then he/she will like that too. This Facebook like box widget will certainly enhance the publicity to your fan page. We posted about displaying social widgets in Blogger, but not for wordpress. Here we will see on adding Facebook like box in wordpress site manually and by using plugin.

How To Add Facebook Like Box In WordPress?

It’s simple to add Facebook like box in wordpress site manually without using any plugin and so first we will discuss that part. Facebook has a like box plugin with few customizable option and you can add it in following different ways.

Adding Facebook Like Box In WordPress Without Plugin

First you need to go to this link Facebook Like Box Social Plugin. You'll be redirected to Facebook official page where you'll customize your facebook fan page. Look at the below ScreenShot.

Now carefully fill these fields as you can see in above screenshot.

1. Enter your Facebook Fan Page URL.
2. Enter Tabs from your Facebook Fan Page (e.g. timeline, messages, events).
3. Select width of your Facebook Fan Page.
4. Select height of your Facebook Fan Page.
5. Customize other fields too according to your Website Layout.
6. After Customizing all fields you'll be able to preview your Facebook Fan Page in Preview area.
7. Finally, click on "Get Code". A new PopUp window will open containing codes for your Facebook Fan Page. See the below screenshot, the code will be look like this.

JavaScript SDK code containing HTML part.

iFrame Code

This is you've done with getting code for your Facebook Fan Page.

Now you need to install / add this code to your WordPress theme. So let's go ahead.

Installing / Adding Facebook Like Box Code To WordPress

Adding Facebook Like Box In WordPress Using iFrame

Once Again go to your official Facebook Developer page where you've already set up your Facebook Like Box fields. Click on "Get Code". A pop up window will appear and then click on "iFrame" at the top left corner.

Copy the code and paste it in your website where you want to display the like box.

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FLEARN-English-Grammar-1447150982172871%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true">
</iframe>

For example go to Appearance >> Widgets and now drag and drop the Text/HTML widget to your sidebar. Paste the iframe code in to it, save changes and refresh your site where you will see your Facebook like box.

Adding Facebook Like Box Using JavaScript & HTML5

Now one more time click on "Get Code" on official Facebook Developer Page. This time you need to click on "JavaScript SDK" tab. Now you will be provided with two codes.

Copy the first piece of JavaScript code which looks like this.

Be careful while copying the code.

<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/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Now you have to paste the code just below to the <head> tag in your WordPress website.

Go to your wordpress dashboard and head to Appearance >> Editor. Now from the right hand side templates area choose Header that is header.php. You can paste the JavaScript code just above the </head> tag or below the <body> tag and it’s up to you.

Again move on to your Facebook developer’s page and copy the second piece of code which just look like this.

Also be careful while copying the code.

<div class="fb-page" data-href="https://www.facebook.com/LEARN-English-Grammar-1447150982172871/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/LEARN-English-Grammar-1447150982172871/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/LEARN-English-Grammar-1447150982172871/">LEARN English Grammar</a>
</blockquote>
</div>

Now place this second piece of code where you want the Facebook Like Box to appear in your WordPress website and you can paste it anywhere like sidebar, footer bar, etc.

For example if you want to display the like box in sidebar then paste it in Text widget as we did above for iFrame method.

Save it and preview you website where you can see your Facebook page like box in sidebar.

Add Facebook Like Box In WordPress Using Plugin

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.

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.

I hope this article guided you on how to add Facebook like box in wordpress. Please share it and let us know about your opinion in comments.