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 three different ways.
Adding Facebook like box in wordpress without plugin
Head to this link Facebook like box social plugin and enter your Facebook page URL. Now the preview of your like box will be displayed below. Adjust and add the value to width and height of the plugin so that it can fit your sidebar.
Add further modification if you wish so. You can show posts from your page timeline, remove header (find us on Facebook), remove border and you can even remove faces. Click on get code when you are finally done and when you decide that the preview below is what you want.
Facebook lets you to add the plugin code to your site in multiple ways. You can choose from HTML5, XFBML, IFRAME or URL. From the four options iframe is the easiest one; anyhow we will additionally see adding the plugin code using HTML5 method.
Adding Facebook like box in wordpress using iframe
Click on get code and choose the IFRAME option and you will see a code just like this.Copy the code and paste it in your website where you want to display the like box.
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fblogtimenow&width&height=290&colorscheme=light&show_faces=true& ;header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" 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 HTML5
Click on get code and choose HTML5 tab. Now you will be provided with two codes. Copy the first piece of JavaScript code which looks like the one below.
<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";
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 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.
<div class="fb-like-box" data-href="http://www.facebook.com/blogtimenow" data- colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
You have to place this code where you want the plugin to appear in your page 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
Jetpack Facebook like box
Are you using Jetpack wordpress plugin, then you don’t have to install any plugin for the purpose of Facebook like box.
Go to your Jetpack plugin and click on configure the Extra sidebar widgets or simply go to Appearance >> sidebar. Now you will see Facebook like box widget by Jetpack, just drag it to your sidebar. Enter the title, your Facebook page URL, set width height and customize all the necessary options. Save widget when you are done and that’s it.
Facebook plugin
If you don’t have or don’t use Jetpack then you can go for official Facebook plugin. Just install and activate Facebook plugin and in your wordpress sidebar you will have three options. You can add and configure Facebook like box, Facebook like button as well as Facebook follow button.
Hope this article guided you on how to add Facebook like box in wordpress. Share it and follow us on Facebook to get more updates from us.