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.
Thanks for this and other great tutorials. Application looks awesome. Like the Facebook authentication.
Your tutorials are the best to get introduced to Backbone. Please keep them coming :)
Great sample,
Very helpful.
Thank you.
I see that you put the app id in the Facebook.js file, but where are you putting the app secret? Can you provide some guidance?
Thanks Christophe !!
this sample is great. might as well want to ask how change the tpl pages from html to php file. I tried changing it, but the links wont direct to php file. Please help
any idea how to run it locally I’m pretty new to nodejs and backbone
This puts sliced bread to shame.
Thanks for this! I would like to know what should be changed in order to run it on my localhost (under Apache)
Currently after clicking on “Login with Facebook” button, Facebook error message apear in the new window: “An error occurred. Please try again later.
I tried to change facbook.js channelUrl var to point the location, but it doesn’t help.
Thanks!
This a great starting point for getting started with backbone and facebook.
I downloaded the code and setup everything like you have. I keep having a strange issue.
If reload a page i get the error screen so i click retry and it works.
I keep getting the error message :”An active access token must be used to query information about the current user.” even though i’m clearly logged in.
The only things different is i’m running this on the Laravel framework and its using my app keys instead.
Hi Christophe!
Thanks for this tutorial! Have a question. What’s with javascript FB SDK, where is that file from? On regular FB web, JS SDK is included async from FB servers directly, and there’s no “offline” version. From where did you download this js file? (is it just take it from a browser after it’s downloaded async? )
What happens if FB updates their FB SKD library? How can we update to Phonegap app as well?
My other question, can we somehow use “longToken” with this set-up? From a mobile app perspective, we want our users to login once, and if possible, never again ( or once in few months ). Wouldn’t using standard web FB SDK library require user to login every 1h?
Looking forward to your answers!
Thanks,
Matija
Great work. Thank you for sharing this nice tutorial.