Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration

About a year ago, I blogged Sociogram, a starter project demonstrating how to integrate with Facebook in your mobile and web applications.

A year later, it’s time for a makeover: Here is a brand new version of Sociogram, built with AngularJS, Ionic, and the OpenFB micro-library I shared earlier this week.

Sociogram is a sample application that demonstrates how to:

  • Login with Facebook
  • Request specific permissions
  • Revoke permissions
  • Get data (list of friends, mutual friends, feed items, etc.)
  • Post to your feed

The application also demonstrates some cool Ionic features such as:

  • Sliding Menu
  • Pull-to-Refresh (in Feed)
  • “Loading…” UI (while waiting for the feed to load)

Try it Here

Click here to run a hosted version of Sociogram and access your Facebook data. Resize your browser window and make it narrow to simulate the screen size of your phone.

Source Code

The source code is available in this repository on GitHub.

Getting Started

To run the sample application on your own system:

  1. Create an Ionic project
  2. Add the inappbrowser plugin to your project
  3. cordova plugins add org.apache.cordova.inappbrowser
    
  4. Replace the www folder of the Ionic project with the www folder in this repository
  5. Create a Facebook app here: https://developers.facebook.com/apps. In the advanced settings, make sure you declare a “Valid OAuth redirect URI”. For example, if during development you access your application from http://localhost/openfb/index.html, you must declare http://localhost/openfb/oauthcallback.html as a valid redirect URI. Also add https://www.facebook.com/connect/login_success.html as a Valid OAuth redirect URI for access from Cordova.
  6. Copy the Facebook App Id and paste it as the first argument of OpenFB.init() in the run() function in app.js.
  7. To run the app in the browser: Load index.html from a location that matches the redirect URI you defined above. For example: http://localhost/openfb/index.html
  8. To run the app in Cordova: Build the Ionic project and run it as a Cordova app on your device

login

menu

feed

pull

profile

share

