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.
Pingback: Sociogram Mobile: A Starter-Kit Application for PhoneGap and Facebook Integration | Christophe Coenraets()
Pingback: Sociogram: A Sample Application Exploring the Facebook SDK and the Graph API | Resource Mode()
Pingback: Come realizzare il proprio sito web collegato con facebook()
Pingback: Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration | Christophe Coenraets()
Pingback: Sociogram: A Pattern Software demonstrating AngularJS/Ionic and Fb Integration | PakUltimate()
Pingback: Sociogram: A Pattern Software demonstrating AngularJS/Ionic and Fb Integration | PakUltimate()
Pingback: Sociogram: A Pattern Software demonstrating AngularJS/Ionic and Fb Integration | PakUltimate()
Pingback: Facebook login javascript sample code - Official Login()