Facebook FBML W3C Validation Solved
Adding facebook widgets is great for any website, but <fb> tags are not W3C valid. I must say that I'm writing this because after 4 hours of scouring the internet and coming across tens of so called "solutions" that just don't work, I finally managed to solve this!
Actually when you get right down to it, the solution is simple but you need to understand how XHTML really works.
The reason FBML tags are invalid is because they are not part of the XHTML Transitional namespace, Facebook created their own namespace and trying to put 2 namespaces in the same <html> tag is invalid as well.
So, how to hide the tag from the html?
Actually, pretty simple, enclose in a script tag and output via javascript so instead of having a "Like" tag that looks something like:
<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>
You would just enclose it in javascript so it would look something like:
<script language="javascript" type="text/javascript">
document.write('<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
</script>
But, javascript won't accept "<"...
Again, just understand that you're using XHTML which can parse html and xml. We use the xml CDATA tag to tell the validator that the "<" is just text and not a tag.
And of course escape it for javascript as a comment because javascript won't know what to do with it.
And we get the final code
that looks something like:
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
</script>
So just to recap, if you want to use any FBML tags in valid W3C html as XHTML Transitional, simple do the following 2 steps:
- Enclose your tag in a javscript "document.write" and script tags
- Make sure to use escaped CDATA tags within the javascript tags.
And that's it, a simple solution to valid XHTML with Facebook FBML tags inside.