FBML Essentials

CSS and DOM in FBML

CSS in FBML can be tricky if you don’t recognize the quirks associated with it. FBML supports <link/> tags for importing external files into your rendered HTML, as well as style attributes and <style/> tags for rendering the CSS inline. One must recognize, however, that Facebook reads these external files and parses them into its own formats.

Facebook treats <link/> tags very similarly to <img/> references in that, on first load of the file, it stores a cached copy of the file on the Facebook servers. The difference is that once the file is cached, that file never gets deleted. Therefore, it might be wise to append a ?version=2.0 or similar parameter if you want to indicate the file was changed. URLs in a <link/> href attribute must be absolute, just like <img/> tags, and must link to the callback URL specified in the application’s installation settings.

Here’s an example <link/> tag in FBML (referring back to our “Hello World” application in Chapter 1):

<link rel="stylesheet" type="text/css" href="http://fbmlessentials.
    staynalive.com/facebook.css?version=1.0" />

CSS within your FBML, whether it’s within <style/> tags or documents linked from <link/> tags, must adhere to certain guidelines. Facebook, when reading id attributes in the DOM from your HTML, rewrites those IDs with the string app, appended by the ID of your application, followed by an underscore, and then the original ID you specified. The following HTML that you send to Facebook through your app:

<div ...