Post 8: Facebook and Construct 2

Despite what the Scirra webpage says, Construct 2 is NOT compatible with Facebook (at least not without extensive programming skills or a hell of a lot of work on your side). The good news is that it can be done. My journey towards Facebook compatibility has lasted over a year and I have tried countless different methods. In mid-2016 I finally found a method that both works well, looks good and has lots of functionality.

The method I use is to:

  • Separate my Facebook stream into a mobile stream and a browser based stream
  • Use the native Facebook plugin for browser logins and Cranberrygames Facebook plugin for mobile logins
  • Use JavaScript to interact with facebookConnectPlugin.api and FB.api via Construct 2's browser object to download friend lists and allow users to share my app
  • Use metatags on my webpage to correctly display share info
  • Use the SocialSharing and Facebook Connect plugins to build correctly Intel XDK

 

**NOTE. Since writing this tutorial I have figured out a way to implement Facebook on mobile without the Cranberrygames plugin. I highly recommend using this method as the Cranberrygames plugin is buggy and has no user support**

This tutorial will show you how to do this.

 

Confused? Don't worry. I'll step through each of these in detail over the next few blog posts. To begin with we'll have a look at how to add Facebook to Construct 2.

The first thing we need to do is to add a menu to SSA so that users have a safe place to log in and our of Facebook. For larger projects, I highly recommend adding different event sheets however for a smaller project like SSA, we can get by with one event sheet by activating and deactivating event groups like this:

We'll use an extremely simple menu/login screen for SSA.

We'll also update our code so that the player returns to the login screen after dying

Next we'll need to add two plugins to our project; the official Facebook plugin and Cranberrygames Facebook plugin.

I'm ambivalent when it comes to Cranberrygames' plugins. On one hand the Facebook plugin actually enables Facebook login when exporting with Cordova and Intel XDK. On the other hand most of his plugins are very buggy, half of them don't work as intended and there is zero customer support. Cranberrygames charges $10 for his plugins and clearly there's a market for it but the only reason he's still in business is because there is no real competition.

Visit this page to purchase his plugins. He will send you a link to his repository and a password after some time (~1-5 days based on user feedback on his Google+ page). Note that on my computer I have to access his repository via Google Chrome to enable downloading his plugins.

Once you have access you can download the Facebook plugin from his repository:

Recently, another Facebook plugin has been released for sale by a guy calling himself Josek5494 on the Scirra forums (link here). I bought his plugin a few weeks back but I've yet to be able to make it work. I contacted Josek5494 about it and he provided me a some instructions but even when then I was unable to get it to work (link here). My recommendation for now is to stick with Cranberrygames plugin. A few of his other plugins are pretty useful too so it's not a bad deal all things considered...

Once you've added both plugins to your project we can start adding in the code.

We're going to use the native Facebook plugin's "Is ready" condition to determine which Facebook plugin to use. In the menu for example, we want to Facebook login button to change between "Log In" and "Log Out" based on the users current Facebook login status. The below code will achieve that

For your information, I've also added the following code to the Menu group of the SSA project

Now lets add the code required to log users in and out of Facebook

Perfect! To check if this code is working we'll need to create a Facebook Developer account and add the game to Facebook to get a Facebook App ID. This will be the subject of the next blog post.


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