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="https://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. 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 <html>, <head>, <title> or <body> tags as the custom Static FBML tab you are creating is within a web page and these tags are already present. There are some features one can use to control interface changes instead of writing onClick scripts. For example, clicktoshow and clicktohide can make displaying and hiding elements of your page quite simple, perfect for someone who might not have as much coding skill or not in need of something overly complex.
