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

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

  • 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?

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

  • Matt

    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?

  • seba

    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.

  • Pingback: 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()

  • ghprod

    Its works perfectly in my emulator device :D

    Thanks

  • cloyd

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

  • 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

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

      • 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

          I made this change and got a blank screen…

  • Guilherme

    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

      This happens for me too.

      • starkcoffee

        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

          Same here!

          • Soroush

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

    • Mathias

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

  • Pingback: Best of JavaScript, HTML & CSS – Week of April 7, 2014 | Flippin' Awesome()

  • Michael

    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?

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

      • Michael

        Thanks, Aaron!

  • Guilherme

    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

  • Brandon

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

  • elia

    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

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

      • elia

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

        cordova plugins add org.apache.cordova.inappbrowser

        • Brandon

          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

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

          • Brandon

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

          • AJ

            Any updates? I’m sailing in the exam same boat.

  • Palle

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

  • Pingback: Angular, Links And Resources (6) | Angel "Java" Lopez on Blog()

  • Bertho

    Application junk and useless ….

    • Pedro Marques

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

  • Pedro Marques

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

  • 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

  • Norwill

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

  • Sridharan Kuppa

    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?

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

  • Waleed Khan

    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

  • 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

  • Tia

    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

      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

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

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

  • Sean

    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!

  • Tia

    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

      *i cant see the access token

  • Tom

    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

      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

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

  • Adrian

    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

      Solved!! was a studip thing. sorry and thanks

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

  • Ale

    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!

  • 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

  • Rick

    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

    • “How do you login through a different user?” [2]

      • Manish

        Same issue here. How can I logout and log in as different user?

  • Herve

    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

      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.

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

  • ‘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;

  • Ç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.

  • ho_oh

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

  • Pascal Similon

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

  • 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?

  • Bruce

    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.

  • 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

  • ho_oh

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

  • Parvindra Singh

    Very nice solution……. :-)

  • Fred

    Hi,

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

  • Adarsh

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

    • Nishanth

      #200 requires a extended permission red_stream, i get the same too.

  • Shahroz Allauddin

    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

  • ratman

    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?

  • Daniel Ortiz

    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!

  • Rakesh

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

  • 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 ?

  • Pingback: various angular.js demos and tutorials | OSDE()

  • Robert

    For quite some time I also got stuck at the browser window not closing and staying with the 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 found my problem. maybe one of you has the same issue. Mine had 2 issues:

    1. Cncomment in the index.html (as was also posted above)

    2. Update Config.xml after installing inappbrowser (“ionic plugin add org.apache.cordova.inappbrowser”)
    The config.xml needs to be updated with:

    (see also: https://auth0.com/docs/native-platforms/ionic)

  • Gaston

    Hi cristopher, how i do for exctract facebook page feed with json and show it in phonegap?

  • Malc

    I try the sample app and it work. Then I’m trying to integrate the openfb-angular.js into my application. As usual,the inappbrowser pop ask me to log into facebook, after click login, i got error
    Application Error
    net::ERR_CONNECTION_REFUSED(http://localhost:8100/index.html?#access_toke=………)
    Any one facing this issue?

  • Is there no messaging app to rule them all? One that you can use for all social media?

  • Boyong

    Thank you very much for this tutorial. I am currently having some difficulties. I am stock on this page and I really need help.

    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.

    • Sazzad Hossan Opu

      Hello Boyong, did you solve the problem? I am facing the same issue in here. Any idea?

  • Hi,

    This is a great tutorial, but the code is out-dated. After spending hours, I’ve fixed a bunch of bugs in the old repo. Using my forked repo, it:

    1. Work correctly on both browser and iOS simulator
    2. Log-in, log-out correctly
    3. Is free of security warnings
    4. Is free of “the redirect_uri is not supported”
    5. Can access Facebook friends
    6. Has explicit Facebook app config instructions

    The fixed repo:
    https://github.com/chingchia/sociogram-angular-ionic

    Some fixes are referenced from the latest OpenFB repo.

    The reason why I try to fix this old version of OpenFB instead of using the latest OpenFB is that the latest one (v0.4) does not work in my app. I am hoping this fixed old version would work. Will try later.

    Hope this helps!

    • Thanks for the hardwork to fix this outdated code, this code finally worked for me, but i’m still seeing nothing on facebook friends.

    • Ben Schippers

      Hi,

      Thanks for the app / all the fixes. I’m still getting read stream error. Any thoughts?

      Appreciate the input.

  • AAKhan

    Thanks for the great work!

    I just want to know how can i post or share any image with link instead of posting simple text???

  • Manuj Bahl

    I am trying to use this project and can’t seem to get it working.

    Login is SUCCESSFUL and i get back a valid session token.

    But all calls to the graph api (ionic Android) are failing with a 404.

    GET https://graph.facebook.com/me?access_token=CAAFsoCiwXR0BABzQLbwRAtNnhKoAPz4…FIx7qA5latMxRPJ6QeyVXT57ZAqj79mCqHSQPAVZBl3w2fypecf4hvfDZCMUmvV4pvEYtDi0R0 404 (Not Found)

    There is not data in the error callback as well.

    If i copy that url and try it on my desktop/iphone/Android browser.. it works fine and get the user data for me. Just does not work in the context of the ionic app.

    Am i missing something. I have the callback url etc set right because I successfully login and get the access token.

    Any ideas ?

    • Hello Manuj Bahl,
      Have you finally found the solution about this 404 error ? I have exactly the same problem ?
      Thank you.

  • Thanks for the sharing this really informative post. I am glad to reach on your post.

  • AarifaBaig

    Hello,
    I have used the same concept as Sociogram in my app,it works fine with login , when I logout from facebook, token becomes null, there is no problem here. However, It doesnt ask me facebook password or email when I click the login button again.
    So It doesnt allow me login different users.
    I think I can logout from app but cannot logout from inapp browser.
    How can I solve this problem?
    response is appreciated.

  • chetan awate

    i am accessing friend list from my project but its not getting ,i saw sociogram app and but in that also not getting friends list plz anyone help me out…

  • chetan awate

    can someone help me out

    .controller(‘FriendsCtrl’, function ($scope, $stateParams, OpenFB) {
    OpenFB.get(‘/’ + $stateParams.personId + ‘/friends’, {limit: 50})
    .success(function (result) {
    $scope.friends = result.data;
    })
    .error(function(data) {
    alert(data.error.message);
    });
    })

    but when click it will give blank screen ,i dont getting any data , is there code issue or permission issue..

  • Francisco Corrales Morales

    I am getting this error:

    (#200) Requires extended permission: read_stream

  • Akila H

    I have getting (#200) Requires extended permission: read_stream

  • Joe

    Thank you for this. I have managed to set it up on my localhost but once i click the login button i get the following error;

    Invalid Scopes: read_stream, publish_stream

    I assume this is to do with the upgrade of the facebook API. How do i get around this. Where are this permissions set?

  • качество, надежность, экономичность и связанные работы выполняются imalattan.rofesyonek команду

  • Pingback: Mobile Web Weekly No.2 | ENUE()

  • Rohit

    A new working version with all the fixes and extra features can be obtained from this repository:
    https://github.com/agrawroh/sociogram-angular-ionic

    *Change Log*
    1. Added configuration for Profile Secret in openfb-angular.js.
    2. Fixed API permission issues with read_stream, publish_stream.
    3. Fixed Mutual Friends/Feeds/Friends GET requests as per latest Facebook API v2.5.
    4. Added ‘Taggable Friends’ option which shows all the friends from user’s friend list.

    *Note*
    You have to provide the app_secret in openfb-angular.js and switch on the “App Secret Required” on your Facebook Application Settings.

css.php