Checklist for setting Facebook Connect for PhoneGap

New hybrid apps developers might find difficult to get Facebook connect work in a PhoneGap / Ionic project. This tutorial will list out some checklist for setting Facebook Connect for PhoneGap – Ionic. We will use the Simple Facebook Connect without PhoneGap plugin to be able to login with Facebook in your apps.

• First, clone OpenFB project and copy necessary files to your ionic/phonegap project (openfb.js, html code and inclusion statements in index.html).
• Remember to add inappbrowser plugin to your project:

  [bash]cordova plugins add org.apache.cordova.inappbrowser[/bash]

• Create a new facebook apps at https://developers.facebook.com/apps/.
• Remember the bundle id in your config.xml of your ionic/phonegap project. Go to your Facebook apps and “Add Platform” in your apps “Settings” tab. Put the bundle id into “Bundle ID” for iOS and “Package Name” for Android. We can leave the “iPhone Store ID” and “Class Name” + “Key Hashes” blank in development mode.
  • Do not use your existing apps ID since it might be connected to another Facebook apps. We must use the real apps ID or leave it blank to get the Facebook features work.
• Remember to publish the apps in the “Dashboard” tab (you need to enter a contact email) and answer “Yes” to “Do you want to make this app and all its live features available to the general public?” in the “Status and Review” tab. If you forgot this step, you will receive an error told that “App Not Setup: The developers of this app have not set up this app properly for Facebook Login.” when running in your simulators/devices.

It’s done. Enjoy!