Facebook plugin integration for PhoneGap 2.1 for iOS and Android

Posted By : Pawanpreet Singh | 15-Oct-2012

In this blog I am going to describe the process of integrating the Facebook Plugin for PhoneGap 2.1 in iOS and Android platforms.

Let's Get Started

Android

1. For taking the advantage of this plugin make register your app on Facebook-Developer.

2. Download the plugin from GIT. (You need GIT client to follow the further steps you can download the GIT client from their site http://www.github.com install commandline also while installing.)

  • goto command prompt or terminal select the directory where you want to download the content of repo using cd command.
  • type following command:
git clone https://github.com/davejohnson/phonegap-plugin-facebook-connect

It will download the official facebook plugin to the destination you described using command line.

3. Make a Basic PhoneGap app (You can view my previous blog for further assistance).
  NOTE: You must set Minimum Android Target to eight.

4. Copy the written below to the config.xml which is present in the res -> xml under plugin as a children of it:

5. Now its Time to make a build of Android's Facebook Software Development Kit & then including generated javascript file by going through the following steps:

  • Move inside the directory you downloaded from GIT.
  • Execute  git submodule update --init it will update the plugin to latest build.
  • Now its time to copy the folderssrc & res directories from lib -> facebook-android-sdk ->facebook  to  in your project.if dialog box appears press No.
  • open fbDialog.java file and in the top of this file import the generated Android Cordova package.
  • Open the Terminal and write cd facebook-android-sdk/facebook after this write another command jar cf facebook-android-sdk.jar src. By typing these commands there will be a file named facebook-android-sdk.jar,Copy this in the generated Cordova-Android's under libs folder & also add its build path select the libs folder in your project and right click on it select Build Path and move to Configure Build Path here a new window will open select libraries from the above tab Menu and click on Add jar then locate the Facebook-android-sdk.jar file from your project.

6.  Return to Downloaded Facebook Plugin Directory in it move to native and then to android directory from here copy src directory to your project.if a dialog box appears press No.

7. From Facebook Plugin Directory copy following files to www folder present in assists of your android project.

  • cdv-plugin-fb-connect.js present in www directory.
  • facebook_js_sdk.js present in lib directory.
  • contents of folder Hackbook present in example directory, if dialog box appears click Yes.

8. You must Enter your Facebook's App-ID in the index.html file.

9. Run your application Project

issues

  • App crashes in Android 4.x while login through facebook

Solution: You have to make following changes in the ConnectPlugin.java present in the org.apache.cordova.facebook package in the src folder in the eclipse. find and change the following line


public void onActivityResult(int requestCode, int resultCode, Intent data) {

with


public void onActivityResult(final int requestCode, final int resultCode, final Intent data) {

and find and change the following line


facebook.authorizeCallback(requestCode, resultCode, data);

with


new Thread(new Runnable(){
		@Override
		public void run() {
			facebook.authorizeCallback(requestCode, resultCode, data);
		}
	}).start();

 

iOS

 

1. For taking advantage of this plugin you have to register your application with Facebook_Developer_Portal and have an APP-ID (https://developers.facebook.com/apps).

2.  Download the plugin from the oficial link.
Note: The above plugin described in the android section does not supports the PhoneGap 2.x link provided here will have the support for PhoneGap 2.x.

3. You have to Download and install the current Facebook SDK iOS Dev Center.

4.   Make a Basic PhoneGap app (You can view my previous blog for further assistance).

5. Now its time to add Facebook SDK for iOS by following steps .

  • You have to copy the Facebook's Software Development Kit Framework made for iOS by drag and drop FacebookSDK.framework directory from SDK's directory to the Frameworks directory in your Project,Choose the Create Group option when a dialog box appears.
  • Now copy by drag and drop the FacebookSDKResources.bundle from Resources directory present in FacebookSDK.framework to the Frameworks directory of project,Choose the Create Group option when a dialog box appears.
  • You now need to add header by copying by drag and drop DeprecatedHeaders Directory from the FacebookSDK.framework/Versions/A/ directory to Frameworks folder in project,Choose the create group option when a dialog box appears.
  • click project's icon in project Navigator,move to the tab saying Build Settings,then find Other Linker Flags from search tool,then you have to add -lsqlite3.0 as value in it.
  • From Plugin directory copy facebook_js_sdk.js present in lib to www folder of your project.
  • click project's icon in project navigator, In Target move to Tab named Build Phases click on Link Binary with Libraries and add Social.framework,Accounts.framework,AdSupport.framework frameworks and remember to select optional framework so that it can support the iOS6 pre apps.

6.  Adding the Facebook plugin in Project.

  • From Plugin directory move to iOS directory present in native directory and copy whole contents of it to your project (commonly in Plugins directory group),choose the create group option when a dialog box appears.
  • Move in Resources folder in your project here you will find file named the Cordova.plist open it and add a Key-value pair as a child under Plugins where key will be org.apache.cordova.facebook.Connect and value is FacebookConnectPlugin.
  • In the Plugins directory copy whole content of www directory to www in your Project.
  • Now its time to do Whitelisting of Facebook's Domains,Open Cordova.plist present in Resources Directory in Project,then add domains given below as the list of ExtenalHosts.

*.facebook.*
*.fbcdn.*
*.akamaihd.*

Or you can allow all domains with:

*

7.  Running the example.

  • Move to Resources folder in your project, you will find a file named (project's name)-Info.plist, open it add new entry with key-value pair,where key will be FacebookAppId and value will be your Facebook's App-ID.
  • now open the (project's name)-Info.plist file as Source code by Right Clicking on it and selecting Source Code in Open As option and here you have to add the following (You need to add your Facebook's App-ID in the code)

CFBundleURLTypes

    
        CFBundleURLName
        [SCHEME_ID]
        CFBundleURLSchemes
        
            fb[APP_ID]
        
    

SCHEME_ID and APP_ID SCHEME_ID is a unparalleled identifier in reverse domain order (i.e com.oodles.cordova.myscheme), APP_ID is the app id which you get after registering your app with facebook.

  • In Plugin directory you will find folder named example, copy HackBook or Simple folder contents to your www folder of your project.
  • change the App-ID in index.html
  • Run the App.

issues :-

  • Facebook SDK 3.1 for ios runs on ios 6 but crashes on ios 5.x (dyld Error)

solution : While  adding AdSupport.framework, Social.framework, and Accounts.framework, there is drop down menu to the right that where you can select between "Required" and "Optional”, Here you have to select it as Optional.

About Author

Author Image
Pawanpreet Singh

Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.

Request for Proposal

Name is required

Comment is required

Sending message..