Finding such an element is not that hard. In fact it is very trivial: the embed-element. As we are embedding Facebook plug-ins it sounds very natural if we did that via embed elements. The next requirement (supporting all attributes) is also very quickly met when using HTML5. HTML5 allows elements to have so called user-data. This user-data is represented in attributes which have the following structure:
where somename is the name of the user-data field and somevalue the associated data. Once we know this, we can make up some rules. Lets say we have the following abstract FBML tag:
<fb:name att1="val1" att2="val2" ... attn="valn"></fb:name>
In order to have a good map we need to keep all attributes and also know what FBML element we are talking about. I first thought of storing the name of the FBML element in the type attribute of the embed element, but this causes some browsers to search for additional plug-ins which are associated with the given type. This is annoying, so let's just store the name in a user-data attribute. The rules here are the following:
- store the name of the original FBML element in the data-fb attribute (change 'fb' to another namespace name if necessary)
- store attributes in a data-attname attribute, with attname being the name of the attribute and the value following as the value of the user-data attribute.
This brings us to the following result (using the abstract FBML tag):
<embed data-fb="name" data-att1="val1" data-att2="val2" ... data-attn="valn" />
Note that the div will inherit all attributes from the embed tag. This is necessary because the classes that do the parsing of each specific element still need to read them. It is also useful for the developer that attributes like the id, class and title are inherited so that CSS styles or other connected functionality keeps working on the element.
Because the parsing of XFBML is done when executing the FB.init function I had to override this function to make it also parse our custom (lets call them FBML5) elements.
This last modification could cause problems with existing scripts, so be aware of this when you use user-data attributes which have the same name as normal attributes.