OpenFB is a Micro-Library for Facebook integration in JavaScript apps running in the browser and in Cordova.
OpenFB has no dependency: You don't need the Facebook plugin when running in Cordova. You also don't need the Facebook SDK.
OpenFB allows you to login to Facebook and execute any Facebook Graph API request.
Here are a few code examples...
Login using Facebook:
openFB.login(callback, {scope: 'email,read_stream,publish_actions'});
Get the user's list of friends:
openFB.api({path: '/me/friends', success: successHandler, error: errorHandler});
Post on the user's feed:
openFB.api(
{
method: 'POST',
path: '/me/feed',
params: {
message: 'Testing the Facebook Graph API'
},
success: successHandler,
error: errorHandler
});
The approach used in OpenFB (plain OAuth + direct requests to Graph API endpoints) is simple and lightweight, but it is definitely not perfect.
Pros:
Cons:
The library works for both browser-based apps and Cordova/PhoneGap apps. When running in a browser, the OAuth URL redirection workflow happens in a popup window. When running in Cordova, it happens inside an "In-App Browser".
Login to Facebook
Access https://developers.facebook.com/apps, and click Add New App
Select www as the platform
Type a unique name for your app and click Create New Facebook App ID
Specify a Category, and click Create App ID
Click My Apps in the menu and select the app you just created
Click Settings in the left navigation
Click the Advanced Tab
In the OAuth Settings section, add the following URLs in the Valid OAuth redirect URIs field:
Click Save Changes
Create a Cordova project
cordova create sample com.openfb.sample sample
Add the InAppBrowser Plugin
cd sample
cordova plugins add org.apache.cordova.inappbrowser
Delete the contents of the www
directory
Copy index.html
and openfb.js
from the OpenFB project to the www
directory of your Cordova project
Make sure your index.html includes
<script src="https://github.com/ccoenraets/OpenFB/raw/master/cordova.js"></script>
. cordova.js does not need to (and shouldn't be) present in yourwww
folder: it is automatically injected by the cordova build process.
Make sure you are in your Cordova project's root directory, add a platform, and build the project. For example:
cordova platform add ios
cordova build ios
Run the project on device or in the emulator
If you are using AngularJS, you can use ngOpenFB which provides a wrapper around the OpenFB library and allows you to use OpenFB "the Angular way":
indexng.html provides an AngularJS sample.
Check out the Ionic Tutorial for a complete example.
The Facebook Plugin is still the best technical solution to integrate your Cordova app with Facebook because it provides a tighter integration (using native dialogs, etc). However, if you are looking for a lightweight and easy-to-set-up solution with no dependencies, or if you are targeting mobile platforms for which an implementation of the plugin is not available, you may find this library useful as well.