The Cocoon Facebook plugin is a Cordova plugin aimed at providing easy integration with  the Facebook SDK.

Important: Before continuing make sure that you have already created a Facebook app. This could be a long process, please read the Facebook documentation about how to create an configure a Facebook application for Android or iOS before continuing with the Cocoon plugin integration.

Installation

To add the Facebook plugin to your project first go to your project configuration and once there go to the Setting  section and click on the “Plugins” tab. You should see something like this:

New Cocoon

If you click on the “Cocoon” category you will see al the Cocoon available plugins.  Over the plugins list you will see a dropdown menu set to “All” by default. Click on the menu to see the available Cocoon plugins categories, you should see a list of plugins with at least the following groups:

Screen Shot 2016-01-05 at 16.40.33

Select the “Facebook” plugin. Then the Facebook related plugins should be filtered in the plugins list.

Screen Shot 2016-01-07 at 16.15.58

 

Now click on install and your project will include the Facebook plugin in the next compilation.

Screen Shot 2016-01-07 at 16.38.06

Important: Add the following line to the config.xml to ensure that Cordova enforces that as the minimum version as is te minimum version required by the Facebook SDK.

Parameters

Getting the APP ID

You can find the Application ID in the Facebook application settings:

Screen Shot 2016-01-07 at 16.42.45

Setting up the APP ID

Using the Cocoon Plugins interface

You can setup the Application ID using the Cocoon cloud plugins interface. After installing the Facebook plugin you will see an “Add Parameter” button under the plugin details:

Screen Shot 2016-01-07 at 16.52.29

Click on that button and you will see two fields for adding a name and a value. You need to add the following parameters:

  • APP_ID: The Facebook application id
  • APP_NAME: Your application name

Screen Shot 2016-01-07 at 17.26.21

Android settings

When setting up the Android application you will be asked for a “Default Activity Class Name” and a “Package Name“:

Default activity class name

Package Name

For the package name you should look in your Cocoon application configuration:

Screen Shot 2016-01-18 at 16.59.15

So the package name in this case should be:

 io.cocoon.sample.facebook

Default Activity Class Name

Testing with the Developer App

In case you are testing with the Developer App you have to set:

com.ludei.devapplib.android.CocoonCordovaActivity

Testing with a regular APK

Use the package name you have set in the “Package Name” field above plus “MainActivity“. In this example the “Default Activity Class Name” would be:

 io.cocoon.sample.facebook.MainActivity

Integration

Cordova needs to be specifically loaded in your index.html so it can start the Cordova framework and load the plugins that you have installed in your project. So first thing is to add the “cordova.js” script tag to your index.html.

That’s the only code script you need to include in your index.html for the plugin to be ready to be used. Cordova will do the rest.

Important: Remember to wait for the “deviceready” event before using the plugin as that is the moment when the plugin will be fully initialized.

Usage

Let’s see some code snippets showing how to use the Cocoon Facebook plugin in your application.

Initialization

For iOS and Android the init parameters are not necessary, they are only needed for the browser.

Login/logout

Get friends information

Share

Submit score

Other Facebook API methods

Please see the full API below and the example for more Facebook API methods.

Example

exmaple_button

API

api_button

Testing

To test your Facebook plugin integration:

  1. Install the Facebook plugin in your project
  2. Compile a Developer App
  3. Generate a debug or release key hash depending on if you are using the debug APK or the release one. See this article for more info about how to do it.
  4. Launch you app from the Developer App using a zip or a url options

Remember always to generate the key hashes and add the to your app configuration in Facebook.