Written: April 10, 2010

Customizing a Facebook Fan Badge

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

Your email address will not be published. Required fields are marked *

Facebook Fan Page

I decided to add a Facebook Fan Page to my list of social media today:

Come on by and let’s get caught up a bit.

Tags: ,

One response to “Facebook Fan Page”

  1. Laurence Cossel says:

    Thanks so much for an informative blog. I’ve been looking for this type of information for some time now.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

Blog Tags

Blog Directory & Business Pages at OnToplist.com