Line25

How To Add a Custom Facebook Like Box to Your Site

Read the full post

Facebook pages are becoming more and more popular with brands, bands, organisations and celebrities who want to boost their social exposure on the web. Facebook’s social plugins and widgets are a great way to link your Facebook page with your website. Let’s look at how to not only insert the popular Like Box code onto your website, but also how to customize it to fit with your design, and make sure the code correctly validates.

Unfortunately it seems that Facebook has since revised their Like Box, so this article is somewhat outdated. I’ll aim to take a look at the new approach as soon as possible, so stay tuned!

View the Facebook Like Box demo

View the Facebook Like Box demo

Setting up the Like Box widget

First things first, let’s get the basic Like Box widget set up. Log into your Facebook account and click the ‘Edit page’ link on the left side of your page’s profile. Over on the right you’ll see the link ‘Promote with a Like Box‘.

The first thing you’ll need is the ID of your Facebook page. You can find this by checking the URL of most of the links on your page profile.

Enter the size and configure the options of your page, then hit the ‘Get Code’ button. Getting the full potential out of a Like Box takes a lot of time and effort. If you’re looking for a quick solution the iFrame code quickly and easily inserts a box onto your webpage, but don’t expect to be able to customize it too much. If you have an hour or two to spare, copy the XFBML code.

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("API-KEY-HERE");</script>
<fb:fan profile_id="PAGE-ID-HERE" connections="18" width="403" height="360"></fb:fan>

In order to use the FBML code, you’ll need some fancy Javascript SDK. Luckily for those of us who aren’t Javascript Wizards, you can find the code already written out from tutorials on the web. Note: The code here uses the old <fb:fan> code rather than the new <fb:like-box> code, so remember to change that in your snippet.

To get the Javascript method working you’ll also need an API key. To get one, head over to http://www.facebook.com/developers/apps.php and set up a new application. You can leave most of the details blank, as long as you end up with a key of some sort to insert into the SDK code.

Give the page a test. You should see the box load and display correctly, despite being in the boring default Facebook colours. It’s time to start customizing!

Customizing the Facebook Like Box

css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?1"

Link your CSS stylesheet by adding a new attribute to the <fb:fan> code. The ?1 at the end is a requirement and needs changing every time you make changes to the your CSS file, otherwise the old styling will be used from Facebook’s cache. So basically if you make a change and reupload the CSS file, don’t forget to also change the index file to ?2 and so on.

css="<?php bloginfo('stylesheet_url'); ?>?1

If you’re adding the Facebook Like Box to a WordPress theme, you could use WordPress tags to render out the stylesheet URL.

The Firebug plugin for Firefox makes it easy to edit and customize your Like Box in the browser. This saves plenty of time not having to change the stylesheet identifier and re-upload all the files. Just configure the styling how you wish, then replicate the CSS in your stylesheet.

.fan_box .full_widget { 
	background: none; border: none;
}
.fan_box .connections_grid .grid_item {
	padding: 0 8px 10px 8px;
}
	.fan_box .connections_grid .grid_item a img {
		box-shadow: 0px 0px 10px #333; -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333;
	}
		.fan_box .connections_grid .grid_item a:hover img {
			box-shadow: 0px 3px 10px #333; -moz-box-shadow: 0px 3px 10px #333; -webkit-box-shadow: 0px 3px 10px #333;
		}
