Cordova 3.5.0 and Facebook SDK 3.8 Using Command Line – Android

In this blog we will see how to integrate the latest version of facebook phonegap plugin and will deal with some of the issues faced.

Installing or Upgrading

Update: Check out guide here https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/android/README.md  it worked directly for me.

If your upgrading first you need to uninstall the previous version of your plugin. Rest of the steps are same as installation. To remove

cordova plugin remove com.phonegap.plugins.facebookconnect

I usually install plugin from a directory, so first checkout the facebook plugin from into any folder using git (https://github.com/phonegap/phonegap-facebook-plugin)

Open the plugin directory and open the plugin.xml file. Comment out the lines

<!--
<preference name="APP_ID" />
<preference name="APP_NAME" />
-->

Then replace all instances of $APP_ID with your facebook and $APP_NAME with your facebook app name.
Next to install the plugin

cordova plugin add ../../{plugin_directory}
cordova platform remove android
cordova platform add android

This should install the plugin.

At this point if you do a “cordova build android” you will get lot of compilation errors.
Basically FacebookLib need to added to android compilation library. To do this

cd platforms\android
android update project --target 3 --path . --library FacebookLib

This add folder “FacebookLib” in android’s path during compilation.
If you open project.properties file it would look something like

android.library.reference.1=CordovaLib
# Project target.
target=android-19
android.library.reference.2=FacebookLib

Now if you do a “cordova build android” you might get an error

sdk.dir is missing

To fix this open go to folder

cd platforms\android\FacebookLib
android update project -p .

Now you should be able to successfully compile now.

Login Using Facebook

There are changes in javascript code as well. Firstly “cdv-plugin-fb-connect.js” and “facebook-js-sdk.js” have been removed, and “facebookConnectPlugin.js” has been added. So you don’t need to include any javascript file separately now.

Secondly, no FB.init is required. The plugin gets automatically initialized using AndroidManifest.xml values.

Here the code for login

facebookConnectPlugin.login(["email"], function(response) {
        if (response.authResponse) {
            processFacebook();
            //login success
        } else {
            // user is not logged in
        }
    });

function processFacebook() {
    if (typeof window.plugins != "undefined") {
        window.plugins.toast.showShortBottom('Logging In...', function(a) {
        }, function(b) {
        });
    }

    facebookConnectPlugin.api('/me', function(response) {
        if (response.error) {
            console.log('Unexpected Facebook Login Error: ' + JSON.stringify(response.error));
            showAlertNotification('Error! Try Again..');
        } else {
            console.log(response);
            var login_data = '';
            for (var key in response) {
                if (key == 'id' || key == 'name' || key == 'email' || key == 'gender')
                    login_data += key + '=' + encodeURIComponent(response[key]) + '&';
            }
            if (login_data.length > 0) {
                login_data = login_data.substring(0, login_data.length - 1);
            }
            // save to your db or apply ur custom logic
        }
    });
}

Troubleshooting

06-22 12:01:45.705: E/AndroidRuntime(31024): java.lang.NoClassDefFoundError: com.facebook.android.R$layout
If you get error like above, to fix this
Copy files from “platforms\android\FacebookLib\ant-gen\com” to “platforms\android\ant-gen\com”

This is the only way i found to fix this error.