Specifically, the application demonstrates:

• How to login and request permisssions
• How to access your profile, friends, and feed
• How to access a list of friends
• How to access a friend’s profile, friends, mutual friends, and feed
• How to post a message to your feed using a custom UI or using the Facebook native dialogs
• How to revoke the permissions granted to the application (useful during development)

Here are a few screenshots:

Source Code

The source code is available in this GitHub repository. This is still work in progress and I’ve only tested the app on iOS at this point. I’ll continue to update the code: there are things that can be polished and things that can be added.

Libraries

The application is buil using the following libraries:

• The Facebook plugin for PhoneGap
• Backbone.js
• Ratchet
• Fastclick
• jQuery
• PageSlider

These dependencies (except the first one) can easily be removed to work with your own stack.

I’ve recently been working on a few applications that integrate with Facebook. As a reference for myself and other developers building similar applications, I thought it would be useful to put together a sample application that demonstrates some commonly used integration scenarios and workflows when using the Facebook JavaScript SDK and the Graph API. So, Sociogram is a sample application that demonstrates how to:

• Load the Facebook SDK
• Login with Facebook
• Request specific permissions
• Revoke permissions
• Get data (list of friends, mutual friends, feed items, etc.)
• Post to the wall using your application’s custom UI or the Facebook dialogs
• Listen to Facebook events such as status change, etc

The Graph API provides access to a lot more data and actions, but you are essentially always using the same API with a different path into the graph.

There are other examples out there, each of them built around different use cases. This application is built with Backbone.js using a single page architecture, but the code can easily be reused in a different context.

Running the Application

Click here to run the application in your browser.

Source Code

The source code is available in this GitHub repository.

Mobile App Version

In my next post, I will share a PhoneGap version of the same application (using the PhoneGap Facebook plugin).

Disclaimer

This is a sample application, not a production application. Some trade-offs were made to keep the code generic, simple and readable.