Setup Facebook Login and Camera for Android App using PhoneGap 3.4

by: Shailesh Patel in: Programming tags: Android, Phonegap,

This tutorial explains the manual steps to integrate Facebook Login and add Camera plugin for Android application which is created using PhoneGap 3.4. For Facebook plugin configuration and samples, refer phonegap-facebook-plugin available on GitHub.


PhoneGap 3.x (refer this link to setup PhoneGap on Windows or this link to setup on OS X Mavericks)
Android SDK
Android device or emulator

Manual Steps for Facebook and Camera Plugin

1.Let’s start by creating a new project with name - SampleFBCamera.
Run command >phonegap create SampleFBCamera

Also, you can use the following command format
>phonegap create [projectfoldername] [package name in reverse domain style] [projectname]

You can even change this information post-create process from config.xml file stored in [projectfoldername]\www folder.

Facebookcameraphonegap 01 01

Note: For some unknown reasons, the above command format didn’t work on my Windows machine hence I had to change the config.xml file manually.

2.Run command to add Camera plugin. Refer PhoneGap Plugin APIs page to know available plugins.
>phonegap local plugin add

Facebookcameraphonegap 02 01

3.Run command >phonegap build android or >phonegap run android – to check if the application build and deploy process is working properly or not.

Facebookcameraphonegap 03 01

Facebookcameraphonegap 03 02

It did throw an error at the end.

[ReferenceError: a is not defined]
[error] Cannot set property ‘is_top_level’ of undefined

But, when the same command was executed again and it worked without any problem. Even >phonegap run android was able to build and deploy the application successfully on AVD emulator.

Note: I am using PhoneGap version 3.4.0-0.19.7.

4.Create a new workspace “samples” which will be used for sample applications. Open Eclipse -> File menu -> Switch Workspace -> Other… -> Workspace Launcher window opens. Create a new folder “samples”, select it and click on OK button. Eclipse will close and re-open with new workspace.

Facebookcameraphonegap 04 01

5.On Package Explorer window, right click to open context menu and click on Import to import an existing Android project.

Facebookcameraphonegap 05 01

6.In this case, we are importing the SampleFBCamera application created by PhoneGap. A new window Import opens. Expand Android and select “Existing Android Code into Workspace”. Click on Next button.

Facebookcameraphonegap 06 01

7.The next window allows us to import the project. Click on Browse button and select the “android” folder from phonegap/[projectfoldername]/platforms folder.

Facebookcameraphonegap 07 01

Click on Finish button. No check boxes where checked on Import Projects window.

Facebookcameraphonegap 07 02

8.Build and run the projects to see if it works or not. SampleFBCamera-CordovaLib is added as a library in SampleFBCamera. Right click on SampleFBCamera project -> expand Run As -> click on 1 Android Application. It will deploy the application on emulator or device.

Facebookcameraphonegap 08 01

9.Download Facebook SDK from Facebook Developers website and extract it to “…\workspace\sdks” folder.

Facebookcameraphonegap 09 01

10. Now again use the Import project and select from existing Android Code into Workspace. This time select only Facebook SDK project.

Facebookcameraphonegap 10 01

11. You will see following messages under Console tab when FacebookSDK gets imported.

[2014-03-21 11:59:57 - FacebookSDK] Unable to resolve target 'android-8'
[2014-03-21 11:59:58 - FacebookSDK] Unable to resolve target 'android-8'

This error message indicates that FacebookSDK uses Android 2.2 (API 8). You can install it using the Android SDK Manager.

Facebookcameraphonegap 11 01

Close and open Eclipse again. Right click on FacebookSDK project and click on Properties. In Properties for FacebookSDK window, click on Android. It will show Android 4.4 as checked. Select Android 2.2 and click on OK button. Now FacebookSDK is using Android 2.2 (API 8).

Facebookcameraphonegap 11 02

12. Try to build the projects. First build CordovaLib, followed by SampleFBCamera, then FacebookSDK and finally SampleFBCamera project.

13. Now right click on SampleFBCamera > Properties > click on Android and add FacebookSDK as a Library to this project.

Facebookcameraphonegap 13 01

14. Now again try to build the project in the sequence as given in step #12.

15. Change android:minSdkVersion to 8 in Android Manifest.xml file for SampleFBCamera project.

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="19"/>

Also add code for Facebook login activity into Android Manifest file.

<activity android:name="com.facebook.LoginActivity" android:label="@string/app_name" />

Facebookcameraphonegap 15 01

16. From Package Explorer tab, expand res\xml folder and open config.xml. Add feature for Facebook.

<feature name="org.apache.cordova.facebook.Connect">
<param name="android-package" value="org.apache.cordova.facebook.ConnectPlugin" />

Facebookcameraphonegap 16 01

Add access origins as given in documentation.

<access origin=""/>
<access origin=""/>
<access origin=""/>
<access origin="*"/>
<access origin="*"/>

Facebookcameraphonegap 16 02

17. Download the phonegap-facebook-plugin from GitHub in ZIP format (look for Download ZIP button on right side).

Facebookcameraphonegap 17 01

Extract the zip file to workspace\sdks folder.

Facebookcameraphonegap 17 02

18. Using File Explorer, navigate to platforms\android folder and create the following nested folder structure “org\apache\cordova\facebook”. Copy “” from phonegap-facebook-plugin-master\src\android to platforms\android\src\org\apache\cordova\facebook folder.

Facebookcameraphonegap 18 01

Facebookcameraphonegap 18 02

19. Copy two Javascript files: cdv-plugin-fb-connect.js and facebook-js-sdk.js from - …\sdks\phonegap-facebook-plugin-master\www folder to …\platforms\android\assets\www folder.

Facebookcameraphonegap 19 01

Facebookcameraphonegap 19 02

Also, copy index.html file from - ...\sdks\phonegap-facebook-plugin-master\example\Simple folder to - …\platforms\android\assets\www folder.

Facebookcameraphonegap 19 03

20. Login to your Facebook Developer account and create a new app - SampleCamera. Facebook rules do not allow use of word “FB” in Display Name field for the app. Copy the Facebook App ID to the index.html file. Look for “deviceready” event at the end of the index.html file.

Facebookcameraphonegap 20 01

21. For samples on Camera or how to use the API, refer the documentation on PhoneGap.

22. Build SampleFBCamera project and later click on Run As -> 1 Android Application to deploy it on emulator or device. The Android app will open an alert prompt with message “Device is ready! Make sure you set your app_id below this alert.”. Tap on the OK button. Tap on Login button which will invoke the Facebook Login popup.

Some Helpful Links

These are few more helpful links for the problems which I encountered while configuring camera plugin.

1.To know which plugins are installed run command > phonegap local plugin list
This one is really helpful to verify if camera plugin was included or not.

2.Add the camera permission and feature to manifest file so that the application starts displaying the permissions properly while installing the Android application. Just adding the plugin will not display permission for camera access. Refer this link from StackOverflow. Check the screenshot in this link from PhoneGap community.

Also, make sure the only one JavaScript file is accessed i.e. cordova.js (no need for phonegap.js). Refer this link from StackOverflow.