A great way to encourage some easy interaction from your visitors with your site, and to promote it to a wider audience, is to add a Facebook Like Box to your site (previously known as a Facebook Fan Box). The one downside to the default options of the Facebook Like Box is that it’s pretty unimpressive looking, and never really ‘fits’ with the style of a site.
But, it doesn’t have to be that way!
As long as you remember a few key points it’s just as easy as styling any other set of elements in your web design.
1: The new Like Box doesn’t support CSS yet, not as far as I could test anyway. So, you need to use older Fan Box code instead,
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"><!--mce:0--></script> <script type="text/javascript"><!--mce:1--></script>
2: Getting an API key is easy – there are plenty of how-to’s a short search away, so I won’t bore you with the details. Then you need to enter your profile ID (the numerical id of your page, not the name of it) and link up your stylesheet. You’re nearly set!
3: At the end of the CSS variable above, you will see there’s a “?1″ – this is because your stylesheet in the link will get cached as soon as you load the page. So start with a 1, and then every time you make changes that will update the Facebook Fan Box, then just increase the number by 1 (so after the next upload, it will need to be “?2″.
Once you’re all set up, it’s as simple as cracking open Firebug and styling up as needed. For example,
.app_content_125422374187757 .fan_box .full_widget {
background: none repeat scroll 0 0 transparent;
border: 0 none;
}
Will strip out the pale background and border that encompasses the box by default, and:
.app_content_125422374187757 .full_widget .name_block {
display: none;
}
Will hide the “(your-page-name) on Facebook”, so you keep focus on the ever important “Like” button. That’s it in a nutshell – if you have any questions feel free to comment below!
This is a great tutorial, but I have a question…
I’m trying to style a fb fan-box for a fan page, not an application. Is there any way to get the fan-box point to the fan page instead of the application page?
Hi Jim,
I’m fairly sure it’ll work the same way – grab your fan page profile ID and pop it into the profile_id box. I think when I was giving this a go it was for a normal Fan page as well.
If you’re not sure where to find your profile ID, the post below shows you quite nicely:
http://crenk.com/where-do-i-find-my-facebook-fan-page-public-profile-id/
Let me know how you get on!
Hello,
It looks like Facebook has either changed or removed the method by which you can style your like-box (using the ‘css’ attribute in the tag). Is there another way? Do I have to use FB.XBFML.parse() function somehow? Arghh…FB and its countless monthly changes. If something isn’t deprecated, it’s completely changed.
Hi Domenic,
Pesky Facebook! Bear with me, I’ll try and sit down in the next week or so to get the new method down. I’ll update this post with the new method as soon as it’s done.
Thanks for the heads up!
Nice post Luci! However, I’m a bit lost here…
So… I’ll use facebook’s official Like Box to generate the code… and then place it where??