26/7/2014

phonegap-build/FacebookConnect at 962eb0a1c07935ff813e28aa9eaa5581f2e10416

This repository

Search or type a command

Explore

Gist

Blog

Help

felipejorgeas

phonegap-build / FacebookConnect

Watch

Star

32

98

Fork

886

forked from Wizcorp/phonegap-facebook-plugin

232 commits

1 branch

tree: 962eb0a1c0

12 releases

20 contributors

FacebookConnect /

Code

Issues
Pull Requests

update for 3.0

goya authored on 18 Oct 2013

latest commit 962eb0a1c0

example

Update JS file names

9 months ago

src

update for 3.0

9 months ago

test

fixing repo

www

added facebook impressions to track plugin usage

2 years ago
a year ago

.gitignore

Fix android instructions so that the plugin name works

LICENSE

0.3.2

README.md

README fixes

9 months ago

plugin.xml

update for 3.0

9 months ago

3 years ago
a year ago

47

Pulse
Graphs
HTTPS clone URL

https://github.com/phone
gap-build/Facebo

You can clone w ith HTTPS, SSH,

or Subversion.

Clone in Desktop
Download ZIP

README.md

Apache Cordova Facebook Plugin

This is the official plugin for Facebook in Apache Cordova/PhoneGap!
The Facebook plugin for Apache Cordova allows you to use the same JavaScript code in your Cordova
application as you use in your web application. However, unlike in the browser, the Cordova application will use
the native Facebook app to perform Single Sign On for the user. If this is not possible then the sign on will
degrade gracefully using the standard dialog based authentication.
Supported on PhoneGap (Cordova) v3.0.0 and above.

Facebook Requirements and Set-Up

The Facebook SDK (both native and JavaScript) is changing independent of this plugin. The manual install
instructions include how to get the latest SDK for use in your project.
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 iOS, please note that you will need to ensure that you have properly set up your
Native iOS App settings on the Facebook App Dashboard. Please see the Getting Started with the Facebook
SDK: Create a Facebook App section, for more details on this.
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!

Project Structure
|_example

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

1/5

26/7/2014

phonegap-build/FacebookConnect at 962eb0a1c07935ff813e28aa9eaa5581f2e10416
| |_Simple
| | |_index.html
| |_HackBook
|
|_index.html
|
|_README
|
|_hackbook.manifest
|
|_img
|
|_css
|
|_js
|_test
| |_pg-plugin-fb-connect-tests.js
|_src
| |_android
| | |_ConnectPlugin.java
| | |_facebook
| |_ios
| |_FacebookConnectPlugin.m
| |_FacebookConnectPlugin.h
| |_facebook
|_www
| |_cdv-plugin-fb-connect.js
| |_facebook-js-sdk.js
www/facebook-js-sdk.js

is the modified facebook-js-sdk. It already includes the hooks to work with this plugin.

www/cdv-plugin-fb-connect.js
src/android

and

src/ios

is the JavaScript code for the plugin, this defines the JS API.

contain the native code for the plugin for both Android and iOS platforms. They also

include versions of the Android and iOS Facebook SDKs. These are used during automatic installation. During
manual installation, you are encouraged to download the most recent versions of the Facebook SDKs for you
projects.

Adobe PhoneGap Build

If using this plugin on Adobe PhoneGap Build you can ignore the instructions below and go straight to the
PhoneGap Build documentation available here.

Manual Android Installation

1. Create a basic Cordova Android application.
NOTE: Min Target has to be set to 8. The plugin has an issue if you set your minimum target higher
than that. You can edit this in your Android Manifest file. Set the Project Build Target to at least 11 if you
see Android Manifest errors related to newer attributes that have been added in 2.2.0.
2. In the Cordova Android application you will need to put the following in your

res/xml/config.xml

file as a

child to the widget tag:

<feature name="org.apache.cordova.facebook.Connect">
<param name="android-package" value="org.apache.cordova.facebook.ConnectPlugin" />
</feature>

1. Configure the URL whitelist in the

res/xml/config.xml

file, by modifying or adding new access entries. You

can either add each subdomain separately:

m.facebook.com
graph.facebook.com
api.facebook.com
*.fbcdn.net
*.akamaihd.net
Or you can allow all domains with (set to this by default):
<access origin="*" />

1. You'll need to set up the Facebook SDK for Android:

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

2/5

26/7/2014

phonegap-build/FacebookConnect at 962eb0a1c07935ff813e28aa9eaa5581f2e10416
Install the Facebook SDK for Android and the Facebook APK
Import the Facebook SDK into Eclipse
Link the Facebook SDK library to your project. View the properties for the project, and navigate to the
'Android' tab. In the lower part of the dialog, click 'Add' and choose the 'FacebookSDK' project from the
workspace.
Add a new

com.facebook.LoginActivity

