Facebook Integration with IOS in Phonegap

Posted By : Avilash Choudhary | 26-May-2014

If you want users to login with facebook in your phonegap project this can be done easily with only few steps to follow:


Project setup requirements:  Xcode, phonegap facebook plugin and Facebook SDK.

Register your app with facebook developers page and get APP_ID(https://developers.facebook.com/apps).
In App dashboard on Facebook.  select Apps > create an app then fill the Display Name and Namespace for your app and click on Create App button.

Next, you need to set the Bundle Identifier and configure your Facebook application.
In "Settings" click on "Add Platform" and choose "iOS".  Then you need to add in the “Bundle ID” field your bundle identifier and save the changes.
Bundle Identifier can be found in Xcode in the Project tab.


Facebook SDK for iOS

Download the latest Facebook SDK for iOS, then just add the SDK. Drag the FacebookSDK.framework folder into frameworks in project navigator in Xcode.
Choose create groups for any added folders  and deselect copy items into destination group’s folder When draging the FacebookSDK.framework into your Framework section.
You need to download the cordova facebook plugin to get things work.


Configure your Xcode .plist file 

Follow these three steps:

  1. Create a key called FacebookAppID  and add the app ID there with a string value.
  2. Create a key called FacebookDisplayName and add the Display Name with a string value you configured in the App Dashboard.
  3. Create an array key called URL types with a single array sub-item called URL Schemes. Give this a single item with your app ID prefixed with fb. This is used to ensure the application will receive the callback URL of the web-based OAuth flow.


Facebook Plugin for Cordova

  1. Create a group "ios" in the plugins section of Project Navigator in xcode
  2. Copy FacebookConnectPlugin.h and FacebookConnectPlugin.m from the src/ios folder in Cordova Facebook Plugin folder into "ios" group.
  3. In the config.xml file in the project navigator and add a new entry as a child to the widget tag:
	  <feature name="org.apache.cordova.facebook.Connect">
	           <param name="ios-package" value="FacebookConnectPlugin" />
	  </feature>

 Copy the cdv-plugin-fb-connect.js and facebook-js-sdk.js from the Cordova Facebook Plugin www folder into the www directory in Xcode. Copy the content of index.html from the example/Simple folder into your index.html file in www directory in Xcode. add the phonegap.js, facebook-js-sdk.js and cdv-plugin-fb-connect.js. in script tags in index.html and replace the appID.

	FB.init({
	        appId : your app-id,
	        nativeInterface : CDV.FB,
	        useCachedDialogs : false
	}); 
	var facebook = {};
	facebook.pushLogin = function() {
	FB.login(function(response) {
	    if (response.status == "connected") {
	          alert(response.authResponse.accessToken)        // this is your access token
	    }
	}, 
	    scope : "email"
	});
	};

In FB.init appId is your application id when you have registered it with facebook.With Fb login you can get the access token. With the help of access token you can get all user information.

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..