Add Facebook login to PhoneGap/Cordova Android app Easiest way – UPDATED

Posted by on January 27, 2012

First ensure that you have Basic PhoneGap application running on your android. Check this tutorial if needed. Official tutorial is not so good but might help you out if Phonegap Facebook tutorial here fails. For additional information go to https://github.com/davejohnson/phonegap-plugin-facebook-connect/blob/master/README.md.

  1. Download PhoneGap Facebook plugin from https://github.com/davejohnson/phonegap-plugin-facebook-connect/tree/master/www
  2. Move cdv-plugin-fb-connect.js into your android phonegap webroot assets/www
  3. Include it in index.html <script type=”text/javascript” charset=”utf-8″ src=”cdv-plugin-fb-connect.js”></script>
  4. Add <plugin name=”org.apache.cordova.facebook.Connect” value=”org.apache.cordova.facebook.ConnectPlugin” /> into res/xml/plugins.xml
  5. Download facebook_js_sdk.js from https://github.com/davejohnson/phonegap-plugin-facebook-connect/tree/master/lib
  6. Create package org.apache.cordova.facebook and class ConnectPlugin.java. Copy contents of this file into it  https://github.com/davejohnson/phonegap-plugin-facebook-connect/blob/master/native/android/src/org/apache/cordova/facebook/ConnectPlugin.java
  7. Add package com.facebook.android and .java files from https://github.com/facebook/facebook-android-sdk/tree/master/facebook/src to your java source. This enables ConnectPlugin.java to compile.
  8. Add import to com.package.your.R; or whatever is your android package so that your R.java will be imported to FbDialog.java.
  9. Merge facebook icons from https://github.com/facebook/facebook-android-sdk/tree/master/facebook/res to your project res folder. This enables Facebook SDK sources to compile. Espacially is needed this image https://github.com/facebook/facebook-android-sdk/blob/master/facebook/res/drawable/close.png
  10. Verify the facebook using javascript methods in here. https://github.com/davejohnson/phonegap-plugin-facebook-connect/blob/master/example/www/index.html
  11. Dont forget to register you facebook android app, add your APP id to the init method and register your app signing key in facebook. About creating signing key hash look into https://developers.facebook.com/docs/mobile/android/build/#sig

Download the Full Eclipse project sources here:  FacebookTest

In case of any issues don’t hesitate to post into comment and I will respond promptly if I can help.


Last modified on July 29, 2012

Categories: android, Beginners, iphone, phonegap, tips & tricks
48 Comments »

« | Home | »

