How to Add Facebook Like Box to Your Website

You would be prefer to engage with social networks and broadcast your blog or website updates for your fans and follower to keep them up-to-date with your latest content. There are different kind of social channels you can think of nowadays. If we narrow down to Facebook, usually bloggers and webmasters create a Facebook fan page to send new updates of their site content and to engage with fans. The visitors can easily subscribe for new updates by just liking the Facebook page. But for that purpose, you have to redirect your blog or website visitors to your Facebook page. What if you can let your visitors easily subscribe or like your Facebook page while they are on your site?

Facebook offer a social plugin for websites which represent Facebook page of the site and visitors can easily like Facebook page - Facebook Like Box. Facebook Like Box is a popular social plugin you could find on most blogs or websites. It will enable users to like your fan page with a single click while on your blog or website and display how many fans on that particular page. The plugin can be personalized to display faces of existing fans and Facebook page stream too. It is very convenient for visitors who are interested in future updates to subscribe. Would you like to add it for your own site and gain more likes for your Facebook fan page while let them stay connected with your updates?

Before You Go:

Unless if you implemented Facebook JavaScript SDK in your site, you have to add it before you proceed with steps. Read How to Implement Facebook JavaScript SDK on Your Website and implement suitable JavaScript SDK for you.

Steps:

1. You just need to add this code to your website. Either use XFBML code or HTML5 code as you prefer.

Note: If you are a Blogger user, add your plugin code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

XFBML Markup

<fb:like-box href="[URL of Your Facebook Fan Page]" width="[Width in Pixels]" height="[Height in Pixels]" colorscheme="[Like Box Color]" show_faces="[Enable/Disable Showing Faces of Fans]" show-border="[Enable/Disable Border]" stream="[Enable/Disable Stream]" header="[Enable/Disable Header]"></fb:like-box>

Note: The XFBML markup of this plugin may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.

xmlns:fb="http://ogp.me/ns/fb#"

i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">

HTML5 Markup

Color Indication Information

- URL of Your Facebook Fan Page

- Width of Facebook Like Box Plugin in Pixels

- Height of Facebook Like Box Plugin in Pixels

Just specify height of your like box in pixels. Else you can leave it blank and let plugin decide the height automatically.

- Color Scheme of Like Box

Here you are eligible to select the color scheme of the Facebook like box. Either specify light or dark here as you prefer.

- Show Profile Pictures of Fans

You can show off profile pictures of your fans through your like box. Specify true if you would like to display faces, or else specify false here.

- Facebook Like Box Border

Specify whether you need border for Like Box. Specify true if you would like to display border, or else specify false here.

- Display Steam of Your Fan Page

Specify true if you would like to display stream of your public fan page or else specify false.

- Facebook Like Box Header

You can elect to display default header with label 'Find Us on Facebook' here. Either specify true or false as you prefer.

Enjoy :-)

Haider said...: Hi Mayura,

Thanks for the tips. I tries implementing the facebook like box and succeed also. But I had one problem. I can see that your facebook fan page url is "http://www.facebook.com/Mayura4Ever" and mine is something like this "http://www.facebook.com/pages/Rozi-Rojgar/298504280180990". How can I make it as http://www.facebook.com/RoziRojgar.
Please help me. My blog url is http://rozirojgar.blogspot.com/; December 9, 2011 at 2:07 AM
Mayura De Silva said...: Hi Haider,

Welcome to Mayura4Ever :) You can find the answer for your query here ~ How to Claim a Username in Facebook.

Cheers...; December 9, 2011 at 2:11 AM
Suntharan Muniandy @ Mr Sun said...: Very useful tips
Thank you very much..; December 22, 2011 at 10:03 PM
Mayura De Silva said...: Hi Suntharan,

Thanks for your kind comments mate :)

