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.

52 Comments

  1. Lori says:

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

  2. Tony says:

    The js file doesn't seem to be working…

  3. Nick says:

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

  4. 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. :)

  5. Arron Davies says:

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

    x

  6. Syed Balkhi says:

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

  7. Ajay Karwal says:

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

  8. Andy says:

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

  9. 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

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

  11. Niubi says:

    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.

  12. PTashe says:

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

  13. Andy says:

    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!

  14. Richard says:

    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!

  15. Really cool stuff. Thanks much!

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

  17. Mamaduka says:

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

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

  19. mary says:

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

  20. Lee Gustin says:

    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 :)

  21. Arun says:

    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.

  22. Ray says:

    Another great tutorial by Mr Spooner!

  23. keith says:

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

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

  25. Travis Libby says:

    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

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

  27. Thanks for sharing Chris. Very nice works!

  28. 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!

  29. Lee Gustin says:

    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?

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

  31. mary says:

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

  32. TutorialFeed says:

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

  33. long.vu says:

    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.

  34. @JeffreyPia says:

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

  35. Brad says:

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

    Thanks, very much!

  36. Andy says:

    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?

  37. Swede says:

    Rockin thanks!

  38. Amy says:

    Great stuff!

  39. Isaac says:

    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.

  40. Jon says:

    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?

  41. zeta says:

    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>

  42. Tim Ivey says:

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

  43. @JeffreyPia says:

    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?

  44. @JeffreyPia says:

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

  45. zztutorials says:

    thx to u for sharing us these resources!

  46. steve says:

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

  47. TheShadow says:

    Awesome tutorial

  48. Philip Brown says:

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

  49. Pritam says:

    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

  50. Doug says:

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

    Thanks

  51. George says:

    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.

  52. SiewShuen says:

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

Comments are now closed