Adding a Facebook ‘Like’ button

image

I am not a big Facebook user (sorry!), but I needed to know how to add a Facebook 'Like' badge to my pages. It may seem relatively easy if you go to the Facebook developers section. However, we really like to make all our pages validate and we are using the XHTML 1.0 strict doctype. You can read how I found a way of doing it here.

furthermore...

The original widget that you can get from the Facebook site looks like this:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like width="200" font="verdana"></fb:like>

There are 2 problems with this for validation:

  1. The script tag needs the following attribute to validate - type="text/javascript"
  2. The 'fb' tags are not valid, so we need to hide them.

So, here is what you need instead:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<!-- FBML <fb:like width="200" font="verdana"></fb:like> FBML -->

Lucky for us that Kevin Lieser over at Kleaser Arts has written about this problem and provides us with some javascript to remove the comments added in above. You should grab the code from him here.

I have added the javascript function to my own library that is loaded to all of my pages, and I modified slightly to build a function. I then add the following to the very end of any pages that I want to show the Like button. Like this:

<script type="text/javascript">fixFacebook();</script>

The javascript strips the comments out, but the page still validates.

Posted on 09 Nov around 9am

Tags: •