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.
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.
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.
Then you’ll get ask on which platform your app depends. Choose Android for an android game and iOS for an iOS game.
You can skip the Quick Start by clicking “Skip and create APP ID” in the upper right corner.
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“.
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
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.
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).
Firstly you need to download the latest version of OpenSSL by clicking the download button below.
Then unzip it. We will need the path later. Mine is:
Open your CMD console and go to your Bin folder of your Java JDK installation. Mine is located at following path:
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:
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:
Click enter if you are ready. If the process was successfully, you’ll get your Hash Key over here.
Copy this hash key into the field at the facebook developer page and then klick Next.
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.
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).
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.
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.
At the end your config.xml file should look like this.
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.
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.
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.
Like shown here.