Monday, April 5, 2010

CSS Compliant Facebook Badge

I made a Fan Page for Traditional Hydrotherapy. There is nothing on it yet, I just needed to get a URL so I could finish my page layout. I decided to place a Facebook badge for this page in the right column of the website's pages if there was nothing else to go there.

When I created a badge the Facebook way. I ended up with this HTML to put on each page:
<!-- Facebook Fan Badge START -->
<div style="width: 100%;">
<div style="background: #3B5998;padding: 5px;">
<img src="http://www.facebook.com/images/fb_logo_small.png" alt="Facebook"/>
<img src="http://badge.facebook.com/badge/111459758873296.100000637781892.2048613001.png" alt="" width="0" height="0"/>
</div>

<div style="background: #EDEFF4;display: block;border-right: 1px solid #D8DFEA;border-bottom: 1px solid #D8DFEA;border-left: 1px solid #D8DFEA;margin: 0px;padding: 0px 0px 5px 0px;">

<div style="background: #EDEFF4;display: block;padding: 5px;">

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top"><img src="http://www.facebook.com/images/icons/fbpage.gif" alt=""/></td>
<td valign="top">
<p style="color: #808080;font-family: verdana;font-size: 11px;margin: 0px 0px 0px 0px;padding: 0px 8px 0px 8px;"><a href="http://www.facebook.com/people/Bruce-Thompson/100000637781892" title="Bruce Thompson" target="_TOP" style="color: #3B5998;font-family: verdana;font-size: 11px;font-weight: normal;margin: 0px;padding: 0px 0px 0px 0px;text-decoration: none;">Bruce Thompson</a> is a fan of</p>
</td>
</tr>
</table>
</div>

<div style="background: #FFFFFF;clear: both;display: block;margin: 0px;overflow: hidden;padding: 5px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle">
<a href="http://www.facebook.com/pages/Traditional-Hydrotherapy/111459758873296" title="Traditional Hydrotherapy" target="_TOP" style="border: 0px;color: #3B5998;font-family: verdana;font-size: 12px;font-weight: bold;margin: 0px;padding: 0px;text-decoration: none;">
<img src="http://www.facebook.com/profile/pic.php?oid=AAAAAwAgACAAAAAPnFSoNc8Trl6ORItfDTJhYKYveiENe4kqugsRcDaZtA5_f_aRwFLP_WeddB9Cb9kck-0FC-b94fEd8ed_T_OwQCrjqZ_8mijIMwVS7kGeT7K_tbEyj2S2RzD0BrqH-a2o&size=square" style="border: 0px;margin: 0px;padding: 0px;" alt="Traditional Hydrotherapy"/>
</a></td>
<td valign="middle" style="padding: 0px 8px 0px 8px;">
<a href="http://www.facebook.com/pages/Traditional-Hydrotherapy/111459758873296" title="Traditional Hydrotherapy" target="_TOP" style="border: 0px;color: #3B5998;font-family: verdana;font-size: 12px;font-weight: bold;margin: 0px;padding: 0px;text-decoration: none;">Traditional Hydrotherapy
</a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- Facebook Fan Badge END -->

Which produces a badge that looks like this:


I thought the HTML was far too messy so decided to hack it and make an equivalent using CSS.

My CSS looks like this:
/*Facebook fan page badge */
#fbbadgetop{
width: 100%;
background: #3b5998;
padding: 5px;
bottom:40;
}
#fbbadgemid{
background: #edeff4;
display: block;
border-right: 1px solid #d8dfea;
border-bottom: 1px solid #d8dfea;
border-left: 1px solid #d8dfea;
margin: 0px;
padding: 0px 0px 5px 0px;
}
#fbbadgecont{
background: #ffffff;
clear: both;
display: block;
margin: 0px;
overflow: hidden;
padding: 5px;
}
#fbbadgecont a{
border: 0px;
color: #3b5998;
font-family: verdana;
font-size: 12px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration: none;
}
#fbbadgecont p{
padding-top: 5px;
}
.align-left{ float:left; margin: 0 15px 0 0; }

The HTML looks like this:
<div class="rightbox">
<div class="product_wrapper">
<p>Become a fan at...</p>
<div id="fbbadgetop">
<img src="../images/fb_logo_small.png">
</div>
<div id="fbbadgemid">
<div id="fbbadgecont">
<a href="http://www.facebook.com/pages/Traditional-Hydrotherapy/111459758873296" title="Traditional Hydrotherapy" target="_TOP"><img src="../images/fbtartan.jpeg" class="align-left"></a>
<p><a href="http://www.facebook.com/pages/Traditional-Hydrotherapy/111459758873296" title="Traditional Hydrotherapy" target="_TOP">Traditional Hydrotherapy</a></p>
</div>
</div>
</div>
</div>

And the new badge is:

I'm quite pleased with this but I'm sure that there are plenty of people who can make it even lighter. Or maybe I should just turn it into a png image...

Which would be lighter and faster? Please let me know.

And this whole exercise begs the question...WHY?

Well the simple answer is that I don't want the validator going off with every page I make. (and I love messing around with stuff).