Facebook Cookbook - Jay Goldman [59]
NOTE
You should be able to look up any of the tags covered in this chapter by adding them to the end of the Facebook Developers Wiki URL. As an example, if you want more info on fb:name, go to http://wiki.developers.facebook.com/index.php/Fb:name.
What Is FBML?
Problem
When I hang out around other Facebook developers (at a Facebook Developer Garage event, say), sometimes all I hear is FBML, FBML, FBML. I just got a handle on HTML! What’s this new thing everyone is going on about?
Solution
FBML is Facebook Markup Language, an extension of HTML that works within Facebook Canvas pages (and some other spots, such as Profile Boxes) to render your content within the constraints of the Facebook Platform Sandbox. The FBML parser on Facebook’s servers takes in your FBML, does its parsing magic, and spits out HTML, which your users’ browsers render and display. FBML is very similar to HTML (and you can use a lot of regular HTML mixed in with your FBML), and is generally recognizable because all of the tags start with “fb:”.
You can find documentation on every FBML tag on the Facebook Developers wiki at http://wiki.developers.facebook.com/index.php/FBML, and a high-level spec for FBML at http://wiki.developers.facebook.com/index.php/FBMLspec.
Discussion
Google touts that not needing to learn a new language is one of the big advantages of OpenSocial. It’s not fair to call FBML a new language, since it’s entirely based on HTML and is really just an extension that makes available a number of very handy tags.
Let’s say that you want to insert a friend selector into your Facebook Canvas page so that your users could pick a friend to send a gift to. You’re focused on user experience and you know that your users might have very long lists of friends, so you want to implement an in-place suggestion mechanism as they type.
If you were building your own web app, you’d have to create a text field, write a bunch of Ajax to take keydown and onchange events and pass them to your server, write a server-side function to receive them and return suggestions encoded in something like XML or JSON, and finally add some more client-side script to receive the suggestions, display them, and handle selections within the list. If that’s something you’ve done before, you might have a library you’ve already written to handle some of it. If you’re using a JavaScript library such as jQuery, you might use something like PengoWorks’ Autocomplete plug-in (http://www.pengoworks.com/workshop/jquery/autocomplete.htm).
Since you aren’t building a standalone web app, and since I’ve gone to the trouble of setting up such a carefully contrived example to prove that FBML can make your life easier, you’re probably thinking that there must be a better way. Well, there is! Just drop the following code into your FBML page (or try it in the FBML Test Console at http://developers.facebook.com/tools.php?fbml):
That’s it! If you include that inside a form, the Facebook ID of the user they entered will be added to your POST request (the variable will be called friend_selector_id by default, but you can override it by specifying an idname as a parameter inside the fb:friend-selector tag).
NOTE
If you’re looking for more or different info than this chapter provides, I recommend the excellent FBML Essentials book (O’Reilly), written by Jesse Stay. Find it at better bookstores everywhere, including O’Reilly’s own store at http://oreilly.com/catalog/9780596519186/index.html.
Categories of FBML Tags
Problem
There sure are a lot of FBML tags! Surely there must be some way to group them together to make some sense out of them.
Solution
Damn skippy! There sure is. FBML tags can be organized into types based on their intended use:
Social (tags that leverage or expose the social graph, such as fb:name)
Sanitization (tags that sanitize potentially insecure or dangerous content, such as fb:swf)
Design (tags that provide Facebook-style elements much more easily than building the HTML, such as fb:tabs)
Component