Cheers...; December 22, 2011 at 10:05 PM
Gissel said...: Thank you for this article, now here is the problem that I'm experiencing. When I get the code from facebook I copy it and paste into the add a gadget on my blog is not working. What I'm I doing wrong?; January 5, 2012 at 7:20 PM
Mayura De Silva said...: Hi Gissel,

Which markup you have used to implement N which browser you are using? As a prerequisite, you need to implement Facebook JavaScript SDK on your blog to work it out dear :) You can follow this tutorial as it direct you to implement JavaScript SDK...

Cheers...; January 5, 2012 at 7:39 PM
Tammy @ A Walk in the Countryside said...: I'm new to blogging and really appreciate the info. Very helpful!; January 14, 2012 at 12:07 AM
Mayura De Silva said...: Hi Tammy,

You are welcome and thanks for stopping by :)

Cheers...; January 14, 2012 at 12:10 AM
Unknown said...: Hi,
Thanks for the tip. I tried it going through all the steps (implemented Facebook JavaScript SDK and then pasted the code into a HTML/JavaScript element) on my Blogger page, but the Like box does not show up.
It should be showing up right underneath the Followers box, but nothing. I just see an empty space with the tools icon next to it (which all it is doing is indicating that there is a widget to edit/modify). Any ideas what I may be doing wrong?
Here's the code snippet (apart from the asterisks ofcourse):
**
Here are the relevant template modifications I made to implement JavaScript SDK:
<**body expr:class='"loading" + data:blog.mobileClass'>
<**div id='fb-root'/>
<**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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
You can observe the disappointing result here:
http://shadow69photography.blogspot.com/
Any help would be much appreciated.
Many thanks.; March 30, 2012 at 7:58 PM
Mayura De Silva said...: Hi mate,

I can see your like box over there. And remove height=" " attribute from your like box code. If you got no value for height, you just remove it :)

Cheers...; March 30, 2012 at 9:26 PM
Unknown said...: Thanks Mayura; March 30, 2012 at 10:30 PM
Mayura De Silva said...: You are welcome mate :)

Cheers...; March 30, 2012 at 10:31 PM
Unknown said...: Actually just figured out that while it works in Internet Explorer I don't see it in Firefox, so now am trying to figure out why this is happening :-); March 30, 2012 at 10:47 PM
Mayura De Silva said...: I just view your blog via Firefox and Chrome mate :) Works fine with like box. You may try clearing cache or see if there is any extension or add-on blocking it.

Cheers...; March 30, 2012 at 10:52 PM
Kulwinder Kohli said...: when someone click on like, it asks to confirm and when click on confirm , a page comes with 404 error on facebook
! plz help me; December 4, 2012 at 10:13 PM
Mayura De Silva said...: Hi Kulwinder,

Can you drop me the URL of your page where Like Box has been implemented? :)

Cheers...; December 4, 2012 at 10:13 PM
Ankit said...: Your post seems good as I have added a like box to my blogger blog. Now I need to remove its border. Can you please help me?; February 15, 2013 at 2:15 AM
Mayura De Silva said...: Hi Ankit,

Just specify border color as white or #ffffff. You will see no border around the like box :)

Cheers...; February 15, 2013 at 2:20 AM
sam445 said...: how to make facebook like and twitter in tap system eg here is link http://io9.com/5989058/heres-what-it-looks-like-when-meteors-hit-the-rings-of-saturn; March 7, 2013 at 6:18 PM
Mayura De Silva said...: Hi Sam,

Sorry I have no idea about that mate :) Try Google. You may find a tutorial on that or else you have to hire a developer to make one for your site.

Cheers...; March 7, 2013 at 6:46 PM
sam445 said...: do u have any in your post eg:http://awesomescreenshot.com/07510o9tb3; March 7, 2013 at 10:10 PM
Mayura De Silva said...: No mate, I offer design as a paid service only. You can search online for templates similar to that :)

Cheers...; March 7, 2013 at 10:13 PM

Mayura4Ever

September 6, 2011

How to Add Facebook Like Box to Your Website