Post 11: Facebook and Intel XDK

One of the most common issues of Construct 2 Facebook integration is getting the Facebook plugins to work properly on mobile games. Today, I'll teach you how to do that. Make sure you've read blog posts 8 to 10 to see how to correctly incorporate Facebook into your game before you dive into this post.

In order to get Facebook to work on iOS and Android, you'll need to complete two more steps. First, lets finish setting up our game in the Facebook Developers Console. Go to 'Settings' - 'Basic' and hit 'Add Platform'.

Start by selecting 'iOS'

Fill in all the information. Note that your Bundle ID was created in Post 4 and can be found in iTunes Connect under 'App Store' - 'App Information'. The 'iPhone Store ID' and 'iPad Store ID" can also be found in iTunes Connect at the same location and is listed as 'Apple ID'

Leave 'URL Scheme Suffix' empty and tick 'Single Sign On', 'Deep Linking' and 'Log In-App Purchase Events Automatically'. Hit 'Save Changes'

Now let's move on to Android. Click 'Add Platform' again and select 'Android'

Android is very similar to iOS. Your 'Google Play Package Name' and 'Class Name' are both the same and can be found in the Google Play Developer Console

The Key Hash is the most difficult part of setting up the Android platform. First, you'll need to follow this link and download Java JDK (Java SE Development Kit). Note, I downloaded the windows x64 install file. This may be different for you if you are on a different system.

Install Java on your computer and take note of the install directory. You'll need one of your Android build files for the next step (refer to Post 5 and Post 6 to learn how to generate and download your build files using Intel XDK). Next you have to drag and drop one of your Android build files into the 'bin' directory inside the install directory of Java.

For me, this directory is 'C:\Program Files\Java\jdk1.8.0_101\bin'

Next you'll need to open up your 'Command Prompt'. If you're not familiar with this - do a windows search for 'cmd' and open up the following application

From here you'll need to navigate your way to the 'bin' folder of the Java install folder. In Command Prompt, this is done by writing 'cd' then the path to the folder.

For me this would be:  "cd C:\Program Files\Java\jdk1.8.0_101\bin".

Hit enter.

Next you'll need to input "keytool -list -printcert -jarfile " followed by the name of your Android build file.

For me this is: "keytool -list -printcert -jarfile cordova_project-x86.android.20160921101814.apk".

Hit enter and if you've input everything correctly you should see a whole bunch of HEX codes (numbers and letters separated by colons) show up on your screen. Copy the code after 'SHA1' (note I have blacked out some of this code on my screen).

The last step is to convert this hex code to a base64 code. This webpage will let you do that quickly. Enter your HEX code and hit 'Convert'

The Output (base64) is your key hash which needs to go into 'Key Hashes' in your Facebook Developer Console.

Finally switch on 'Single Sign On' and 'Deep Linking' and click 'Save Changes'

Perfect. Now go back to Construct 2 and export your game for Cordova (Intel XDK) like we did in Post 2. Next, jump into Intel XDK. All we have to do here now is to add another 2 plugins. Under 'Plugin Management', Select 'Add Plugins to this Project'.

You'll need to add 2 plugins to your project. Both can be found under 'Featured Plugins'; Facebook* Connect (jeduan fork) AND SocialSharing.

The SocialSharing plugin can be added without any further input while the Facebook Connect* plugin requires you to input your Facebook App ID and Name.

Perfect! You should now be able to build, upload and publish your game with full Facebook integration as per blog posts 5, 6 and 7!

Want to see what SSA looks like on your mobile device?

Download here for Android or here for iOS or play it on your browser here


Want to see what Facebook implementation looks like in a real game?

Check out my latest game Nut Drop on any of the below platforms

If you have any questions about how to implement any of the features in Nut Drop in your games let me know in the comments and I will make a tutorial for you