In this part I’ll show you how to add and configure the CocoonFacebook plugin for construct 2. Firstly make sure that you have the latest plugin version installed. There was an update on the 15. January 2016. With this update the “Is user logged in” condition has been added by ludei.

Facebook Developer

In order to get your FACEBOOK_APP_ID and your FACEBOOK_CHANNEL you need to have a facebook developer account. Just visit the link below and sign in with your existing facebook account or greate a new one.

cio_facebook_IDS

Facebook Developers

Once you’re logged in to your developer account, click on the My Apps button in the header menu and select Add a new App.

cio_fb_add_new_app

Then you’ll get ask on which platform your app depends. Choose Android for an android game and iOS for an iOS game.

cio_fb_add_new_app_platform

You can skip the Quick Start by clicking “Skip and create APP ID” in the upper right corner.

cio_fb_add_new_app_setup

You can choose any name for your new app. The same applies to the namespace. Click on Create App-ID. Then you’ll redirected to your app propierties. Here you’ll find your APP_ID.

Copy this ID and insert it at your CocoonFacebook plugin field “Facebook APP ID“.

cio_fb_ID

To proceed click on the Choose a Platform button, then select once again your platform. For this guide I select Android. Scroll then down till “Tell us about your Android project” and insert your bundle ID of your app and the bundle ID + MainActivity

cio_fb_android_app_info_MainActivity

The bundle ID is the the unique ID of your uploaded APK file where you have integrated the Facebook SDK. You can get your ID here.

cio_fb_android_app_info_bundle_id

Note! You must use exactly the same Bundle ID as the one you’ve set for your app!

Generate Hash Keys

Now we need to generate a debug or a release hash key. In order to do this, make sure that you have installed JAVA JDK (If not, download it by clicking the button below).

Download Java JDK 8

Firstly you need to download the latest version of OpenSSL by clicking the download button below.

Download OpenSSL Tool

Then unzip it. We will need the path later. Mine is:

C:\Users\Andreas\Downloads\openssl-0.9.8k_X64\bin

Open your CMD console and go to your Bin folder of your Java JDK installation. Mine is located at following path:

C:\Program Files\Java\jdk1.8.0_65\bin

Now run following code (make sure that you replace the placeholders)

Note, you need to choose your keystore file which you have used for cocoon.io. If you don’t have a keystore file, you’ll find a tutorial showing you how to create one here:

How to create a Keystore file for Android

That’s the key you have to unter (replace the placeholders with your details).

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | YOUR_OPENSSL_PATH\openssl sha1 -binary | YOUR_OPENSSL_PATH\openssl base64

On my end it looked like that:

cio_fb_cmd_path_keytool

Click enter if you are ready. If the process was successfully, you’ll get your Hash Key over here.

cio_fb_cmd_path_keytool_hash_key

Copy this hash key into the field at the facebook developer page and then klick Next.

cio_fb_android_app_hash_key

Note, at the moment your App is in testing mode, so it’s not live to all users, but for you it is. You can check this at the “Status & Review” tab.

cio_fb_app_status

Here you are also able to set your app live when you feel ready to release it.

In order to set your app public add some Icons and Banner images at the “App Details” tab and then go to the Status & Review tab and click on the toggle button (see image below, in the blue rectangle).

cio_fb_set_public

Confirm it and your app will be live.

CocoonIO – Install the Facebook Plugin

Go to your project and select “Plugins”. Then select the “Cocoon” tab and “Social” in the dropdown menu.

CocoonFB_install_plugin

Then copy the APP_ID from the developer.facebook.com page and insert it here. Do the same with the APP_NAME. Please make sure that you insert following code snippet to your config.xml file when you are using the Facebook Plugin!

<preference name="android-minSdkVersion" value="15" />

You can learn more here.

Docs – Facebook Plugin

At the end your config.xml file should look like this.

CocoonFB_config

Build your C2 Project

Once you’ve completed all steps above go to your C2 project and import the “CocoonFacebook” plugin to it. Then select the plugin in the project bar and enter your APP_ID and your CHANNEL LINK.

CocoonFB_plugin_parameters

Then code your function. You can download our free CocoonIO Developer Template to see how it works. When you feel ready export your game via Cordova and delete the config.xml file and the “…additional.xml” file (if existing). Don’t forget that! Otherwise you’ll overwrite the config.xml file from the cocoonio compiler!

Build your app, download and install it.

Troubleshooting

Invalid key hash

If you get an error with your key hash, just add the key from the error message to your app at developer.facebook.com.

CocoonFB_error

Like shown here.

CocoonFB_key_hash