Creating a Custom Static FBML Facebook Page

Note that since this post was created, FBML is no longer available for new Facebook Tab Pages but is, as of right now, still supported. This may change in the future. Facebook Page Tab support is now via iFrames within a Facebook Application. For details read our Creating a Facebook iFrame Application

Facebook has a great application, Static FBML, that is available for anyone to use.  With it you can create a custom tab on your Facebook Page.  An example would be the “Home” tab of WEBphysiology’s Facebook Page.  One can get quite elaborate simply by utilizing more graphical elements with embedded text as opposed to a more standard HTML/CSS styled page.  If you know HTML then you shouldn’t have too much of a problem with FBML.

Facebook Static FBML Environment Constraints

There are some restrictions within the Static FBML framework.  One thing to keep in mind is that Flash, iFrames and Javascript elements won’t fire when you land on the page.  For security reasons, a user action, typically a click, is required to initiate any of these elements.

Also, while I definitely don’t recommend inline CSS for a website, it actually is a better implementation within a Facebook Page’s Static FBML code. Simply use the style tag to encapsulate your CSS:

<style type="text/css"> ... </style>

If you want to link to a stylesheet this does work, however, you need to add a version to it and increment this everytime you make a change to the referenced CSS document. This is because Facebook caches the CSS file. A linked CSS stylesheet reference would look something like this:

<link href="http://webphysiology.com/styles/fb_style.css?v=1.000001"
rel="stylesheet" type="text/css" />

Another thing to be keenly aware of is that very soon the width restriction on tab content will be limited to 520 pixels wide.  If you want to stay on top of Facebook changes you can check out the Facebook Developer Roadmap.

Facebook FBML vs. HTML

FBML, or Facebook Markup Language, is quite similar to HTML.  Allowed tags are documented here. One thing to keep in mind is that, unlike a typical web page, you are only including the “body” component in the tab’s FBML code, that is, don’t include , ,