Post 9: Creating and configuring your project in Facebook

To enable your game to communicate with Facebook you'll need to create and configure your project on the Facebook for Developers platform. Log in using your Facebook account and click 'Add a New App'

Fill in the main details of your app and click 'Create App ID'

Once you have verified that you are indeed a human, you'll be taken to this page. Ignore all the buttons in the middle of the screen and navigate straight to the 'Dashboard'

On the dashboard you'll be able to see your App Name, App ID and App Secret (you only need the App secret if you plan to use Facebook's highscore lists). I prefer to create my own database to store and maintain my highscore lists (I'll do a tutorial on how to do this in a later post). Input this information into the two Facebook plugins in your Construct 2 project

Move on to 'Settings-Basic' and fill in as much information as you can. Leave the 'App Domains' field blank for now. We will fill in this information later on.

Now lets start adding some platforms. Start by adding 'Facebook Canvas' and 'Website'.

At this point I should tell you - I am not a Facebook developer. I don't know what half the options in the Facebook for Developers platform mean. This tutorial should therefore be taken less as a "how to do it" tutorial and more as a "how Vega managed to get it to work" tutorial. If there's anything I could or should have done differently, feel free to let me know about it in the comments section.

If your planning to host your game on your webpage, add your webpage URL to the 'Secure Canvas URL' field. In the 'Mobile Site URL' and 'Site URL' fields, add the following URL: http://localhost:50000/

This URL points to your Construct 2 preview settings and enables troubleshooting your Facebook code while you're developing. For this to work you'll have to specify your server settings in Construct 2 'Preferences'

Hit 'Save Changes'. Now that you've added these two platforms you can add your app domains (your webpage domain a well as localhost). Just add the word 'localhost' to the 'App Domains' field.

All settings for SSA can be seen below:

For the sake of completeness, I've also added the advanced settings. I have not made any changes to these. Don't worry if you see any error messages at this stage. They should disappear once we've finished configuring your app.

Next, click 'Add product' on the main menu on the left.

Click 'Get Started' under 'Facebook Login'

First, enable 'Embedded Browser OAuth Login'. Next, add the following to 'Valid OAuth redirect URIs':

  • Your secure domain (in my case https://www.vegagamestudios.com/)
  • localhost
  • http://localhost:50000/
  • https://facebook.com/connect/login_success.html

Click 'Save Changes'.

The final step before we test SSA via Construct 2 is to make the Facebook app public. Navigate to 'App Review' on the main menu on the left and make your app public

Alright lets give it a go!

Success!

In the next blog post we'll learn how to build in sharing functions into your app.


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