81 Responses to Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration

  1. Ross Martin April 9, 2014 at 5:28 pm #

    Thanks, I’ll be needing this soon in an Ionic app :~)

    I’m curious… what are your next initiatives with Proxxi?

    Would you rather have developed Proxxi using Ionic versus using Topcoat and jQuery?

    • Ross Martin April 10, 2014 at 2:42 pm #

      The only time I’ve ever been able to get a response from you is by finding a bug in your code.

      Guess I better get on it.

  2. Matt April 9, 2014 at 6:41 pm #

    Thanks Christophe! This is great! Quick question: is it possible to get login to work with the native facebook application on the phone instead of popping up a mobile browser?

  3. seba April 10, 2014 at 4:41 am #

    For a self-proclaimed ‘performance obsessed’ framework, I find the performance of this application quite bad. Only my iPhone 5s seems to give somewhat reasonable performance. Even on my Galaxy S4 the scrolling is quite stuttery.

    I like what ionic is trying to do and the angularjs integration, but I haven’t been impressed with the performance so far compared to Sencha Touch.

  4. ghprod April 12, 2014 at 2:50 am #

    Its works perfectly in my emulator device :D

    Thanks

  5. cloyd April 13, 2014 at 10:09 pm #

    hi, this is awesome. what about twitter and instagram?

  6. Adam April 14, 2014 at 2:37 pm #

    Hi this is great! thanks!

    One question though. How did you configure facebook? I keep getting the error “Given URL is not allowed by the Application configuration.”

    • Brandon April 24, 2014 at 12:57 am #

      I’m having the same issue…It works great on local device via a browser and in fb settings i uses http://localhost/~user/Sites/sociogram/www/oauthcallback.html. In the emulator and on the device it fails with “Given URL is not allowed by the Application configuration.”

      • Juan Octavio Palazuelos May 7, 2014 at 12:43 pm #

        In order to fix that you must change your init line

        openFB.init(‘[FB_APP_ID]’, ‘https://www.facebook.com/connect/login_success.html’, window.localStorage);

        I have it working with Cordova 3.3 on iOS 7.1

        Cheers

        • Brandon May 12, 2014 at 9:28 pm #

          I made this change and got a blank screen…

          • Staryy September 23, 2014 at 10:54 am #

            Same here. It works on localhost, but on the emulator (or on device) I get a blank screen (‘Success’ text is displayed on the screen) when I have the redirect url set to https://www.facebook.com/connect/login_success.html

  7. Guilherme April 15, 2014 at 6:37 pm #

    Hello, i can’t get this to work on emulator device or the actual device. It stops in a blank page when i’m trying to log in with facebook.

    Could you help me?

    Thanks

    • starkcoffee April 20, 2014 at 3:32 pm #

      This happens for me too.

      • starkcoffee April 20, 2014 at 4:01 pm #

        It is stuck on that https://www.facebook.com/connect/login_success.html page. When I closed the app and restarted, I could login successfully, so it is obviously storing the access token, so the ‘loadstart’ event is somehow being triggered, but for some reason the window is not closing. My phone has Android 4.3

        • Alan April 25, 2014 at 3:16 pm #

          Same here!

          • Soroush May 8, 2014 at 11:56 pm #

            It’s because you haven’t installed inappbrowser plugin.

    • Mathias October 8, 2014 at 5:17 am #

      Hello, just run ‘sudo cordova plugin add org.apache.cordova.inappbrowser’ in your command shell :)

  8. Michael April 17, 2014 at 2:02 pm #

    Hi,

    Deeply appreciate you taking your time putting the OpenFB together and the tutorial.

    Got it working sweet on iPhone and Android in no time. Having some problems with the callback in a web app, though.

    Getting this error in my oauthcallback.html window:

    Cannot read property ‘invoke’ of undefined. Seems to have something to do with the global function oauthCallback. Can’t quite get a grip of what the function does. Where is the element with id ‘main’, for instance?

    Was going to check out your web app to find out what I am missing, but it seems broken at the moment?

    • Aaron Saunders April 21, 2014 at 10:50 pm #

      the element for “main” is in index.html angular needs that object to get the dependency injection to work properly

      • Michael April 22, 2014 at 3:19 am #

        Thanks, Aaron!

  9. Guilherme April 23, 2014 at 2:36 pm #

    Hello again,

    Now i have another problem logging in facebook with my device. Some times this works like a charm but now i’m getting “Success” and below of that appear a red message saying SECURITY WARNING: please treat the above URL….

    I was searching and notice that a lot of people is getting this error, so i think is a facebook bug. Anybody know how to fix that and make it work?

    Thank you

  10. Brandon April 24, 2014 at 7:28 pm #

    Any help with working on device? I still can’t get to work in emulator. I’m sure I don’t have my Facebook settings right. I can’t add app domain because it will not allow me to add localhost. I also can’t figure out what my oauthcallback url needs to be for using with Emulator vs running under localhost. I have * in my config for access permissions. HELLLLLLLLLPPPPPPP!!!

  11. elia April 27, 2014 at 10:49 am #

    Hi,

    I managed to make sociogram working for my app, it is really great, thanks Chris!

    Now i would like to manage data fetching from the Facebook API using ETags in order to limit the network traffic (as explained here: https://developers.facebook.com/docs/reference/ads-api/etags-reference/).

    The problem is that by using the openfb module, there’s no way I can access the response headers. E.g., I’ve been trying the following, but with no success:

    OpenFB.get(‘/me/events’)
    .success(function (result) {
    var ETag = result.headers([‘ETag’]);
    });

    Any hint on this?

    Thanks,
    Elia

    • Brandon April 27, 2014 at 4:26 pm #

      How did you get pass the security message on emulator and on the device?

      • elia April 28, 2014 at 8:24 am #

        That problems happens to me if I do not add the imappbrowser

        cordova plugins add org.apache.cordova.inappbrowser

        • Brandon April 28, 2014 at 6:07 pm #

          Ella thanks for the reply. I tried that and it says the plugin is already installed. I think it may be a Facebook setting I have wrong. Do you mind sharing some points on your configuration on the developer.facebook.com side?

          • Soroush May 10, 2014 at 5:53 am #

            If you point me to a github repo that contains your code I can help you.

          • Brandon May 12, 2014 at 9:25 pm #

            @Soroush look here https://github.com/bmhdev/FBOauth….

  12. Palle April 29, 2014 at 6:32 am #

    Quite awesome. I also liked your ionic ‘starter app’ a lot. Very clear well laid out code.

  13. Bertho May 19, 2014 at 10:51 am #

    Application junk and useless ….

    • Pedro Marques May 20, 2014 at 1:42 pm #

      It’s usefull for me, your comment is junk and useless

  14. Pedro Marques May 20, 2014 at 1:45 pm #

    Cant get Firends list, maybe some mistae on facebook configuration app, any help?

  15. facebook likes May 24, 2014 at 6:32 am #

    Undeniably consider that which youu stated. Your favourite justification seemed
    to be on the net tthe easiest thing to take into account of.
    I say to you, I certainly get annoyed even ass folks think
    about worries that they plainly do not know about.
    You managed to hit the nail upon the highest and also
    defined out the whole thing without having side effect , othher folks cann take a signal.
    Will probably be again to get more. Thanks

  16. Norwill May 28, 2014 at 4:10 pm #

    Ionic is ready to use on production? or is only for testing now?

  17. Sridharan Kuppa May 30, 2014 at 12:22 pm #

    Works great!!! awesome!! great example for ionic framework.

    I read the ionic and wanted to have some sample application to findout the performance. I cloned, build, configured and able to browse application in ipod touch, nexus 4, android emulator, and chrome browser, My only concern is that scrolling is too slow and it is very important feature that it needs to be super good. What is the technical reason for this slow, is it because of ionic is using angularjs and angularjs’s DOM rendering slow? Do you recommend to try with phonegap and ratchet2?

  18. Paulo June 4, 2014 at 12:23 pm #

    This library (FB) does not work for Android? When I press the login button on the android facebook page opens and after I login, the success page does not close. Anyone have any idea what it might be? Note: In iOS works perfectly.

  19. Waleed Khan June 14, 2014 at 2:03 pm #

    Hello, Awesome work first of all.

    You Demo works fine. But when i integrate the code with My iOS Phonegap app. After Login it prompts up Success with a Security Threats.

    What should i do ?

    Thanks again
    Waleed

  20. Dan Ang June 16, 2014 at 5:04 pm #

    Hi guys, you can solve the blank screen or success with security threats by installing the inapp browser.

    cordova plugins add org.apache.cordova.inappbrowser

  21. Tia June 19, 2014 at 6:47 am #

    hello. i’ve gone through all of ur posts but im still not able to figure out where i’ve wronged! :(
    i’ve included: ‘https://www.facebook.com/connect/login_success.html’, window.localStorage); in OpenFB.init().
    When i run “ionic serve” from my cmd (windows OS), i get the main login page, but when i click on “login with facebook” i get a blank screen which says:

    Success
    SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone. See the Facebook Help Center for more information.

    I have installed the inappbrowser plugin & i’ve done my developers.facebook.com stuff properly.

    Can anyone figure out y i’m still getting the error? could it be bcuz im running it by “ionic serve” where my redirect url is via localhost?

    Any help will be deeply appreciated..

    • Panicos June 22, 2014 at 5:03 pm #

      Hey Tia,

      had the same problem, just figured it out… the problem is caused by the return URL you are specifying.

      To run it on your local machine using Ionic Serve you have to configure a valid local return URI for your dev. environment in facebook. For me it was http://localhost:8100 and then change ‘https://www.facebook.com/connect/login_success.html’ with “http://localhost:8100/oauthcallback.html” in OpenFB.init().

    • Juanma October 3, 2014 at 3:07 am #

      hello, my it has worked with ‘$window.sessionStorage’ instead of ‘window.localStorage’ on ‘OpenFB.init’ function

  22. Rick Haverland June 21, 2014 at 2:00 am #

    There’s definately a great deal to find out about this issue. I like all of the points you made.

  23. Sean June 22, 2014 at 6:27 pm #

    To add to the comments, this really is an amazing demo. Thank you for sharing, I have learned a lot from going through the post, the demo, and the source on github. Thank you.

    After going through everything and setting a demo up for myself to tinker with, I was unable to make a post. In the folder www/js/ there is a file named “controllers.js” and facebook permission needed to be modified. At approximately line 26, I changed:

    from

    OpenFB.login(‘email,read_stream,publish_stream’).then(

    to

    OpenFB.login(‘email,read_stream,publish_actions’).then(

    Notice that the permission requested to post needed to be change from ‘publish_stream’ to ‘publish_actions’.

    That’s it! That was the only thing I changed to make everything just work. Thanks again!

  24. Tia June 23, 2014 at 5:51 am #

    Thanks alot Panicos & Sean!!! :)
    though i do have a few more doubts….

    1. @panicos if i want to install my app to my phone, what will i set as the URL?

    2. I’m able to login into my fb account but then unable to access any of my account specifics (like how the app is supposed to work) also, i can see any access token in the loaded url…im making an app in which i need to store all the access tokens & then access the user’s friend list..but i cant get the logged in page :/

    • Tia June 23, 2014 at 7:50 am #

      *i cant see the access token

  25. Tom June 25, 2014 at 10:08 am #

    Hi all,
    I am also stuck =/

    First I want to share the things I have found out:
    1: For everyone who creates this app and sees an empty friends list:
    FACEBOOK CHANGED ITS API! It is not longer possible to get a list of your friends. You will only be able to see your friends that also have accepted the app you use to login with.

    2: It looks like the trigger in the lib that should check if you are using a phone is not working. (runningInCordova = false; //on phone). This results in the app trying to use a callback in the following format (file:///android_asset/www/oauthcallback.html) when used on the phone. The workaround is to give the callback parameter directly to the function as proposed above.
    2.1 OpenFB.init(‘xxx’, ‘https://www.facebook.com/connect/login_success.html’, window.sessionStorage);

    Problem:
    I am still stuck on the screen on my phone saying “Success” + warning on the phone.
    I don’t know what to do about it. Also I am not 100% sure what it should do.

    • Tom June 25, 2014 at 10:14 am #

      Note: I can see the token in the url bar (before it resets to blank, i guess that a security feature of fb). However the page does not lose and the fbtoken is undefined :(

      • Tia June 26, 2014 at 1:34 am #

        The access token in the title bar appears for a second after which that window closes and only the default page stays.

  26. Adrian July 2, 2014 at 6:09 am #

    Hello,

    All works fine, but I’m modify the app.js and controllers.js adding new code, running the application(in android) the login screen is blank. But how i said the works fine if not modfy anythink.

    New code:

    app.js: .state(‘app.eventos’, {
    url: “/eventosM”,
    views: {
    ‘menuContent': {
    templateUrl: “templates/events.html”,
    controller: “EventosCtrl”
    }
    }
    });

    controllers.js: .controller(‘EventosCtrl’, function ($scope, OpenFB) {

    OpenFB.get(‘/me/events’, {limit: 10})
    .success(function (result) {
    // $scope.items = result.data;
    alert(‘cargado’);
    })
    .error(function(data) {
    alert(data.error.message);
    });
    })

    Sorry my english. thanks!

    • Adrian July 2, 2014 at 7:28 am #

      Solved!! was a studip thing. sorry and thanks

    • Lucas Almeida Siqueira July 3, 2014 at 12:00 am #

      Dude, i think you are brazilian =P rsrs… add me in facebook(/lucasalmeida70) then I can try to help you!

  27. Ale July 2, 2014 at 10:12 am #

    The app doesn’t work on my phone/tablet on Android. Which “Valid OAuth redirect URI” should I have to use on production?
    When I click the Login button nothing happens..

    Thanks in advance!

  28. Lucas Almeida Siqueira July 2, 2014 at 11:58 pm #

    First of all, great plugin ! :)

    Buuut… if I wanna get in other account when I logout?

    If someone help me with this it would REALLY help me :B

  29. Rick July 4, 2014 at 12:08 am #

    Hey,

    How do you login through a different user?

    It seems to connect to my personal facebook account on Cordova and the browser automatically.

    Also, new posts are not getting loaded once the facebook stream reaches the end.

    Thanks

  30. Herve July 7, 2014 at 7:31 pm #

    Any idea why do I get this error message?

    Can’t reliably infer the OAuth redirect URI. Please specify it explicitly in openFB.init()

    • Rangel July 12, 2014 at 9:14 am #

      Hello Herve,

      I had this problem… i fix with change OpenFB.init(‘APP_ID’) to OpenFB.init(‘APP_ID’, ‘https://www.facebook.com/connect/login_success.html’, window.localStorage).

      But i still cant work my project in web browser.

      • Mekey Salaria November 30, 2014 at 3:32 am #

        Thanks man, atleast Im now one step ahead. I had the same issue and get ti fixed by your comment ;)

  31. Lucas Almeida Siqueira July 9, 2014 at 10:20 pm #

    ‘publish_stream’ permission not working in my app :/ I tried ‘publish_actions’ but facebook only let use if I submit a request for this permission!!! D;

  32. Bilal Öztürk July 13, 2014 at 8:54 am #

    Çeşit Çeşit Yemekler uygulamasında karşınıza çıkan 4 adet ana yemek çıkacaktır. Çıkan bu ana yemekler arasında dilediğiniz herhangi bir tanesini seçerek işe başlayacaksınız. Seçilen yemeği daha sonra oluşturmanızın istendiği bu uygulamamızda kahramanımızla beraber yapılacak olan yemeklerin sonucunda skor ve para kazanacaksınız arkadaşlar. Kısa sürede en sevilen içerikler arasında kendini gösteren bu oyunumuzda kontrol aracı olarak her zaman ki gibi sizlere ( Fare ) konsolu yardımcı olacaktır. Şimdiden iyi şanslar ve bol eğlenceler dileriz arkadaşlar. Site adresime giriş yapabilmeniz için sadece http://korkuoyunu.net/ adresine tıklamanız yeterli olacaktır.

  33. ho_oh July 16, 2014 at 6:40 am #

    Does OpenFB have the function that get current user id like the getUser in php ?

  34. Pascal Similon July 18, 2014 at 11:24 am #

    Hi,
    There is a solution to post a photo from the phone directly to Albumid on facebook using this facebook integration ?

  35. Edith July 23, 2014 at 1:24 am #

    Awesome issues here. I’m very happy to look your post. Thanks a lot and I am looking forward to contact you. Will you please drop me a mail?

  36. Bruce July 25, 2014 at 12:32 pm #

    I’ve tried the demo (http://coenraets.org/apps/sociogram/index.html#/app/login) on both my desktop and android phone, but it doesn’t work. I get this 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.

  37. Dan B August 7, 2014 at 2:11 pm #

    Hi guys, I got the full user logout to work.. not sure if it’s 100% perfect, but injecting these 2 files into the app and now it works. I think this will log the user out of all phone apps using facebook as well, not sure..

    controllers.js
    http://pastebin.com/75rbrAX5

    openfb-angular.js
    http://pastebin.com/0x5p60Nf

  38. ho_oh August 20, 2014 at 4:51 am #

    Is there any way to implement facebook like integrate with the inappbrowser ?

  39. Parvindra Singh September 13, 2014 at 3:28 am #

    Very nice solution……. :-)

  40. Fred October 16, 2014 at 1:09 pm #

    Hi,

    Even the demo is not working right now, and I am getting the same error than in the demo… Thanks for sharing anyway.

  41. Adarsh October 22, 2014 at 1:57 am #

    after logging in localhost is throwing an error saying that #200 requires a extended permission red_stream … Please help me out

  42. Shahroz Allauddin October 23, 2014 at 2:23 am #

    Hi Christophe Coenraets,
    You are really some thing. I had followed all of your steps and I have succeeded in fb login every thing is work fine but I can’t get my friends list. I think i had missed friend list permission in my FB APP and I don’t know how to do this. Please help me.
    Thanks.
    Regard,
    Shahroz Allauddin

  43. ratman October 24, 2014 at 6:19 am #

    How are u getting read_stream permission granted by facebook?.
    facebook says “This permission is granted to apps building a Facebook-branded client on platforms where Facebook is not already available. For example, Android and iOS apps will not be approved for this permission. In addition, Web, Desktop and TV apps will not be granted this permission.”

    Only the developer can access his stream if he want to release it to the public he cant. How are you able to do this?

  44. Daniel Ortiz October 28, 2014 at 1:53 am #

    What steps should I follow to publish my app in the store using this library?

    I get the following error from Facebook:
    “Given URL is not allowed by the Application configuration .: One or more of the Given URL is not allowed bu the app’s settings …

    Help!

  45. Rakesh November 7, 2014 at 9:23 am #

    It’s really great efforts. Cheers.
    And Thanks a ton.

  46. donny December 11, 2014 at 11:13 pm #

    I got blank on mobile device and i got Error message in browser
    In browser i got error in this link https://www.facebook.com/connect/blank.html#_=_ with message
    “Success
    SECURITY WARNING: Please treat the URL above as you would your password and do not share it with anyone. See the Facebook Help Center for more information.”

    I’ve configure OpenFB.init() using SessionStorage and when i looking for session data in browser (chrome) fbtoken is undefined

    Any help ?

Trackbacks/Pingbacks

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

    […] Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration […]

  2. tag based on what is being viewed. global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $sit - April 11, 2014

    […] Excerpt from: Sociogram: A Sample Application demonstrating AngularJS/Ionic … […]

  3. Best of JavaScript, HTML & CSS – Week of April 7, 2014 | Flippin' Awesome - April 16, 2014

    […] Christophe Coenraets shares a new version of Sociogram, a mobile application built with AngularJS, Ionic, and OpenFB. Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration […]

  4. Angular, Links And Resources (6) | Angel "Java" Lopez on Blog - May 8, 2014

    […] Sociogram: A Sample Application demonstrating AngularJS/Ionic and Facebook Integration | Christophe Coenraets http://coenraets.org/blog/2014/04/sociogram-angularjs-ionic-facebook/ […]

  5. various angular.js demos and tutorials | OSDE - December 12, 2014

    […] http://coenraets.org/blog/2014/04/sociogram-angularjs-ionic-facebook/ […]

Leave a Reply

css.php