48 Responses to “Add Facebook login to PhoneGap/Cordova Android app Easiest way – UPDATED”

  1. Jeroen Says:

    Sorry, but i am stuck on step 5. Could you tell me where i can find the Java source file? Should I Modify this file?

    Thanks!

  2. smartman Says:

    Step 6 describes including file needed for native coding for PhoneGap Facebook plugin. Current latest version can be seen in plaintext from https://raw.github.com/davejohnson/phonegap-plugin-facebook-connect/bdac0f1e488aa4b27a59282b164ce8b7e2079873/native/android/src/com/phonegap/facebook/ConnectPlugin.java
    Create package com.phonegap.facebook and add ConnectPlugin.java source there.
    Did this help?

  3. BrianH Says:

    Thanks for explaining the steps to get this running. I am getting stuck on step #8. I’m not sure which file you are referring to.

    Do you have a basic sample code that you could attach as a zip so that we could download it and see the directory structure and how you have everything setup?

    thanks

  4. smartman Says:

    Step 8 describes editing files imported in step 7. https://github.com/facebook/facebook-android-sdk/tree/master/facebook/src/com/facebook/android has listed all the native .java files in package com.facebook.android. All other files are OK except FbDialog.java. Add there line “import com.myproject.R;” . “com.myproject” is your android package name.

  5. AhmadW Says:

    It works very well. Thank you very much.

  6. hoff Says:

    this works (with the help of the comments), thanks for posting!

  7. Anonymous Says:

    Thanks for the tut. I tried to post messages to users wall and got the error code 200: saying the user did not grant any permission. How can i post to facebook walls

  8. smartman Says:

    try
    FB.login(function(response) {
    // handle the response
    }, {scope: ‘publish_stream’});

    See also https://developers.facebook.com/docs/reference/javascript/FB.login/

  9. slimtugo Says:

    I already tried that. Maybe oauth2 isn’t supported and the plugin is using an older facebook sdk.

  10. Bassem Says:

    Works great, thanks a lot, you don’t know how it was frustrating not to find a handful guide 🙂 you rock man 😉

  11. I am getting this error! Says:

    Error in success callback: com.phonegap.facebook.Connect3 = TypeError: Object # has no method ‘setAuthResponse’

    Is your patched file the latest version?

    Thanks

  12. slimtugo Says:

    Can i post to wall with this?

  13. sekhar Says:

    I am not able to login not even with the help of previous comments. please help

  14. Ben Longstaff Says:

    Awesome tutorial the things that caught me out where

    1. generating the hash to put into the Android app, this post helped me solve that
    http://stackoverflow.com/questions/5306009/facebook-android-generate-key-hash

    2. the deviceReady not always getting called, the solution i found was
    http://www.philliprhodes.com/content/phonegap-deviceready-not-called-android

    I also found that uninstalling the app i was working on and redeploying it from eclipse resolved alot of odd behaviour.

  15. Ben Longstaff Says:

    Ah seems I am getting the error

    Error in success callback: com.phonegap.facebook.Connect1 = TypeError: Object # has no method ‘setAuthResponse’

    as well

  16. Mark Walls Says:

    I am getting stuck on step 4 basically. I am getting a compile error saying the XML is not clearly formed. I’ve already done the rest of the steps from this article (much clearer than the phonegap version. Thank you). Any thoughts?

  17. Mark Walls Says:

    Wondering if anyone actually gets this working – it would be awesome of you to put up a github of the code so we can see what we are doing wrong. Just post a link here. Thanks.

  18. idanb Says:

    me 2

  19. Nino Nikowa Says:

    Set java compiler -> 1.6

    http://androidcodemonkey.blogspot.com/2011/10/how-to-solve-must-override-superclass.html

  20. PhoneGap Facebook Plugin connect with android | Build Future Repository Says:

    […] I tri to install this with officiel git readme and this tutoriel : http://marguspala.com/add-facebook-login-to-phonegap-android-app-easiest-way/comment-page-1/#comment… […]

  21. Kamlesh Says:

    What should be config.xml file structure for generating files for iOS and other operating system for facebook app

  22. idanb Says:

    Tried again with 1.6.1 , no luck
    error in compilation :

    Description Resource Path Location Type
    close cannot be resolved or is not a field FbDialog.java /FaceLogIn/src/com/facebook/android line 106 Java Problem

    what say you ?

  23. web exploits Says:

    web exploits…

    […]Add Facebook login to PhoneGap Android app Easiest way « Margus Pala is fixing IT![…]…

  24. smartman Says:

    To solve the above issues is easiest way to download the eclipse source package I made available. Once you get this simple program running you can compare to your own solution.

  25. idanb Says:

    Thanks smartman , can you explain here wich folder from the download link we need to import to the eclipse ?
    (FacebookTest)
    Detailed guide would be gratetude .

    thanks again !

  26. Sugarfixx Says:

    Thanks a lot for this very straight forward tutorial on how to get the FB plugin to work on android. I just wanted to inform you all that is also works just fine with cordova-1.7.0 and to those og you that strugles with step 8, just du exactly what it says! 🙂 (I got that right on second attempt)

  27. Sugarfixx Says:

    Oh just forgot.. regardig the manifest.xml (included in the example) did not work without adding the following lines of code (that we all know so well)

  28. Sugarfixx Says:
  29. Sugarfixx Says:

    Sorry difficult to post code to a WordPress!!! 🙂

  30. siva Says:

    Awesome tutorial ,works great.Thanks a lot. please help me how to post message.

  31. Wes Turner Says:

    Can I tell you that the R.drawable issue was KILLING me? Thanks so much for the detailed instructions. I wonder why it’s sooo hard for the jar files not to include these appropriately so that the sources don’t have to be compiled.

  32. Michael Says:

    I built an example project using Cordova 1.7.0 and the Facebook plugin. The Hackbook example is also integrated. https://github.com/rezbuilt/facebook-connect-phonegap-framework

  33. Santanu from mobiquest Says:

    No comments are enough for this tutorial. Really awesome..

    Thanks buddy…..

  34. Patrick Says:

    Hello, thanks so much for the tutorial. I want my users to be able to upload a photo to my server and to save each photo as theirs by categorizing it with their username or some unique ID. How can I get thise from the facebook plugin?

    Thanks!

  35. PksMob Says:

    Pls ignore my previous comment, it was proxy problem. Its working for me too. Thanks!

  36. Jasper Mogg Says:

    This is fantastic. Thank you so much, especially for the example download.

    Cheers!

  37. Tyler Says:

    Thanks for the great tutorial! I did this using cordova-1.7.0, and I had to make these minor changes:

    1. in Facebook.java and FBDialog.java (two of the files from step 7), I removed the @override lines that caused errors.
    2. I was still getting “android.os.NetworkOnMainThreadException” in my program on login, and this would cause my program to crash. It has to do with login running on the main thread, and if you are having this problem, this post was helpful.

    These two changes solved my problems, hopefully that helps to anyone running into problems.

  38. Tyler Says:

    Oops, too hasty on the last post. The link I was referring to in step 2 of my comment above can be found here:

    http://stackoverflow.com/questions/10757577/networkonmainthreadexception-on-facebook-login-with-phonegap-1-6-0

  39. prasad Says:

    Thnks,this code is working fine and great tutorial…..

  40. Amit Lguru Says:

    this information is very useful for my project. i implemented all the steps that u explain.

  41. sWAPNIL dALVI Says:

    Its wORK THANK YOU SO MUCH

  42. Swapnil Dalvi Says:

    It Works Thank You So Much

  43. Elamathy Says:

    Thank u so much it works great

  44. mohammed Says:

    your project path should be in facebook sdk sample folder..then it works fine.

  45. Shahroz Says:

    Hi,
    I want to download PhoneGap Facebook plugin but when i follow the step 1 and click the url that u have given it shows 404 error: page not found.

  46. página principal Says:

    página principal

    Add Facebook login to PhoneGap/Cordova Android app Easiest way – UPDATED « Margus Pala is fixing IT!

  47. alarmas hogar sin cuotas Says:

    alarmas hogar sin cuotas

    Add Facebook login to PhoneGap/Cordova Android app Easiest way – UPDATED « Margus Pala is fixing IT!

  48. wisata indonesia yang wajib dikunjungi Says:

    Thanks for one’s marvelous posting! I seriously enjoyed reading it,
    you will be a great author.I will be sure to bookmark your blog and may come back at
    some point. I want to encourage that you continue your great job, have a nice afternoon!

Leave a Reply

*