Sociogram: A Sample Application Exploring the Facebook SDK and the Graph API

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.

33 Responses to Sociogram: A Sample Application Exploring the Facebook SDK and the Graph API

  1. Mike February 11, 2013 at 3:14 am #

    Thanks for this and other great tutorials. Application looks awesome. Like the Facebook authentication.

    • Thirunavukkarasu June 26, 2014 at 2:21 am #

      Christophe,

      Actually while i tried to deploy the application with my “app_id” the /me section is working as expected, but whereas the /me/friends api call is returning an empty page ? Is this because of v2 FB API change ? Please clarify!

      Regards,
      Thiru

  2. Charan February 11, 2013 at 7:07 pm #

    Your tutorials are the best to get introduced to Backbone. Please keep them coming :)

  3. Amir February 12, 2013 at 11:59 pm #

    Great sample,
    Very helpful.
    Thank you.

  4. Jan February 13, 2013 at 6:36 am #

    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?

  5. Dipock Das February 18, 2013 at 7:25 pm #

    Thanks Christophe !!

  6. Eduard March 19, 2013 at 12:19 pm #

    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

  7. himilc March 19, 2013 at 1:35 pm #

    any idea how to run it locally I’m pretty new to nodejs and backbone

  8. Travis March 22, 2013 at 8:59 pm #

    This puts sliced bread to shame.

  9. Shlook April 9, 2013 at 8:36 am #

    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!

  10. Matt Tullett May 13, 2013 at 6:28 pm #

    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.

  11. Matija May 21, 2013 at 4:35 am #

    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

  12. Rajkumar June 9, 2013 at 8:46 am #

    Great work. Thank you for sharing this nice tutorial.

  13. Sau Hi September 30, 2013 at 8:51 am #

    How about Facebook SDK for PHP, I want to use it with php code please.

  14. Rajesh Kumar November 11, 2013 at 3:39 am #

    hi

  15. AB January 14, 2014 at 11:34 am #

    Thanks for this great tutorial! On the demo I am not able to see my feed. Any advice?

  16. Douglas K.M. March 5, 2014 at 8:15 am #

    Thanks for the sample apps but could you please do another one that combines backbone.js, Facebook and Parse.com. Basically a Sociogram that can save some data to Parse.com and retrieve the data as in the case of the Employee Directory app. So that one can do a search through a collection and read the details of a selected item. This would make sense due to Facebook’s ownership of Parse.com.

  17. Obaid April 2, 2014 at 12:49 am #

    The sample app is not working. When I click on ‘Login with Facebook’ it gives the following error: Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

  18. hack facebook password mac software April 9, 2014 at 12:19 am #

    Note that this estimate not include taxes that may apply.
    Even though there are several companies that sell these services, it is very much
    important to do a background search of the company.
    When your fans click on the offer and if they are a real “passionate” group, chances
    are high that they’ll complete the CPA offer that you have.

  19. This means that only certain ones are able to be encountered in this
    particular version. Some contain puzzle games, Adventure games
    as well as card games. mon trading cards, the Lee County sheriff’s office stated, according to
    an article then in the “Naples Daily News.

  20. lawyer advice April 20, 2014 at 4:37 am #

    What’s up, all is going fine here and ofcourse every one is sharing facts, that’s
    in fact excellent, keep up writing.

  21. hay day addiction May 23, 2014 at 4:50 am #

    Go for the GOLD BULLION, it is the true origin of money, the profession and possession of it should be first and foremost not the latter, seek ye first the Gold Bullion Profession and Possession, and with skilful management all things will be added unto thee, no
    bank loans or financing needed. Do not confirm that you want to send
    the gift, instead go through each of the tabs again, and select exactly the same friends in each window.
    The difficult with most of these formats relates to both cost and relative effectiveness.

  22. successful blogger June 3, 2014 at 10:49 pm #

    Hi! I simply want to offer you a big thumbs up for the great information you have got right here on this post.
    I’ll be coming back to your site for more soon.

  23. Esteban Gamboa June 9, 2014 at 2:08 pm #

    Hi Christophe,

    This is the first comment I do here, and trust me, I’ve been using this blog for a long time now.
    You are a big reference within my teams. Any issue I face there is something here to help me through.

    I have nothing more to say, just thank you for your mission and passion.

    You help to make the WWW better.

  24. this hyperlink June 23, 2014 at 9:25 pm #

    magnificent submit, very informative. I wonder why the
    opposite specialists of this sector do not realize this.
    You must proceed your writing. I’m sure, you have a
    huge readers’ base already!

  25. tap issues July 13, 2014 at 9:47 pm #

    Ahaa, its nice dialogue concerning this post
    at this place at this webpage, I have read all
    that, so now me also commenting at this place.

  26. jade July 16, 2014 at 10:10 pm #

    guys. what if I’m going to copy only the login and logout? any suggestions?

  27. open online store July 19, 2014 at 12:16 am #

    My brother recommended I might like this blog. He was
    once entirely right. This submit actually made
    my day. You cann’t imagine simply how so
    much time I had spent for this info! Thank you!

  28. top ten website builders July 24, 2014 at 12:30 am #

    May I simply just say what a relief to find somebody that really knows what they are talking
    about on the web. You definitely understand how to bring a problem to light and make it important.

    A lot more people need to look at this and understand this side of your story.
    I can’t believe you are not more popular given that you definitely have the gift.

Trackbacks/Pingbacks

  1. Sociogram Mobile: A Starter-Kit Application for PhoneGap and Facebook Integration | Christophe Coenraets - March 21, 2013

    [...] few weeks ago I shared Sociogram, a sample application that demonstrates how to use the Facebook JavaScript SDK and the Graph API. A [...]

  2. Sociogram: A Sample Application Exploring the Facebook SDK and the Graph API | Resource Mode - March 22, 2013

    [...] : Click here This entry was posted in Development, Open Source Framework on March 22, 2013 by [...]

  3. Come realizzare il proprio sito web collegato con facebook - December 23, 2013

    [...] Sociogram รจ un sito web di esempio che spiega come poter realizzare in davvero poco tempo un proprio sito web connesso con facebook. Gli utenti potranno loggarsi tramite facebook ed essere sempre riconosciuti se utilizzano facebook. Ormai chiunque ha una sessione di facebook aperta nel proprio browser, quindi sarebbe davvero perfetta da integrare al proprio sito web. [...]

  4. Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration | Christophe Coenraets - April 9, 2014

    […] Sociogram, a starter project demonstrating how to integrate with Facebook in your mobile and web […]

Leave a Reply