How to install Phonegap Facebook plugin for iOS

This post has come out of my recent struggle to integrate the Facebook Connect plugin by Dave Johnson and make it work with my Phonegap iOS app. I had a hard time figuring things out as I was new to Phonegap iOS development. I was already doing Android apps with Phonegap, but iOS has given me some tough time. Nevertheless, around 2 days of gloomy and sad face was finally rewarded with a big smile. So, better I document it somewhere so that I do not struggle again and that’s where the inspiration for this post lies. And I must say, the official documentation is pathetic for newbies.
Alright, let’s get started. I will go step by step into the process with all details and screenshots so that it is very easy for you. In this post however, I will not be talking on how to create a Phonegap iOS app, or how to create Phonegap iOS plugins. For that you still need to look at the official documentation. I will only discuss on how we can install the Facebook plugin with a Phonegap iOS app and get started using it.
Before moving further I would like to inform you that I am using Phonegap 2.2.0 for my demo. There are new versions available – 2.5.0 being the latest at the time of writing. So you might want to check the official pages if you are using the latest version of Phonegap. But the steps mentioned below should work with the new versions of Phonegap as well. OK, time to start now.

Note: Phonegap and Cordova are the same (well, at least for me..). I prefer calling Phonegap.

1) Do I need a Mac? Simple answer – Yes, you need a Mac. I have heard and read thousand times about  people asking if iOS apps can be developed in a Windows machine. Simply, I just did not research, instead I have a Mac and I started on it. But the answer is you need a Mac definitely, since you will use XCode and the iOS SDK for development.

2) Create a Phonegap iOS App - I am using Phonegap 2.2.0. I am not going to show how to create a Phonegap iOS app. For that look at this pdf documentation here. If you cannot open it, check out this link which is the pdf source. This should get you started. However I have some screenshots below which should also help you out.
a) I have created a basic Phonegap app – FacebookPluginTest inside Cordova22FacebookTest folder under Documents. See the screenshot below. I have used the Terminal to create the app. You can find details about the command in the document above. So make sure you go through it once.
Create a basic Phonegap app with Terminal b) Open the iOS app that you have just created in XCode by double clicking FacebookPluginTest.xcodeproj. This is how it looks inside XCode. You can see the www folder where we need to put our html/css/js code.
iOS Phonegap project c) After that test it in a simulator. Here I am running my app in the simulator. If everything goes fine you can see something similar like the screenshot below.
Test the app created in the simulator before you move further 3) Download the latest Facebook SDK from https://developers.facebook.com/ios/downloads and install it on your Mac. I am using the SDK3.1.1, but at the time of writing SDK3.2 is available. After installing you can find the files in Documents folder (in case you did not specify any other folder at the time of install). See the screenshot below,
Facebook SDK installation folder 4) Create a Facebook app – You have to create a Facebook app. Any interaction with the Facebook API from your phonegap iOS app happens through an interface that is created by the Facebook app. So navigate to https://developers.facebook.com/apps and create an app. Follow the steps given in point no 4 – Create a Facebook App, from the getting started guide here – http://developers.facebook.com/docs/getting-started/facebook-sdk-for-ios/
a) Use the Bundle Identifier of your Phonegap iOS project. Find it inside XCode’s Project Summary Page. It is the reverse domain url/package name that you typed while creating your project. Check out the screenshot below.
Bundle id of your Phonegap iOS project 5) Next download the (Dave Jonhson’s) Phonegap Facebook Connect plugin from Github -https://github.com/phonegap/phonegap-facebook-plugin. Navigate to Github – and clone the repository. The files will be downloaded to your Mac. After you download you can find the plugin folder structure as specified in the “Project Structure” section of the Plugin’s Github page (the readme file). It has the Facebook JavaScript SDK file, iOS Native Facebook Plugin Code and the plugin’s JavaScript interface code. We will need all of these to integrate with our Phonegap iOS project in XCode. We will see that later in the post.

6) Now that you have all things in place, let’s see how to integrate the plugin and start using it. If you have any issues till now, carefully follow the steps above again.

7) We already have created our basic Phonegap iOS project – FacebookPluginTest and it is currently open inside XCode.

