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;
}
