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

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.


48 Comments

  1. Jeroen

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

    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

  3. Anonymous

    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

  4. slimtugo

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

  5. Bassem

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

  6. I am getting this error!

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

    Is your patched file the latest version?

    Thanks

  7. Ben Longstaff

    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.

  8. Ben Longstaff

    Ah seems I am getting the error

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

    as well

  9. Mark Walls

    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?

  10. Mark Walls

    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.

  11. Kamlesh

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

  12. idanb

    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 ?

  13. smartman

    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.

  14. idanb

    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 !

  15. Sugarfixx

    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)

  16. Sugarfixx

    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)

  17. siva

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

  18. Wes Turner

    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.

  19. Santanu from mobiquest

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

    Thanks buddy…..

  20. Patrick

    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!

  21. PksMob

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

  22. Jasper Mogg

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

    Cheers!

  23. Tyler

    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.

  24. Amit Lguru

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

  25. Shahroz

    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.

Leave a Reply

Your email address will not be published.


*