Micro-library that lets you integrate browser and Cordova apps with Facebook with no plugin or SDK dependency.
CSS JavaScript HTML
Latest commit 1fccc32 May 26, 2015 @ccoenraets remove project files
Permalink
Failed to load latest commit information.
LICENSE Create LICENSE May 11, 2014
README.md edit readme May 26, 2015
bower.json version 0.5 May 26, 2015
index.html version 0.5 May 26, 2015
indexng.html version 0.5 May 26, 2015
logoutcallback.html version 0.5 May 26, 2015
ngopenfb.js version 0.5 May 26, 2015
oauthcallback.html Initial commit Apr 7, 2014
openfb.js version 0.5 May 26, 2015
ratchet.css Initial commit Apr 7, 2014
styles.css Initial commit Apr 7, 2014

README.md

OpenFB

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:

  • No plugin dependency and no uncertainties when new versions of Cordova or the Facebook SDK are released.
  • Works for all platforms, including platforms for which a version of the Facebook plugin doesn't exist.
  • Works for both browser-based apps and Cordova apps.

Cons:

  • Not full-fledged, less out-of-the box features.
  • Integration not as tight. For example, no native dialogs, etc.

Browser and Cordova Apps

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".

Getting Started

Creating a Facebook application

  1. Login to Facebook

  2. Access https://developers.facebook.com/apps, and click Add New App

  3. Select www as the platform

  4. Type a unique name for your app and click Create New Facebook App ID

  5. Specify a Category, and click Create App ID

  6. Click My Apps in the menu and select the app you just created

  7. Click Settings in the left navigation

  8. Click the Advanced Tab

  9. In the OAuth Settings section, add the following URLs in the Valid OAuth redirect URIs field:

  10. Click Save Changes

Running the Sample in the Browser

  1. Copy the Facebook App ID for the app you just created and paste it as the first argument of the openFB.init() method invocation in index.html.
  2. Load index.html, from a location that matches the redirect URI you defined above. For example: http://localhost:8100

Running the Sample in Cordova

  1. Create a Cordova project

    cordova create sample com.openfb.sample sample
    
  2. Add the InAppBrowser Plugin

    cd sample
    cordova plugins add org.apache.cordova.inappbrowser
    
  3. Delete the contents of the www directory

  4. 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="cordova.js"></script>. cordova.js does not need to (and shouldn't be) present in your www folder: it is automatically injected by the cordova build process.

  5. 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
    
  6. Run the project on device or in the emulator

AngularJS Wrapper

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":

  • As an Angular service instead of a global object
  • Using promises instead of callbacks

indexng.html provides an AngularJS sample.

Check out the Ionic Tutorial for a complete example.

Summary

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.