PhoneGap Facebook Connect Plugin
This is the offical plugin for Facebook Connect in PhoneGap!
This is all licensed under MIT except for
app/www/facebook_js_sdk.js which is the Facebook JS SDK and is Apache 2.0.
- PhoneGap v1.0+
To use this plugin you will need to make sure you've registered your Facebook app with Facebook and have an APP_ID (https://developers.facebook.com/apps). If you plan on rolling this out on Android, please note that you will need to generate a hash of your Android key(s) and submit those to the Developers page on Facebook to get it working. Furthermore, if you are generating this hash on Windows (specifically 64 bit versions), please use version 0.9.8e or 0.9.8d of OpenSSL for Windows and not 0.9.8k. Big ups to fernandomatos for pointing this out!
|-example | `-www | `-index.html |-lib | |-facebook-js-patch | |-facebook-js-sdk | |-facebook-android-sdk | `-facebook-ios-sdk |-native | |-android | `-ios `-www `-pg-plugin-fb-connect.js
lib/facebook-js-patch is a diff file between the facebook-js-sdk and
the modified file to get it working with this plugin. This plugin
monkey-patches some of the facebook-js-sdk methods to hook in an
interface into the native Facebook SDKs.
native/ios contain the native code for the plugin for both Android and iOS platforms.
We've provided a few
install scripts to get you rolling pretty quick. PLEASE NOTE: only Android works for the
install scripts at this time.
Download the latest version of PhoneGap from www.phonegap.com.
Create an Android or iOS PhoneGap project. Let's assume you have this project under
Make sure you pull down all of the submodules by running
git submodule update --init.
Depending what you've got handy, you could:
- ruby (TODO!):
./install ~/phonegap-facebook <platform>
node install.js ~/phonegap-facebook <platform>
- Windows (TODO!):
install.bat ~/phonegap-facebook <platform>
- ruby (TODO!):
In the above,
<platform> represents either "android" or "ios".
If you don't like this script magic, you can always roll up your sleeves and get into the nitty-gritty for the platform of your choice:
In the PhoneGap Android application you will need to put the following in your
<plugin name="com.phonegap.facebook.Connect" value="com.phonegap.facebook.ConnectPlugin" />
- First run
git submodule update --initto initialize and pull down the versions of the JS and Android Facebook SDKs that work with this plugin; they will end up under
- Next, build the JS file.
cd lib/facebook-js-sdkand run
php all.js.php >> ../facebook_js_sdk.js. This will create the JS SDK file under
lib/facebook_js_sdk.js. Please note: the output filename is important as the patch assumes that filename!
cd ..and apply the patch file by running
patch < facebook-js-patch.
- NOTE: I haven't been able to compile the facebook android SDK into a
jar with success. So, I just copied the source into my generated
PhoneGap application directory and imported the generated PhoneGap
Android package as an import at the top of FbDialog.java. TODO: Fix this
cd facebook-android-sdk/facebookand run
jar cf facebook-android-sdk.jar src. This will create a
facebook-android-sdk.jarfile that you need to copy into your generated PhoneGap-Android's
libsdirectory (and also add to your build path).
- First run
From the PhoneGap Facebook Connect Plugin folder copy the contents of the
native/android/folder into the root of your PhoneGap Android application.
From the PhoneGap Facebook Connect Plugin folder copy the
lib/facebook_js_sdk.jsfiles into your application's
Now you are ready to create your application! Check out the
example folder for what the HTML, JS etc looks like. Note that you will need to replace your appId if you use the example index.html file.
You can run the application from either the command line (
ant clean && ant debug install) or from Eclipse.
iOS (Mac OS X)
NOTE: If you are having problems with SBJSON conflicts, download the latest version of git clone the latest callback-ios code, build the installer, and run the installer to get updated!
- Create a basic PhoneGap iOS application. See http://www.phonegap.com/start/#ios-x4
- From the PhoneGap Facebook Connect Plugin folder copy the contents of the native/ios folder into your app in Xcode (usually in the Plugins folder group). Make sure it is added as a "group" (yellow folder)
- Modify the APP_SECRET value in FacebookConnectPlugin.m with your Facebook app's APP_SECRET
- Find the PhoneGap.plist file in the project navigator, expand the "Plugins" sub-tree, and add a new entry. For the key, add com.phonegap.facebook.Connect, and its value will be FacebookConnectPlugin
- From the PhoneGap Facebook Connect Plugin folder copy the contents of the www folder into the www directory in Xcode (don't forget to add script tags in your index.html to reference any .js files copied over)
- for Xcode 4, you will need to build it once, and heed the warning - this is an Xcode 4 template limitation. The warning instructions will tell you to drag copy the www folder into the project in Xcode (add as a folder reference which is a blue folder).
- Under the group Supporting Files, find your [PROJECTNAME]-Info.plist, right-click on the file and select Open As -> Source Code, add the URL Scheme from the section below (you will need your Facebook APP_ID)
- Run git submodule update --init to initialize and pull down the versions of the JS and iOS Facebook SDKs that work with this plugin; they will end up under lib/.
Next, build and patch the JS file:
cd lib/facebook-js-sdk && php all.js.php >> ../facebook_js_sdk.js && cd .. && patch < facebook-js-patch
This will create and patch the JS SDK file under lib/facebook_js_sdk.js. Please note: the output filename is important as the patch assumes that filename!
From the PhoneGap Facebook Connect Plugin folder copy the file lib/facebook_js_sdk.js into the www directory in Xcode (don't forget to add script tags in your index.html to reference the .js file copied over)
lib/facebook-ios-sdk/srcDrag the facebook-ios-sdk.xcodeproj file into your project, this will create it as a sub-project (change it's Base SDK to 'Latest iOS')
- Click on your project's icon (the root element) in Project Navigator, select your Target, and the Build Phases tab.
- From the Build Phases tab, expand Target Dependencies, then click on the + button
- Add the build product from the facebook-ios-sdk sub-project
- From the Build Settings tab, search for Header Search Paths
- Add the value /Users/Shared/PhoneGap/Frameworks/PhoneGap.framework/Headers
- From the facebook-ios-sdk.xcodeproj sub-project, drag out the FBConnect folder into your project's Plugins folder, and add it as a group (yellow folder).
- Add the Facebook domains to the ExternalHosts lists, as described below.
- Run the application in Xcode.
iOS URL Whitelist
The Facebook SDK will try to access various URLs, and their domains must be whitelisted in your PhoneGap.plist under ExternalHosts.
You can either add each subdomain separately:
Or you can allow all Facebook domains with:
iOS URL Scheme
Make sure you add the scheme to your [PROJECTNAME]-Info.plist (located as one of the files in your Xcode project), substitute [APP_ID] and [SCHEME_ID] below to the appropriate values. This is to handle the re-direct from Mobile Safari or the Facebook app, after permission authorization.
- [SCHEME_ID] is usually a unique identifier for the scheme, in reverse domain name notation (i.e com.facebook.phonegap.myscheme)
- [APP_ID] is the Facebook app id given by Facebook
<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleURLName</key> <string>[SCHEME_ID]</string> <key>CFBundleURLSchemes</key> <array> <string>fb[APP_ID]</string> </array> </dict> </array>