Posted by Elliott Golden
I was recently hired to set up a Facebook Fan Page a.k.a Page and a custom branded tab for UEFA Champions League Soccer and Heineken. Although the core technology required to make this happen is dead simple, learning my way through some of Facebook's quirks and limitations proved to be the real challenge.
For starters, it wasn't immediately obvious that a Page must be associated with a personal account. This key bit of information was never clearly presented to me as I "logically" navigated Facebook in an attempt to create the new Page. If a Page is being created for a client, it's important to decide who the personal profile will represent, as a person's full name will be required. For my client, I initially set up the personal account under my own name. The client then hired a moderator to regularly post content and manage the Page. Even though he had been added to the Page as a proper moderator, his posts were still being credited to the name associated with the personal account—mine. I was able to fix this by changing the username of the personal account to that of the moderator.
The project required a custom tab that would be nothing more than some HTML with a few external links, some absolutely positioned CSS rollovers and a couple of name anchors.
Facebook provides a simple app that enables this—Static FBML. Once the app has been installed for your Page, you can paste your HTML (including your external stylesheet call) into the app's textarea. Again, simple stuff, but here's something to note. Since the <html>, <head> and <body> elements are already part of the parent Facebook page be sure to omit these (both opening and closing) in the markup you enter into Static FBML.
When developing the markup and CSS, I prefer to work on local instances of the code. As I reach certain points, I copy and paste the code into Static FBML to see how it renders in the production environment. Updating the HTML provided instant results as expected, updating the CSS was a different story though. Facebook caches external stylesheets with a vengeance. I found two ways to get around this. You can use ugly inline CSS if your requirements are minimal. This makes it a pain to edit and also does not provide support for pseudo classes. i.e., Forget about using :hover and the like. The smart solution is to append an arbitrary query string to the end of the external stylesheet's URL. This acts as a cache buster.
<link href="http://www.my_server.com/my_stylesheet.css?version=1" rel="stylesheet" type="text/css" />
To force Facebook to use the newly edited stylesheet, just increment the number on the query string each time an edit is deployed.
Beyond the items already mentioned, I found that at times my local dev code would render as expected in the main browsers for both Mac and PC, but when deployed to Facebook the layout would not render in the same way. I found simpler CSS layout techniques to be the least problematic. As for Javascript I didn't use any in this project. However, from what I have read, standard JS is barely supported or not supported at all for Static FBML apps.
