Facebook App Development 101: The Facebook Platform

Last month, half a billion people used a Facebook app. Next month, about 7,000 new apps will be deployed.

The apps out there today include Mafia Wars and Pet Society, Living Social and Texas Hold 'Em, FarmVille and Café World. The companies that have deployed these apps are raking in mind-numbing revenues, and the people who use them aren't giving them up anytime soon. (Check out the Facebook Application Directory.)

Want to be the author of one of next month's 7000 new apps? There are a few things you will need to understand, and this debut article of a series provides a high-level overview of the Facebook application development platform.

The Facebook Application Platform

Facebook's application platform is simple, both in concept and execution. At its highest, most abstract level, it is a client-server architecture with two distinct layers of presentation:

1. The Facebook platform itself, which receives and redirects the call from the client
2. An application server (chosen and implemented by you, the developer), which hosts the application itself

Any additional components in the application reside either inside that application server or somewhere behind it, again at the developer's discretion.

But the Facebook platform (whose internal architecture is transparent, for our purposes) isn't simply a high-powered router; in the pitch-and-catch between your client and application, Facebook can insert a great deal of familiar Facebook functionality, by way of APIs.

The social graph is the core concept around which Facebook applications are built. It is a hierarchy of objects that enable the Facebook social experience, starting with people and including things associated with them, like profiles and photos. Around these are environmental objects, including pages with which people are associated, events, and so on.

The Graph API

The objects of the Facebook social graph are created, accessed and managed within the context of the Graph API. This is the programmatic interface with the social graph and its object population, and its ease of use is something to behold. Every object in the social graph--every person, every page, every photo, etc.--has a unique ID, and can be directly accessed via the Graph API with nothing more than that ID (assuming you have the necessary credentials). When you see a username or a page name associated with a user or page, you're basically seeing an alias for that object ID.

Once you understand this key concept, the rest of the Facebook programming dynamic follows easily. If everything is an object, what follows is to create relationships between those objects--and that is the essence of Facebook, from top to bottom.

Within the Graph API, the next step in application development is the Facebook application design concept--Social Design, which encourages design that implements socially interactive leveraging of social graph objects to optimize identity, utility, and collaboration. (If this is all beginning to seem like an undergraduate sociology seminar, well, just settle in--you ain't seen nothing yet ... )

Programmatic manipulation of Graph API objects is conventional, with each object having fields for passing data, connections to other objects, and so on. Some objects can have their connections updated in real time. Objects are retrieved from and posted back to Facebook storage by means of HTTP GET and POST.

The list of Graph API objects is long enough to be mildly confusing, but makes categorical sense after brief examination: User, FriendList, Group; Photo, Album, Video, Note; Status message, thread; and so on. (We'll dig into some of these and play with them a bit in a later article.)

Facebook Application Code

Once you have your application designed, and have identified the objects that are important to the app, it's a matter of creating the application code. Typically, this is PHP or JavaScript (Facebook offers developers SDKs for both), and you now have the option of working in iOS or Android (there are now SDKs for these, too). Python and C# are also popular (but there are no Facebook SDKs for these as yet).

That code lives on your application server, and is called from Facebook when a Facebook user invokes your app.

The Canvas Page

This is the space on the Facebook page where your app runs. If you've used even a few Facebook apps, you're used to seeing this space: it's below the Facebook menu bar, taking up the first 760 pixels on the left-hand part of the page. Facebook pulls contents for this space from your app server in the form of whatever HTML, JavaScript and/or CSS you provide.

Connecting to the Facebook Platform from the Outside

Then there are the applications that live outside of Facebook, but which would benefit from being tied to Facebook. You may have a standalone app that you don't want hosted with Facebook itself, but that you would like to connect to the Facebook platform. There are a number of tools for achieving this.

Open Graph Protocol

The Open Graph Protocol allows you to convert Web pages and other external objects into objects in the Facebook social graph. By means of Open Graph tags, you can turn your page into essentially a Facebook page. You've seen a lot of this lately, no doubt, on Amazon, the major Internet news sites, YouTube and so on. This allows websites external to Facebook to take advantage of Facebook's user population, distributing awareness of their pages to the Facebook community at the discretion of Facebook users.

Social Plugins

Now we're starting to get down to it, with practical tools that enable your particular app to do the tricks that make Facebook applications a success. The Social Plugins are chunks of code that are easily configured and embedded in your app to implement that most familiar Facebook functionality. They include:

• Like (button)--Shares a Web page back to a Facebook user's profile page.
• Like (box)--Allows users to Like a Facebook page and view its stream from an external website.
• Send--Allows a user to share content from your Web page to their Facebook friends.
• Registration--Signs users up on your site via their Facebook account.
• Comments--Captures user comments on your site.
• Recommendations--Allows you to promote your website pages to Facebook users.
• Activity Feed--Displays a user's Facebook friend activity on your site.
• Login--Displays the pictures of a Facebook user's friends (who are already users of your site) when they log onto your site.
• Live Stream--Allows users to share comments during a live event.
• Facepile--Similar to Login, it displays Facebook pics of users who have Liked your page.

Social Channels

Social channels are high-level connection devices--person-to-person equivalents to the object connections happening in the apps themselves. With these channels, you can pass content from your app or website to the Facebook platform, allowing Facebook users to add their blessing.

The social channels include:

• News Feed. Move content directly to the News Feed, by means of the Like button, Feed Dialog, or the Feed Graph object.
• Requests. Allow users to make their friends aware of your content manually, or programmatically do so from your app by way of users who have authorized your app on Facebook.
• Automatic Channels. Facebook passively pushes traffic to apps and websites by means of bookmarks, notifications, search, etc.

This is most of the Facebook world, vast though it may be. There's a lot going on under the hood, but it isn't terribly complicated. Facebook has gone out of its way to be easy to use, easy to integrate with and friendly at the highest and lowest levels. The rest of this series will go down through these layers, one at a time.

Upcoming: a deeper dive into the Graph API objects and how to access and programmatically interact with them.

About the Author

Scott Robinson is a writer and speaker in the IT and social media fields. His eclectic career includes a decade as a systems engineer doing design work for NASA and the U.S. Departments of Energy and Defense, more than a decade designing software for business and industry, and years of teaching and speaking, research in neuropsychology and social psychology, and music journalism. His work has appeared in publications ranging from the Wall Street Journal to Rolling Stone. He can be found at ScottRobinson99 on Facebook.