Hacking Facebook "Like" buttons for W3C Validation in HTML5

So, it turns out that the good old Facebook ‘Like’ buttons and Google’s ‘Plus one’ buttons don’t behave well on HTML5 format websites. That’s because they make use of XHTML and namespaces. Sure, mixing XHTML and HTML5 together on a single page works just fine for the end-user, but when it comes to validating your pages on the W3C, it just won’t work.

What’s the ‘solution’? Why, hacking it, of course. Take the code for those elements out of the source, and embed it with JavaScript instead.  And it doesn’t have to be complex either - you can use inline JavaScript code.

Wrap your button embed HTML in a

Becomes this code:

Of course, this being a hack, I can’t really speak for this being good practice, but it works. Evaluating the pitfalls will come later, I’m sure!