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.
You’re the man !!! :D
Thank you so much!
@Nuno. You are welcome. Hopefully it is worth the wait :)
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!
@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 – https://github.com/ccoenraets/backbone-cellar/blob/master/tutorial/mobile/android/BackboneCellarAndroid/assets/www/js/main.js
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? :)
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.
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
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.
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.
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?
Do you have an example of this setup using JSON or one of your adapters?
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
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
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?
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
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?
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
Than for such a great app.
Has any one tested this app on diffrent paltfroms other than ios.if yes how does it perform.