Facebook Cookbook - Jay Goldman [61]
with:
where 12345 is your app’s ID. This is known as creating a “namespace,” which Wikipedia defines as:
In general, a namespace is an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of items having the same name (residing in different namespaces).[8]
Discussion
The end result is that your application should be basically unaffected. The Sandbox is smart enough to also rename any occurrences of #supercalifragilicious in your CSS files, so that they still match up to the renamed ids in your FBML. That said, be careful with classes! The Sandbox doesn’t rename those, so:
will become:
This is OK within your app, but what happens when your classes conflict with Facebook’s markup? Crazy, crazy things. For example, consider this line:
That’s not an entirely unlikely line of HTML for you to have written. Unfortunately, so_sound_player is a Facebook class already:
.so_sound_player{
left: 0px;
position: absolute;
top: 0px;
z-index: 1000px;
}
You’ll notice pretty quickly that your div is misbehaving, and a quick trip into Firebug should tell you why, but you can avoid this problem by enforcing namespaces in your own CSS and then overriding Facebook’s markup (or just renaming your class). Since Facebook automatically wraps your Canvas page in a div with the id app_content_12345 (where 12345 is your app’s ID), you can do this:
#app_content_12345 .so_sound_player{
position: relative !important;
z-index: auto !important;
...
}
This takes advantage of CSS’s inheritance rules to contextualize the class named .so_sound_player within your app, and then to override Facebook’s rules for them.
* * *
[8] http://en.wikipedia.org/wiki/Namespace
Web Standards
—Martin Kuplens-Ewart (see his bio in Contributors)
Problem
I want to create an innovative application that I can build on Facebook and also deploy to other platforms (such as OpenSocial, iPhone, etc.) in the future.
Solution
Build your application with standards-compliant techniques, including clean, semantic HTML (FBML) to mark up your content and page structure, hack-free CSS to style your application, and DOM scripting using JavaScript (FBJS) to interact with your application’s backend code to make the whole thing work.
Discussion
Crucial for the success of a Facebook application is constant innovation and experimentation. The best applications keep refining interactions, implementing new features, and developing new ways for their users to engage with their friends.
As you plan out your application, it may be worth preparing to structure it in two parts: the Facebook interface elements that are viewed by the user, and your application logic, which is hosted and accessed independently of the Facebook environment. This kind of separation between the layers of your application will be crucial if you intend to deploy to other platforms down the road. See Figure 6-1.
Figure 6-1. Separating interface and logic using Ajax calls
There are three elements to your standards-compliant development toolkit:
FBML (HTML), used for marking up content and establishing boundaries of elements and blocks of the page
CSS, used to add style and visual cues to guide your users, and