Rachel and I attended a presentation by the creators of the Facebook API about the design of the platform. Rough notes after the jump.

Building the Facebook Platform

• Ari Steinberg, Facebook
• Charlie Cheever, Facebook

Comparisons to Flickr; they were inspired, but wanted to create something more intuitive.

Efficiency was a tradeoff between a small API (Functions that do a lot) and data efficiency (the least data returned possible, esp. given privacy considerations.)

Ways to increase API efficiency:

• Specify properties that you want back.
• Pass arrays of objects (e.g. “friends”) to query, all at once.
• Even better: use FQL to do everything in one operation (e.g. “give the status of all the friends of a certain user, status which has been updated in the last hour.”) This looks like SQL, but it’s not really running on the DB. It’s a language on top that still deals with privacy and security at the app layer, and avoids computationally unreasonable queries.

Ways to make site integration easier:

• Create a simple set of UI elements for Facebook apps (see Anatomy of a Facebook App)
• News Feeds and Notifications seem like important vectors for increasing app usage.
• Canvas pages give developers a lot of flexibility, but keep users “inside” the Facebook site

Why FBML?

• IFrames are supported, but have many issues (fixed size, don’t load until after the main page, errors from smaller server show through, allows tracking of who views user profiles, allows JS to redirect out of page.)
• Flash: encourages animation and music playing, profile reader tracking also possible, developer pool restricted by commercial tools.
• FBML, instead, is a sanitized version of HTML. Strips unwanted tags, unwanted CSS, disallows profile viewer tracking, can be plunked right into the Facebook context and render nicely.
• FBML is served on a push basis (at least for profile boxes), as Facebook can then ensure quality of service and prevent the tracking of profile views. For example of the latter, images referenced in CSS or HTML are cached on Facebook’s site and requested from there.
• FBML has blocks of content (e.g. “fb:user”) which allows for whole text tracts to disappear when disallowed, rather than have specific calls (e.g. “fb:username”) return the empty string and thus show holes in what should be complete sentences.
• fb:ref allows developers to efficiently broadcast content (e.g. a weather application) by allowing the main FBML snippet to change infrequently, while the referenced one can change often.
• Mock AJAX: Facebook’s servers will make requests to your server on behalf of the user’s browser instead of the user’s browser going directly. Your server then returns FBML and Facebook’s servers tell your browser how to update the page. This has the additional benefit of keeping complicated user data processing on Facebook’s servers.
• FBML is simple. For example, no conditional content based on profile ownership. This was allowing app developers to show ads to friends, unbeknownst to profile owners. Their solution was to have the conditional blocks only set those blocks to visibility:hidden, which leaves white gaps where that content is hidden. So developers have an incentive not to have vastly different content depending on profile ownership (example of music player app with administrative links.)

Note: FBML also sanitizes Javascript, in the form of FBJS

The main thing that they learned was this: When designing an API, many, many problems as complicated as these can be solved when you are willing to write your own parsers.

Growth Potential:

• Virality: Use the right channel for the job (News Feed, Profile integration, Requests, Notifications.)
• Requests example: UI was standardized so that users couldn’t be tricked into sending requests to all of their friends.

Related Posts:

• Analytics 2.0 (April, 2007)
• CSS Cleanup (April, 2008)
• Optimizing the Frontend (April, 2007)
• All Your Scrabulous are Belong To Us (January, 2008)
• Empirical Design Using Analytics (April, 2007)

This entry was posted on Tuesday, November 6th, 2007 at 12:51 pm and is filed under coding, instructables. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.