Sociogram Mobile: A Starter-Kit Application for PhoneGap and Facebook Integration

A few weeks ago I shared Sociogram, a sample application that demonstrates how to use the Facebook JavaScript SDK and the Graph API. A number of people have asked me for a Mobile version of the application. So here is Sociogram Mobile: a sample application that demonstrates how to integrate Facebook social features in a PhoneGap application.

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.


The application is buil using the following libraries:

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

  • You’re the man !!! :D
    Thank you so much!

  • Christophe Coenraets

    @Nuno. You are welcome. Hopefully it is worth the wait :)

    • Hi Christophe Coenraets,

      I use this apps in android phone but its not working in android. its not going to login screen.

      • ya for me also same problem…………. please help anyone……..

  • Thanks for this! I’m sure this will be a great asset to the PhoneGap community.

    I haven’t used the Facebook SDK since 2.0. I see now that there is a config.xml instead of Cordova.plist.

    The PhoneGap Facebook SDK instructions on Github for iOS are lacking the plugin name and value that should be placed in the config.xml.

    Do you know what the field should read?

    Thanks in advance!

  • Christophe Coenraets

    @Paul. The values are the same than the ones you put in the old plist file. Here is what I used:

    <plugin name="org.apache.cordova.facebook.Connect" 
                  value="FacebookConnectPlugin" />
  • Nice article…Thanks bro…:)

  • Thank you very much for this article! I’m learning a lot from your posts! =D

    Anyway do we still need to unbind events when removing elements from the DOM? Or is it done automatically? Since I can’t see in the source code that you are unbinding events when removing pages in the DOM. But in some of your tutorial you are unbinding events when removing elements in the DOM to prevent memory leaks and ghost views –

  • Mikel

    Woah!! This is great! Thanks!!

  • May be an incredibly dumb question, but do you still need to do all the configuration and setup for the Facebook plugin, or does this magically sort it all out for you? :D

    • @Mike: If you build locally, you still need to go through all the configuration steps. If you us PhoneGap Build, it’s just one line in config.xml.

      • Bleurgh, in that case I must be doing something wrong :(

        I’ve cloned your repository, created my config.xml and added:

        Zipped it up to PGB, but I’m not getting past the ‘Login with Facebook’ screen…

        • Same as me. I am not able to go into application. My build works nice, but when i click on login button, nothing happens :(

          Can you share with us your xml config file? :)

          • I am having same issue. build is good. but when i click on login with fb nothing happens

          • Tejas

            Same with me too.. I’m not able to go past the login screen.. When I click on login, nothing happens.. Any help please!

  • Hi @Christophe Coenraets Awesome app, can you help me please. when i am add plugin to it say Uncaught TypeError: Object # has no method ‘exec’,

    i have add facebookpluign with some changes but i can’t resove it.

    • I reove it, problem is am test in android so i need to change cordova.js

  • Thanks for the article. I’m just wondering what is the point in using a custom, bugful facebook plugin instead programming like a webapp? I mean you can do the exact same thing with the native facebook js sdk. Using this phonegap plugin would cause me a lot of trouble. Just think for example you can’t compile your project in phonegap build site. I really want to understand, please don’t take this comment as a trolling. Thanks.

    • netalex

      others says that this code will work with phonegap build. in any case having a way to shows the phonegap app as a native mobile app to fb means you can do more than you can in a webapp.

  • Mario

    Hello. I’ve loaded your scripts from Github and uploaded it to the Adobe PhoneGap Build Server. I installed this but when I click on Login with Facebook nothing happens. I have installed the Facebook app. What am I doing wrong? Thank you

    • Cayle

      I am having the same issue with phonegap build – get to the login page and looks like fb is not being initialized correctly. When I run it within Xcode it works fine. Any help would be appreciated, thanks.

  • t3o

    I all, I’m new to phonegap and facebook integration and I’m having some troubles:
    What I’ve done:
    1) I’ve copied src/ios/ folder inside the plugins folder of my xcode prj.
    2) I’ve added this line inside the plugins tag of my config.xml file:
    3) I’ve copied the js scripts (cdv-plugin-fb-connect.js and facebook_js_sdk.js) inside my js folder under www and I’ve place a reference in the index.html of the simple sample included inside the plugin zip.
    When I build the application, It hangs giving me an error at this line of Facebookconnectplugin.h

    Any idea?

    @zsitro: I really like your point of view, can you suggest me a tutorial or some suggestion about it? I’ve already tried, but when I call FB.login method I get “An error occurred. Please try again later.”


  • hi i am trying to run the tutorial but when running android shows me the following error in console (Uncaught TypeError: Object # has no method ‘exec’) that I can do to make this error not appear

  • Thanks for the starter app! For those of you who were having problems, I solved the non-responsive login button issue by updating the following files to the latest and greatest, then changing the javascript include in index.html to reflect cordova-2.7.0.js since I’m running PhoneGap 2.7.0. That did the trick for me and hopefully it helps someone else.

    core:lib brian$ cp /backupwww/cordova-2.7.0.js .
    core:lib brian$ cp /backupwww/cdv-plugin-fb-connect.js .
    core:lib brian$ cp /backupwww/facebook_js_sdk.js .
    core:lib brian$ rm cordova-2.5.0.js

  • I found some error when running in my device…

    plugin-fb-connect was not found. Though all have inputted the index.html file. Has anyone experienced the same thing? How do I fix this?

  • Nathan

    Do you have an example of this setup using JSON or one of your adapters?

  • Arshad Syed

    Christophe, thanks for putting together the app.

    Our web service uses social logins (Facebook and Twitter) for login. We are using PhoneGap 2.5 to build our iOS app. We’d also like our iOS app to provide the ability to login into our web service using FB and Twitter and then retrieve protected data from our web service.

    Please point me to any example that I should look at for implementing this feature in our app.

    Thanks a lot for your help.

  • Hi Christophe,

    Thanks, this is really useful, however it’s a little confusing how to use it – for example, on this page for Adobe Build it talks about submitting Android keys to FB – do we need to do that?

    Also- are we supposed to replace the FB AppID in app.js withour own? (I just want to get it up and running to disect it)

    • Jack

      Did you figure this out? I’m having trouble with the same thing and I can’t determine what the settings for the FB app need to be.

  • Also, the part of FB is a bit vague – on a website I put in the URL of the website, but I don’t have that here – should I be making an iOS and Android Native App on Facebook?

    • netalex

      the plugon contains the native sdk, so it seems it is as you say.

  • Naveen

    Hi Christophe Coenraets, Thanks for this great tutorial. :)

    But i am running into a problem when i run this on android emulator.When i click on “Login with Facebook” on homepage i am getting the following alert dialog.But i’m not able to find the cause of the error.Please if you could look into it and tell me the cause it would be helpful.

    Screenshot :

  • I am working with a team to expand the Alice Baker Library in Eagle Wisconsin. As a part of our building project, we wish to create a relationship map of the entire community, based upon face-to-face interviews with hundreds of residents in our community. I have not been able to find any sociogram program that would help us manage the data and view the power relationships within the community. Do you know of any such program?

  • Satish Kumar

    How about the security concerns when writing Mobile Apps using PhoneGap to connect with Facebook by OAuth Aurthentication model. We will have to specify the Client Id & Client Secret which we got by Regitering the App with Facebook. If I create a WebApp this is easily exposed .
    Does phonegap app solves this Security issues.

  • Hi,

    I have created new phonegap project and integrate Socilgram Mobile application, after successfully integration I am getting following error, when I will click to Login button. Please help me.
    Uncaught TypeError: Object # has no method ‘exec’ at file:///android_asset/www/lib/cdv-plugin-fb-connect.js:29

    • gary

      I’m getting this too. Let me know if you managed to fix it.
      from what I can see, the inclusion of “cordova.js” (or phonegap.js)
      should have created the cordova variable, but for some reason it does not. maybe the facebook plugin should wait/poll? until cordova.js loaded successfully?

  • Than for such a great app.
    Has any one tested this app on diffrent paltfroms other than ios.if yes how does it perform.

  • Ankur Verma

    to resolve the issue with not getting past the Login With Facebook button – try using the latest release of cordova.js, cdv-plugin-fb-connect.js and facebook-js-sdk.js (note that the name of the file has changed from facebook_js_sdk.js) – that helped me resolve the issue and get the sample app working perfectly.

    Thanks a lot for this – great work.

  • Ankur Verma


    And don’t forget to change the app id in app.js to the one you registered with on facebook during the configuration steps.

  • DGun

    Has this sample been updated for the latest Phonegap 3 and the Phonegap build environment?

    It builds fine and downloads via hydration but nothing happens when you click the login button. This seems to be a common thread with most of the phonegap connect pluging examples on the web. It would appear that the FB.init function is not being called successfully.

    Is there a self contained sample that just demonstrates the facebook login working?

    • Wey

      I have the same problem.

      I don’t think this starter kit works out of the box anymore. The libs being used are outdated so if you want to still use this kit, you have to tweak it around.

      Nonetheless, it’s a great starter kit.

  • Sai

    Do you have Sociogram for angularversion instead of backbone?

  • nida

    i am having the same problem
    when i run it using phonegap build android –emulator, the applications opens fine but when i click the login button nothing happens,please help :(

  • Priyank

    file:///android_asset/www/lib/cdv-plugin-fb-connect.js: Line 25 : TypeError: Result of expression ‘cordova.exec’ [undefined] is not a function.

  • Thargyee

    It seem older version of cordova-2.5.0.js not match with new plugin. I replace both cordova.js and cdv-plugin-fb-connect.js files with new version files on git repo, reattach in index.html. Then everything work fine. Excellent sample. Thank so much.

    • Nikhil

      Can you tell me exact steps to follow for android? I tried this but its not working and I am unable to figure out whats going wrong? Login screen appears but nothing happens on click on login button

  • Seriously Bro, I never comment on stuff, but this is worth it to me. Lovin your work and please keep it coming.

  • Pingback: Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration | Christophe Coenraets()

  • Hi! I could have sworn I’ve been to this blog before but after browsing through some of the post I realized it’s new to me.
    Anyhow, I’m definitely delighted I found it and I’ll be book-marking and
    checking back often!

  • Hello friends, its wonderful piece of writing concerning educationand
    fully explained, keep it up all the time.

  • It’s remarkable to visit this site and reading the views of all mates about this article, while I
    am also keen of getting know-how.

  • I think that everything published was actually very logical.
    But, what about this? what if you composed a catchier
    post title? I ain’t suggesting your content is not good., however suppose you
    added a headline that makes people want more? I mean Sociogram Mobile: A Starter-Kit
    Application for PhoneGap and Facebook Integration | Christophe Coenraets is a little vanilla.
    You might look at Yahoo’s front page and note how they create news headlines to grab viewers to
    click. You might try adding a video or a related picture or two
    to grab readers excited about what you’ve got to say.
    In my opinion, it would make your posts a little livelier.

  • whoah this weblog is fantastic i love reading your posts.
    Stay up the good work! You recognize, lots of persons are searching
    around for this info, you could help them greatly.

  • I used to be recommended this website by means
    of my cousin. I’m no longer positive whether this put up is written through him as no one else realize such designated approximately my difficulty.
    You’re wonderful! Thank you!

  • Anoop

    Am new to phonegap ad pure javascript coding. your code really helps me.


  • Nice blog! Is your theme custom made or did you download it from somewhere?

    A design like yours with a few simple adjustements would really make my
    blog jump out. Please let me know where you got your theme.
    Appreciate it

  • Pingback: Sociogram: A Pattern Software demonstrating AngularJS/Ionic and Fb Integration | PakUltimate()

  • Dear Christopher is it possible to modify this code source because i wanna design a mob app that will • – Push notifications send messages to your customers whenever you’d like using our easy to app
    – GPS directions for the venue that other users have checked into.
    – Statistics of users checked into the venue categorized by age and gender.
    – Tell-A-Friend feature lets your customers take your business viral with built in sharing capabilities over Email, SMS, Facebook and Twitter etc.
    – Photo feature that will allows users to take and upload

    so i wanna get this design and try to modify it, let me know if is it …


  • I downloaded this awesome code and run it on android. when I click on Facebook login Button, it prompts error “cordova facebook connect plugin failed on login! class not found.” what do i do. thanks

  • anuj

    Not Working on android.

  • honeGap and Facebook Integration | Christophe Coenraets is a little vanilla.

  • Hi Chris,

    I’m new on using Facebook Phonegap plugin.

    Could you tell me step-by-step, how to read api from Facebook then I can get information user from Facebook??

    I’m newbie here. Please share your magic. Cheers.

    Thank you!

  • Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed.