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.

Libraries

The application is buil using the following libraries:

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

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

  1. Nuno F Silva March 21, 2013 at 9:20 pm #

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

  2. Christophe Coenraets March 21, 2013 at 10:10 pm #

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

    • vaibhav July 29, 2013 at 8:23 am #

      Hi Christophe Coenraets,

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

      • venkat October 28, 2013 at 2:19 am #

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

  3. Paul March 22, 2013 at 2:14 am #

    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!

  4. Christophe Coenraets March 22, 2013 at 3:26 pm #

    @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" />
    
  5. Bertho March 23, 2013 at 11:57 am #

    Nice article…Thanks bro…:)

  6. John Kevin M. Basco March 25, 2013 at 1:07 am #

    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 – https://github.com/ccoenraets/backbone-cellar/blob/master/tutorial/mobile/android/BackboneCellarAndroid/assets/www/js/main.js

  7. Mikel March 27, 2013 at 11:18 pm #

    Woah!! This is great! Thanks!!

  8. Mike Smedley March 28, 2013 at 11:08 am #

    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

    • Christophe March 28, 2013 at 5:06 pm #

      @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.

      • Mike Smedley April 3, 2013 at 2:01 pm #

        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…

        • IVan May 26, 2013 at 5:16 pm #

          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? :)

          • abhijit July 22, 2013 at 4:34 am #

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

          • Tejas February 8, 2014 at 3:37 am #

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

  9. Amit Prajapati March 28, 2013 at 1:39 pm #

    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.

    • Amit Prajapati March 29, 2013 at 5:10 am #

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

  10. zsitro April 10, 2013 at 6:54 am #

    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 December 5, 2013 at 3:15 am #

      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.

  11. Mario April 19, 2013 at 4:34 pm #

    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 April 22, 2013 at 12:17 am #

      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.

  12. t3o April 22, 2013 at 5:48 pm #

    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
    #import

    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.”

    Thanks,
    t3o.

  13. hugocastalleda April 24, 2013 at 1:59 am #

    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

  14. Brian May 4, 2013 at 7:37 pm #

    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

  15. Bertho May 6, 2013 at 11:14 pm #

    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?

  16. Nathan May 14, 2013 at 3:35 pm #

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

  17. Arshad Syed May 22, 2013 at 3:29 pm #

    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.
    –arshad

  18. Rodney May 29, 2013 at 5:10 am #

    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)
    https://github.com/phonegap-build/FacebookConnect

  19. Rodney May 29, 2013 at 5:17 am #

    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 December 5, 2013 at 3:20 am #

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

  20. Naveen May 29, 2013 at 8:52 am #

    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 : http://i44.tinypic.com/289wyt3.jpg

  21. David Traver June 6, 2013 at 9:03 am #

    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?

  22. Satish Kumar June 13, 2013 at 3:00 am #

    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.

  23. Himanshu June 13, 2013 at 7:39 am #

    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 September 23, 2013 at 4:31 am #

      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?

  24. Dennis June 13, 2013 at 3:19 pm #

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

  25. Ankur Verma July 25, 2013 at 6:44 am #

    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.

  26. Ankur Verma July 25, 2013 at 6:45 am #

    ^^^

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

  27. DGun October 15, 2013 at 11:28 am #

    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 January 22, 2014 at 12:36 pm #

      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.

  28. Sai January 2, 2014 at 9:59 pm #

    Do you have Sociogram for angularversion instead of backbone?

  29. nida February 25, 2014 at 4:06 am #

    Hi
    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 :(

  30. Priyank March 6, 2014 at 8:20 am #

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

  31. Thargyee March 22, 2014 at 3:44 pm #

    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 May 5, 2014 at 2:08 pm #

      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

  32. Brameka March 27, 2014 at 3:49 am #

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

  33. 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!

  34. www.tv-grossvillars.de June 2, 2014 at 8:20 am #

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

  35. http://www.cgseniors.org June 8, 2014 at 6:13 pm #

    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.

  36. kolikkopeli.yolasite.com June 11, 2014 at 7:34 pm #

    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.

  37. casino bonukset June 12, 2014 at 1:44 pm #

    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.

  38. video spilleautomater June 13, 2014 at 10:38 am #

    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!

  39. Anoop June 19, 2014 at 12:52 am #

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

    Thankyou

  40. spelautomater July 1, 2014 at 9:18 am #

    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

Trackbacks/Pingbacks

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

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

Leave a Reply