.fan_box .full_widget .connect_top {
	background: url(http://line25.com/wp-content/uploads/2010/facebook/demo/images/blue.png);
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; 
}
.fan_box .connections .connections_grid {
	padding-top:16px;
}
.fan_box .connections {
	border-top: none;
	padding:15px 0 0;
	color: #ccc;
	font: italic 21px Georgia;
	text-align: center;
	text-shadow: 0px 1px 4px #000;
}
	.fan_box .connections span.total {
		color: #fff;
	}
	
.fan_box .connections_grid .grid_item .name {
	color: #ccc;
	font-size: 11px;
}
.fan_box .profileimage {
	margin: 0;
}

Here’s the CSS I’ve edited and added to generate the styling used in the demo. Most of the CSS rules clear out the default styling, for example: border: none;, but there’s also some fancy additions such as the CSS3 text-shadow styling.

It’s up to you how far you go with the customization. You could simply remove or change the background and border colours, or completely rearrange the elements into something completely unique.

Fixing the validation errors

The Facebook Like Box now looks great, but the FBML code doesn’t do your webpage validation any favours. Don’t worry, there’s a quick and easy fix for that…

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("fd161b28d6338cb852d8ed87878f67c3");</script>
<!-- FBML <fb:fan profile_id="119754924730147" connections="18" width="403" height="360" css="http://line25.com/wp-content/uploads/2010/facebook/demo/style.css?5"></fb:fan> FBML -->
<script src="js/fbvalidate.js" type="text/javascript"></script>

Download the handy Javascript file from ka-mediendesign.de. The author’s blog is in German, but you can figure out how it’s implemented pretty easily. Basically you need to reference the Facebook Validation Javascript file underneath the FBML code, then wrap the tags with <!-- FBML comments. The Javascript will then magically fix those validation errors!

View the Facebook Like Box demo

View the Facebook Like Box demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.gucho.com Lori

    Is it possible to put this in a flash swf object?

  • http://loneplacebo.com Tony

    The js file doesn't seem to be working…

  • Nick

    This is very interesting, thank you for this tutorial. I will certainly use it in my next project

  • http://www.studio51.se/blog Micke Hasselqvist

    Very interesting article! Facebook integration into your site is a nice feature. I especially liked the fact that you explained how to make the code validate. :)

  • http://www.digitalmaggot.com Arron Davies

    Awesome stuff, was about to cover it last night, saved me the time. Cheers Chris!

    x

  • http://www.wpbeginner.com/ Syed Balkhi

    Great tutorial Chris. I will certainly be using this on the new site design :)

  • http://www.ajaykarwal.com Ajay Karwal

    Thanks for sharing. Looks good. Defo gonna use this in the near future!

  • http://nfx.me Andy

    I really like this, thanks for the tutorial :) I will be using it for sure

  • http://www.liminal-design.co.uk/ Liminal Design Cornwall

    Thanks for posting, this is so useful. I just had a client request a Facebook friends feed so it couldn't be better timing.

    Ryan

  • http://www.bebop-cafe.com BebopDesigner

    Wow! absolutely brilliant. I'm gonna have to try it.
    Thanks for sharing

  • Niubi

    Great little guide! I think all sites should have social media links these days, otherwise they're losing out on some valuable resources and free advertising. Imagine DubLi or eBay with such integrated features, for example.

  • PTashe

    Don't know if you are familiar with the Ning platform, but do you know if this will work with Ning sites?

  • Andy

    If only I had know about 2 months ago instead of doing a Bodge-it Bill and changed the design to accommodate the standard FB one, could of actually made it look like the design!

    Nice tutorial Chris!

  • http://www.richardshepherd.com Richard

    Cool article – thanks Chris.

    Just a heads up – I've found that with XFBML you don't need an App ID or API key – it just works.

    This is handy if the Like Box is for a business page rather than a personal Facebook profile, because trying to get App IDs for business pages is a wormhole for your time!

  • http://claytoncorreia.com Clayton Correia

    Really cool stuff. Thanks much!

  • http://myblog-nwaekempi.blogspot.com nwabueze eleke

    There is need to have Africa real face value image around.

  • Mamaduka

    Chris thanks for great tutorial, but demo isn't working in Google Chrome, any ideas why?

  • http://designinformer.com Design Informer

    Excellent tutorial Chris. I never knew you can customize their like box. Keep up the great work! :)

  • mary

    I love this idea, but demo only works in FF for me. Nothing appears in Chrome, Safari or IE on a PC.

  • http://www.leegustin.com Lee Gustin

    Thanks Chris!! I've been looking to change the ugly standard Facebook styling. This did the trick (fairly easily too).

    http://blog.leegustin.com (in the sidebar)

    cheers :)

  • Arun

    Thank you for the tut. Implemented this on one of my sites and it looks great.

    @mary
    Works well for me on FF 3.6.8, Chrome 5.0.3xx, Safari 5.0.1, Opera 10.60 and IE 8.0.76xx. Just that border radius is not picked up by Opera and -webkit-border-radius by safari, astonishingly chrome picks it up well.

  • http://www.webeden.co.uk/ Ray

    Another great tutorial by Mr Spooner!

  • http://www.squidoo.com/webprofitabiltyreport keith

    nice report, facebook seems to be exploding in the world of promoting, this is a nice evaluation

  • http://www.bradstrickland.com/ Brad Strickland

    I was wondering how to set this up only yesterday. Thanks for the great post.

  • Travis Libby

    I had to do a similar thing with the Twitter widget – with limited success – couldn't find a way to remove the twitter logo – http://www.travislibby.com/stage/about.html

  • http://inspirationfeed.com inspirationfeed

    Very useful article, i will need to do this for my new design!

  • http://www.cristianarenal.com.ar Cristian Arenal

    Thanks for sharing Chris. Very nice works!

  • http://adooylabs.com audee velasco

    Chris, The demo doesn't seem to work on chrome ? or is it only me?

    Anyway, thanks for sharing.. It is really interesting. Thinking about having one for page too…

    Cheers!

  • http://www.leegustin.com Lee Gustin

    The javascript file that is used to make the code validate breaks the FB share badge. Any ways around that?

    What is the badge your using Chris?

  • http://www.serinfopro.com Jose Luis Murgas

    I appear in the screenshot :) , thanks for this great tutorial Chris.

  • mary

    demo is working for me now. either Facebook or I must have been having a bad day ;)

  • http://tutorialfeed.org TutorialFeed

    Very nice explanation. I have bookmarked this tutorial for future. Thanks for sharing.

  • http://www.msao.vn long.vu

    Dear all,
    Can you tell me how to use Like Box (Fan application) of Facebook with Vietnamese language?

    I've also use it like this:
    <script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/vi_VN'></script&gt;
    <script type='text/javascript'>FB.init('4ffbf2f5b5d23165c1a631cf315b63d2');</script>
    <fb:fan profile_id="132531543446684" stream="0" connections="10" logobar="0" width="302" height="" css=''></fb:fan>

    But when it loading, allway load this file:
    http://static.ak.connect.facebook.com/connect.php
    and there for it allway load with en_US language.

    How can I fix it?

    Thanks all.

  • http://JeffreyPia.com @JeffreyPia

    Awesome stuff Chris! Will try this out on my websites tonight!

  • http://www.rumatosefructose.blogspot.com Brad

    This is gorgeous! Can you explain how I might customize the css in the Blogger format?

    Thanks, very much!

  • Andy

    Really odd demo works fine, but when I recreate it using my groups stuff it works fine in FF but breaks in chrome any ideas? Am I just being dumb?

  • http://enbound.com Swede

    Rockin thanks!

  • http://www.corporatewebsolutions.net/ Amy

    Great stuff!

  • http://www.prijsvergelijk-energie.nl/ Isaac

    I tried this, but I seem to have a problem with the FeatureLoader. I did create an application and got the app ID. but the like box gives a page not found (see http://www.prijsvergelijk-energie.nl/). When I remove the script include, it works. But I cannot use any of my own CSS then, and I was hoping that this app id would help. (or is this not possible at all for the like box?).

    One other thing was that I have my app management screen, but do not have the "Connect" tab where I can set the Connect URL.

    Please help. The sun was shining but I was have wasted it.

  • http://tenebroso.net Jon

    Hey – Thanks for your tutorial, though I am a bit confused. The code you are sharing is for the "Fan Box" – in the tutorial and on the demo page. The code, when switching to the "Like Box" does not accept the CSS tag as it does for the Fan Box. Did anyone else experience this?

  • http://onlivo.com zeta

    this works great but it has a bug.

    the widgets below it doesnt show…

    if you switch the widgets it will show.

    how can it be fixed?

    i suposse it has an error in the java sdk

    <div id="fb-root"></div>
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; type="text/javascript"></script>
    <script type="text/javascript">FB.init("myAPI");</script>
    <!– FBML <fb:fan profile_id="mywebID" connections="6" width="285" height="195" css="myurlsite.com/wp-content/uploads/2010/08/facebookbox.css?1"></fb:fan> FBML –>
    <script src="myurlsite.com/wp-content/uploads/2010/08/fbObjectValidationV2.js" type="text/javascript"></script>

  • http://www.timivey.com/ Tim Ivey

    Perfect. Just what I was looking for. Thanks for putting this together. I'll have to give it a shot tomorrow.

  • http://JeffreyPia.com @JeffreyPia

    Just tried it and it works great for <fb:fan>, though I couldn't get it to work w/ <fb:like-box>. I guess they haven't implemented the css parameter for it yet?

  • http://JeffreyPia.com @JeffreyPia

    Oh, also I couldn't get it to work in a Text widget, had to hardcode it into the sidebar.php.

  • http://zztutorials.blogspot.com/ zztutorials

    thx to u for sharing us these resources!

  • http://www.smallbon.es steve

    Hey thanks for sharing this Tutorial, you make it really easy to read and follow. Keep it up!

  • http://mobilethemesworld.net/ TheShadow

    Awesome tutorial

  • http://cultivat.us Philip Brown

    Bloody hell you're a clever bloke! You have the most original tutorials on the internet. Nice job!

  • http://www.speckygeek.com Pritam

    The tutorial is nice, but I think it has an error. Instead of the API-KEY, Javascript code needs APP ID. At least, that's how I managed to test the code mention in this post. See the correct way of implementing the code here http://www.speckygeek.com/?p=388 Would like to know if I am correct. Cheers

  • Doug

    I couldn't get it to work, for whatever reason. Then I followed Pritam's instructions, and it worked.

    Thanks

  • http://www.kloude.net George

    I love this feature. I also like the simple like button api that facebook offers, which can show how many people like you and it's not as large.

  • http://www.xaby.com SiewShuen

    Saved me a bit of time from googling. Will "steal" this to benefit my own projects. Thank you !!