Customizing a Facebook Fan Badge

Written: April 10, 2010

Facebook is such a huge social platform at the moment that I just had to setup my own fan page. So now the question became, “How do I let people know about my fan page?”
The folks at Facebook have a method to create a badge for you fan page and this is the code they produced for a client site earlier this week:

<script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript">script><script type="text/javascript">FB.init("be352ef31b466ca882aebfb3f8f6e0aa");script><fb:fan profile_id="387527625756" stream="1" connections="8" logobar="1" width="240">fb:fan>
<div style="font-size: 8px; padding-left: 10px;">
<a href="http://www.facebook.com/pages/Tualatin-OR/VFW-Post-3452/387527625756">VFW Post 3452a> on Facebookdiv>div>


My issue with this is that it doesn't pass the official validator for HTML: http://validator.w3.org/


More searching revealed that I had to use an iframe instead of Javascript code, so this is the approach that passes HTML validator:




 


 The end result is embedded here:


 


    


The iframe uses a CSS file for styling to fit my site:


 


@charset "utf-8";/* FB Fan Rev 2 */

.fan_box.full_widget .connect_top { border: 1px solid #f1592a; background-color: #ffffff;}.fan_box.full_widget { border: none;}.connect_top a { color: #f1592a;}.connect_top a:hover { color: #000000; }.fan_box.connections { background-color: #ffffff; border: none; color: #000000;}.fan_box.connections_grid.grid_item.name { color: #000000; }



Tags: , , 




			

	 






Leave a Reply