How to Customize your Facebook Fan Box
Jan05

How to Customize your Facebook Fan Box

With the addition of a facebook fan box to your website you’re not only benefiting your end users but also yourself. The fb fan box allows users to directly view how many friends you have on your facebook page and also allows them to become a fan with just one click. The only potential downsides to adding a fan box to your page is that it is not easy to customize or the original styling just doesn’t match up with the unique style of your site. Well not anymore, in this tutorial we are going to teach you how to customize your very own facebook fan box. This tutorial will teach you step by step how to customize your facebook fan box to look like ours. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to your own needs. 4/29/10 – This tutorial has been updated to allow full customization of the Facebook Fan Box and positioning of the new “Like” button. Setting Up Your Widget Step 1 – Get Your Facebook Fan Box Code First things first you need to get the code for your facebook fan box from facebook, your code should look something similar to the code below. <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script> <fb:fan profile_id="34572893685" stream="0" connections="10" logobar="0" width="300"></fb:fan> <div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/North-Miami-FL/Daddy-Design/34572893685">Daddy Design</a> on Facebook</div> Step 2 – Linking Your CSS The second step is to set up the linking to your css code and adjusting your facebook fan box code to allow for the customization you’re about to start. The div associated at the end of the original fan box code is only a link back to your facebook page, we decided to remove it, however you may choose to leave it. Items that we have changed in our code are the width from 300 to 240 and connections from 10 to 8, your width and number of connections may change depending on the space available for your fan box. Items we have added are height at 200 (also subject to change) and the line of code to link to our css stylesheet. Please view the updated coded below. <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script> <script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script> <fb:fan profile_id="34572893685" stream="0" connections="8" logobar="0" width="240" height="200" css="http://www.yoursite.com/stylesheet.css?1"></fb:fan> One important item to take notice of is ‘?1’ which appears at the end of the css link, this item is the cache level for the facebook fan box, every time you make changes to the css inside your stylesheet and upload to your server you must change the number after the question mark to correspond...

Read More
'