AndroidManifest.xml

activity to your app to handle Facebook Login. Open up your

file and add this additional activity:

<activity android:name="com.facebook.LoginActivity"
android:label="@string/app_name" />

2. From the Cordova Facebook Plugin folder copy ConnectPlugin.java from

of your Cordova Android application into

src/android/

src/org/apache/cordova/facebook/ .

folder into the root

You may have to create that

directory path in your project.

3. From the Cordova Facebook Plugin folder copy the
sdk.js

and

example/HackBook/

www/cdv-plugin-fb-connect.js , www/facebook-js-

files into your application's

assets/www

folder. Overwrite the existing

index.html file.
4. Replace your appId in the new index.html file. Leave the quotes.
Now you are ready to create your application! Check out the

example

folder for what the HTML, JS etc looks

like.
You can run the application from either the command line (

ant clean && ant debug install )

or from Eclipse.

Manual iOS Installation (Mac OS X)

NOTE 1: If you're upgrading from SDK 3.0 to 3.8 in the iOS6, you can't ask for both read and write permissions
when the user is authenticating. If you do this you'll get a

com.facebook.sdk error 2

error alert. This happens

due to a flow change in the 3.8 SDK. More info about this can be found in the official docs. Also, make sure you
have configured the app's Bundle ID in the Facebook app details, under the "Native iOS App" configuration,
otherwise you'll get another

com.facebook.sdk error 2

alert. At least, if some of your earlier authentications

failed, the device may turn the app to off in Settings > Facebook > Allow These Apps to Use Your Account, so,
make sure your app is allowed.
(To be updated) View the Video

Create a Basic Cordova App

Create a basic Cordova iOS application by following the iOS Platform Guide

Add the Facebook iOS and JavaScript SDK

1. Download the latest Facebook SDK for iOS from the iOS Dev Center.
2. Add the Facebook SDK for iOS Framework by dragging the FacebookSDK.framework folder from the
SDK installation folder into the Frameworks section of your Project Navigator.
3. 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.

Add the Cordova Facebook Plugin

1. Locate the plugins section of your Project Navigator and create a group "ios". Make sure it is added as a
"group" (yellow folder)
2. From the Cordova Facebook Plugin folder copy FacebookConnectPlugin.h and
FacebookConnectPlugin.m from the src folder into the new group "ios".
3. Find 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>

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

3/5

26/7/2014

phonegap-build/FacebookConnect at 962eb0a1c07935ff813e28aa9eaa5581f2e10416
1. From the Cordova Facebook Plugin folder copy the contents of the www folder into the www directory in
Xcode.

Run the included samples

1. Under the group Resources, find your [PROJECTNAME]-Info.plist, add a new entry. For the key, add
FacebookAppID, and its value is your Facebook APP_ID
2. Under the group Resources, 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)
3. You can quickly test the examples by following the next instructions then mirror the same process for your
app.
4. From the example folder, copy either the contents of HackBook folder or the Simple folder into your www
directory in Xcode. Overwrite the original index.html file in your project. For HackBook, overwrite the original
css and js folders as well.
5. Make sure the <script> tags are added and are correct in the index.html. This include a tag for phonegap.js,
facebook-js-sdk.js and cdv-plugin-fb-connect.js.
6. Add your AppID to your index.html. Should be in the callback for the deviceready event. Leave the quotes.
7. 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 config.xml as
an access entry.
You can either add each subdomain separately:
m.facebook.com
graph.facebook.com
api.facebook.com
*.fbcdn.net
*.akamaihd.net
Or you can allow all domains with (set to this by default):
<access origin="*" />

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] below to the appropriate values (replace those brackets!). This is to handle the redirect from Mobile Safari or the Facebook app, after permission authorization.
[APP_ID] is the Facebook app id given by Facebook
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb[**APP_ID**]</string>
</array>
</dict>
</array>

Automatic Installation
This plugin is based on plugman. To install it to your app, simply execute plugman as follows; It does not
currently work with plugman at all. WORK IN PROGRESS

plugman install --platform [PLATFORM] --project [TARGET-PATH] --plugin [PLUGIN-PATH] --variable APP_ID="[APP_ID]" --variable APP_NAME="[APP_NAME]

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

4/5

26/7/2014

phonegap-build/FacebookConnect at 962eb0a1c07935ff813e28aa9eaa5581f2e10416
where
[PLATFORM] = ios or android
[TARGET-PATH] = path to folder containing your phonegap project
[PLUGIN-PATH] = path to folder containing this plugin
[APP_ID] = Your APP_ID as registered on Facebook

2014 GitHub, Inc.

Terms

Privacy

Security

Contact

https://github.com/phonegap-build/FacebookConnect/tree/962eb0a1c07935ff813e28aa9eaa5581f2e10416

Status

API

Training

Shop

Blog

About

5/5