FBML (FaceBook Markup Language) is a markup language proposed by Facebook to extend some of the core functionalities of the social network itself. In its simplest form, it's made up of code snippets that, once inserted into the markup of a web document, allow us to use some Facebook's gadgets and widgets.
For example, the following code adds a "Like" button to our pages:
<fb:like href="http://www.site.com/"></fb:like>
Unfortunately, this code won't pass the W3C validation. Theoretically speaking, this problem would arise only with HTML, which is not extensible and its DTD is immutable. On the contrary, if we serve our documents as XHTML 1.1 and with a custom DTD, then we could use FBML without any problem.
I say "theoretically", because with XHTML 1.1 we must:
- serve our documents as
application/xhtml+xml - specify the FBML namespace in the root element (
html) - create a custom DTD
However, none of these steps can actually be done without a firm knowledge of how XML works, plus a long practice with parsing, DTDs, namespaces and XHTML 1.1. Is there a solution? Yes, and it involves injecting the above snippet directly into the DOM via JavaScript. For example, by using jQuery:
var $fbLike = '<fb:like href="http://www.site.com/"></fb:like>';
$($fbLike).appendTo('body');
But now a major accessibility problem arises: we have to deal with browsers that don't support JavaScript or have JavaScript turned off. Then we must provide the following fallback mechanism:
<noscript>
<p><a href="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fwww.site.com">Like</a></p>
</noscript>
By providing a simple textual link within a noscript tag we cater the accessibility needs of our users.