8) Now drag the FacebookSDK.framework folder from the FacebookSDK installation folder (usually inside Documents) into the Frameworks section of the project navigator inside XCode. See the image below
Drag the FacebookSDK.framework folder With this step we are adding the FacebookSDK API to our Phonegap project. Choose ‘Create groups for any added folders’
and deselect ‘Copy items into destination group’s folder (if needed)’ to keep the reference to the SDK installation folder, rather than creating a copy. See the image below. After that click on the Finish button to add the SDK. You can see it inside the Frameworks section of the project navigator inside XCode.
7 9) Now Add the Facebook SDK for iOS resource bundle by dragging the FacebookSDKResources.bundle file from the FacebookSDK.framework/Resources folder (under your Facebook SDK installation folder, usually Documents..) into the Frameworks section of your Project Navigator inside XCode. Again choose ‘Create groups for any added folders’ and deselect ‘Copy items into destination group’s folder (if needed)’. See the image below,
Add FacebookSDKResource.bundle file 10) Add the headers by dragging the DeprecatedHeaders folder from the FacebookSDK.framework/Versions/A/DeprecatedHeaders folder (under your Facebook SDK installation folder, usually Documents..) into the Frameworks section of your Project Navigator. Again choose ‘Create groups for any added folders’ and deselect ‘Copy items into destination group’s folder (if needed)’. This adds the headers as a reference. See the image below,
Add the DeprecatedHeaders folder 11) After adding the three frameworks your Frameworks folder in the project navigator should look like the image below,
10 For the three steps above you can find more information in the Getting Started Guide -Step 5: “Configure a new XCode Project” from Facebook Developer’s page – http://developers.facebook.com/docs/getting-started/facebook-sdk-for-ios/

12) The SDK relies on three other frameworks (AdSupport, Accounts and Social) to use the Facebook features built into iOS6. We need to add these to our project. So click on your project name/icon (the topmost item in the project navigator) and then click on the project name (FacebookPluginTest for us) under Targets. See the image below

Then click on the Build Phases tab in the summary page. Open the “Link Binary with Libraries” panel from the list. See the image below

Click on the (+) icon at the bottom of the panel to add the three frameworks. This will open up a dialog with the list of all Frameworks. Then type Social in the search input box and this will filter the Social.framework in the list below. Then add this framework by clicking on the Add button. See the image below,
Similarly add the other two frameworks – Accounts.framework and AdSupport.framework. Search in the search box as above and then add it. Make sure you make the three frameworks optional. So use the ‘Optional’ flag for iOS6-specific frameworks to support older versions of the iOS operating systems. See the image below,
After adding the three frameworks, the project navigator inside XCode looks like the image below.

You can notice that the frameworks are added under your Project’s name. You can drag the three frameworks to the Frameworks folder as shown in the image below. Or let it be where it is already, as this will not create any problem.

13) Now we need to add the SQLite (-lsqlite3.0) SQL Library and -ObjC linker flags to our project in XCode. Click on the project name in the navigator (topmost item in project navigator) and click the project name under Project (FacebookPluginTest for us…). After that click on the Build Settings tab. See the image below,
Search for Other Linker Flags in the search box on the right. See the image below,
Now add the values -lsqlite3.0 and -ObjC to the list. See the image below. (To get the pop up, double click on the Other Linker Flags..)
After adding it should look like the image below,
14) Now we need to add the Facebook APP ID in our project’s info.plist file. You can find the Facebook APP ID (if you have already created a Facebook App, if not see step 4 above) from the App summary page in https://developers.facebook.com/apps. See the image below for help
Now Open the Resources folder in your project navigator and select the ProjectName-Info.plist file, for us it will be the FacebookPluginTest-Info.plist file. Right click on it and select Open As -> Source Code. See the image below,
Now add the following to the file in the editor panel under the root <dict></dict> tags,

<key>FacebookAppID</key>
<string>Add your APP Id here</string>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>Your scheme id here</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb[Your APP Id here]</string>
    </array>
  </dict>
</array>

where Scheme Id is usually a unique identifier for the scheme, in reverse domain name notation (i.e com.facebook.phonegap.myscheme). You can use any name in place of myscheme. See the image below for help
This step ensures correct re-direct from Mobile Safari or the Facebook app, after permission authorization. But be sure to use your own Facebook APP ID.

15) Now we will add the Facebook JavaScript SDK file to our Phonegap app. So go to your downloaded Phonegap Facebook Connect plugin folder and copy facebook_js_sdk.js under lib folder into the www directory of your project in Xcode. See the two images below
16) Now we will add the Facebook plugin’s native iOS code to our project. So select the two files (FacebookConnectPlugin.h and FacebookConnectPlugin.m) inside native/ios folder under your Phonegap Facebook plugin’s downloaded folder and drag the two files and add it to the Plugins folder inside XCode. Choose ‘Create groups for any added folders’ and deselect ‘Copy items into destination group’s folder (if needed)’. See the image below,
17) Next step is to add the java script interface of the Facebook plugin’s code. This acts as an interface for the native iOS plugin code and your html (note that every Facebook plugin has a javascript .js file and native files which has native code). So open the www folder inside the downloaded Facebook plugin folder and copy the cdv-plugin-fb-connect.js file into the www folder of your project inside XCode. See the image below ,
Now, add the copied file to the www folder of your Phonegap iOS project like you did above when you added the Facebook java script SDK file.

