Systenics Solutions Logo
  • Home start here
  • Solutions services we provide
  • Products products we build
  • About Us who we are
  • Contact Us request a quote
  • Jobs work for us
  • Blog our views

Blog

Home / Blog

Setup Facebook Login and Camera for Android App using PhoneGap 3.4

  • by:
  • in:
  • tags: Android, Phonegap, Windows
  • 0 Comments

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.

Pre-requisites

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 org.apache.cordova.camera

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" />
</feature>

Facebookcameraphonegap 16 01

Add access origins as given in documentation.

<access origin="m.facebook.com"/>
<access origin="graph.facebook.com"/>
<access origin="api.facebook.com"/>
<access origin="*.fbcdn.net"/>
<access origin="*.akamaihd.net"/>

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 “ConnectPlugin.java” 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.

Share This Post:

About the Author

This post was written by on Monday March 31, 2014.

Related Posts
  • Setup Phonegap 3.4 on Windows 8 64-bit to create Android applications - 19 March 2014
comments powered by Disqus
< Older Newer >
All Categories
  • Programming
  • General
  • DevOps
Tags
  • .NET (7)
  • Ajax (1)
  • Android (3)
  • ASP.NET (1)
  • ASP.NET 4.5 (1)
  • ASP.NET 5 (1)
  • ASP.NET 6 (1)
  • asp.net core (1)
  • ASP.NET MVC (11)
  • AuctionWorx (2)
  • Bootstrap (4)
  • Build and Release (1)
  • CI (1)
  • ClickOnce (1)
  • ClientDependency (1)
  • Code Signing (1)
  • Continuous Integration (1)
  • C-Sharp (8)
  • devops (1)
  • ExpressJS (1)
  • Interview Process (1)
  • iOS (1)
  • Linux (1)
  • Lucene (1)
  • MVC (2)
  • NodeJS (1)
  • Phonegap (3)
  • Razor (3)
  • Salesforce (2)
  • Socket.IO (1)
  • SQL CE 3.5 SP2 (1)
  • SQL Server (1)
  • Sync (1)
  • Sync Framework v2.1 (1)
  • Umbraco 6 (5)
  • Umbraco 7 (4)
  • Visual Studio 2015 (1)
  • Visual Studio Online (1)
  • VMWare ESXI 6.0 (1)
  • WCF (1)
  • Windows (2)
  • WPF (2)

About Us

Systenics Solutions is a customized software development company. We specialize in building Cloud, Web, and Mobile based applications using the latest Cloud Technologies. Our fine-tuned agile processes help you smoothly progress from conceptualizing your ideas, building proto-types/wireframes to bringing your product to market, giving our clients complete visibility and control at all times. We strive to provide our global clients of various sizes with cost effective benefits of offshore development while providing expert technical services.


Microsoft Partner - Gold Cloud Platform

Contact Us

Systenics Solutions LLP

The Affaires, Unit #F-1, 1st Floor, Plot #9, Sector - 17, Opp. Bhumiraj Costarica, Sanpada, Navi Mumbai - 400705, India.

 

Telephone: +91-22-4825 0808

Email: info@systenics.com

Skype: saurabhn

GSTIN: 27AELFS2160N1ZJ

Testimonials

"Coming from a non-technical background, Saurabh and his team at Systenics took my business idea and turned it into a fully functional application which surpassed my expectations! You can be sure with them that all your IT related concerns will be covered."

Shobhan, CEO - IITJobs Inc

"The ability Systenics showed in code signing and deploying my click once code in Microsoft visual was truly awesome. I interviewed and tested 6 different development companies and only one was actually able to get the job done - that was Systenics Solutions! Professional, courteous and reliable - I highly recommend them and am very happy and eager to continue growing our business relationship now and in the near future. Thank you Saurabh"

Andre Pierre

I contracted with Systenics about 6 months ago, in an effort to customize auction software for a new company I am launching in the US. The entire process was as smooth as could be. Their estimate for the project was reasonable, and very close to the final number. I would absolutely use this company again, and I have so much confidence in their ability to work with me, I even agreed to a support agreement with them long term. Their ability to communicate with me in the US was always very timely. They listened to my thoughts and ideas, and then suggested some changes, that made my software have even greater value. I cannot thank them enough, and would highly suggest their quality services to anyone. Their fee structure is fair and their timeliness of work is second to none. I would strongly recommend anyone consideration doing business with them to contact me to discuss. On a scale of 1 to 10, they are a 10! A completely satisfied customer!

Joe Lefebvre - Pharmabid, LLC

Systenics did a great job on our customization , they clearly understood the requirements and completed the task in a timely manner. They were very thorough in project discussions and made sure that we understood how the customization works and suggested improvements when required

Mike Singh - Dr. Liquidator

Systenics Solutions has consistently delivered innovative solutions that have helped us stay ahead of the competition.

Rob Gaughan - Pedigree Sales

Systenics Solutions deep understanding of the AuctionWorx platform has been invaluable to our business. They’ve helped us optimize our operations and increase our profitability.

Neal Barnhill - A-Stock

Copyright © 2012-2024 Systenics Solutions LLP. All rights reserved.

BACK TO TOP