18) Then we have to register the Facebook Connect plugin in the Plugins list. So open the Resources folder in the project navigator inside XCode and select Cordova.plist. Then under Plugins section add the following data – For the key, add org.apache.cordova.facebook.Connect, and its value will be FacebookConnectPlugin. See the image below
When it’s done, it should look like the image below
19) After that we will have to add the Facebook domains to the External Host. The Facebook SDK will try to access various URLs, and their domains must be whitelisted in your Cordova.plist under ExternalHosts. You can either add each subdomain separately or you can allow all domains by adding a *. I opted for the later. See the image below,
With that we have successfully set up the Facebook Plugin with our Phonegap iOS app. For testing if everything is fine, run the app in the simulator. You should see like the image below. We have not tried the Facebook API yet so you will see the Phonegap ready screen again. But this shows that we have set up everything correctly. There may be some warning messages but fortunately no compilation or runtime errors.
Time to run an example now
The Phonegap Facebook Connect plugin comes with two ready to use examples – The Hackbook and the Simple example. So copy the Hackbook contents from inside the examples folder under the downloaded Facebook plugin folder and paste it inside the www folder of your Phonegap iOS project. See the image below,
When there are file conflicts during copying select Replace for all the options.
Now the Hackbook example code is added to your project. Open the index.html file inside XCode for editing and add the Facebook APP Id to the JavaScript snippet. You can find it inside the callback function of the device ready event. See the image below. Add your Facebook APP Id in the required place.
Give a final check. Check if cordova-2.2.0.js, cdv-plugin .js file and the facebook .js sdk file have been referenced inside individual <script> tags in the index.html file. It should be there. In case you are using a different Phonegap version make sure to rename the cordova-x.x.x.js file inside index.html to the version that you are using.
Everything looks fine now. Run the app in the simulator one final time. And Ecstasy!! The Hackbook example opens up in the simulator. You should see something like the image below,

Now in the Hackbook app, you can login and authorize the app and start using it. You can use the Facebook Graph API features there. Similarly you can try out the Simple example that ships with the Phonegap Facebook plugin download. Just copy the files from the downloaded plugin folder to the www folder of your project. And test the app in the simulator.
From here on you can use the Facebook API to add numerous features to your Phonegap iOS app. I hope this will be helpful to all the newbies out there. Leave behind a comment below if I missed something or something was incorrect in this post.

About these ads

31 thoughts on “How to install Phonegap Facebook plugin for iOS

  1. Hi,
    in step 18, the Cordova.plist file was not found in my project, i have been worked on my project over than 3 months ans still running correctly, i can’t find this file, so what should i do?

    • You are using an older version of Phonegap/Cordova, hence the .plist file is not there. Please check the official documentation for the version that you are using.

    • Hi,
      For me also there is no Cordova.plist file. I am using Cordova3.3.0.0.1.1. Please give me a reply. I am not able to complete the fb login for ios.
      I need it very urgently. Please help me.

  2. 5 error when trying to build the app. Using Cordova 2.2.0, Facebook SDK 3.6 and Phonegap Facebook Plugin lateste version.
    I’m getting 5 red alerts: 3 on FacebookConnectgPlugin and 2 on Deprecations: all about : Semantic issue property callbackid
    tks

    • Hi Sourav, I am also need the Facebook login plugin using cordova for both android and ios. I have already successfully done for android. Waiting to develop this ios.
      Which version u r using?
      I am using the cordova version 3.3.0. If i follow this steps can i succeeded? Please give reply.

      • Senthil,
        There might be some issue with the recent versions of the tools used by me in this tutorial. So you might get some errors. I did this a long time ago and thing have changed since then. You need to look around and see if any body has done this with latest SDK’s. Unfortunately I am not able to retry the Facebook plugin due to time constraints.
        Thanks.
        Joseph

  3. Awesome joseph! thank very much. Its very helpful. I’m using cordova 3.2 and i did just two adjustment for this version (e.g. cordova.plist now is config.xml, and some changes on facebook plugin folders structure) but nothing to be scared.
    Great job!

    • Hi debo,
      I am also need to develop this ios – facebook login in cordova 3.3.0.0.1.1. Can you please send me the the step by step instructions to develop?
      Please reply. I need it urgently. Please reply me.

    • I stuck with this below step to edit the .plist file.

      https://developers.facebook.com/docs/ios/getting-started

      Step 4: Configure your Xcode Project
      I added the facebookSDK Frameworks into project framework folder.
      I stuck with this Configure the .plist

      There is no folder named Supporting Files in xcode,
      So i couldn’t add edit the FacebookAppId and the remaining told by the step 4.

      Where can i check this? I am developing using cordova3.3.0.1.1 and Xcode5 with ios-sdk-7

    • Hi debo,
      Please give me reply to develop fb plugin for ios. I’m developing using cordova 3.3.0.0.1.1. Please help me. More than 4 days i spent. Still couldn’t succeed. Please help me and give me a reply

    • After setup ios – fb plugin, got the following error when click the login button.

      error app not set up the developers of this app have not set up this app properly for facebook login. I did everything in fb app details.

    • Hi debo,
      I have done almost. Just one thing to make changes in config.xml instead of Cordova.plist. How can i add the plugin to config.xml. Please reply me which one is correct to add in config.xml from the following two.

      1)

      2)

  4. I have succesfully integrate facebook & when i run build succed but does’nt responce from the facebook login… can you please help me out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s