How to integrate Facebook Instant Games API in your Phaser game

Talking about Facebook, Game development, HTML5, Javascript and Phaser.

Facebook Instant Games is a new way for people to play games across Facebook platforms. Powered by HTML5 technology, it allows people to find and play games directly in the News Feed or Messenger conversations, on both desktops and mobile devices. We are going to see how to integrate Facebook Instant Games API in your Phaser game, and as usual it’s way easier than you may think. The game I am about to integrate into Facebook Instant Games is Risky Steps. First, you need to create a new Facebook app. If you already published a game on Facebook and want to turn it into a Instant Game, you can’t. You will have to create a new app from scratch. You will now land on the app dashboard, now you will select “Settings”, then “Basic”. Now in the category select “Games”, then choose the category which fits best to your game. Back to the dashboard, let’s select “Instant Games” Now you have to fill in some information, be sure “Use Instant Games” is set to “Yes” Now, some good news: unlike other Facebook games, you don’t have to host Instant Games on your server. Facebook will host them for you. You just have to upload a zipped file with the game, andyou’re done. You can do this operation under “Web Hosting” panel, selecting “Upload Version”, then pushing it to production by clicking on the star icon. And that’s it, our game is ready to be played on Instant Games. Now, the question is: how to make our Phaser game compatible with Facebook Instant Games API? First, include the API in your index file: 
<!DOCTYPE html>
<html>
	<head>
        <title>Risky Steps</title>
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0, minimal-ui" />
        <link rel = "shortcut icon" sizes = "256x256" href = "icon-256.png" />
        <style type = "text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body{
                background: #102633;
            }
            canvas {
                touch-action-delay: none;
                touch-action: none;
                -ms-touch-action: none;
            }
        </style>
        <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>
        <script src = "phaser.min.js"></script>
        <script src = "game.js"></script>
	</head>
	<body>
	</body>
</html>
Then, in your game file, when you normally create the game itself on window.onload function, you will have to create it this way: 
var game;
var savedData;

var gameOptions = {
    gameHeight: 1334,
    backgroundColor: 0x08131a,
    visibleTargets: 9,
    ballDistance: 120,
    rotationSpeed: 4,
    angleRange: [25, 155],
    localStorageName: "riskystepsgame"
}

FBInstant.initializeAsync().then(function() {
    FBInstant.setLoadingProgress(100);
    FBInstant.startGameAsync().then(function() {
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        if(windowWidth > windowHeight){
            windowWidth = windowHeight / 1.8;
        }
        var gameWidth = windowWidth * gameOptions.gameHeight / windowHeight;
        game = new Phaser.Game(gameWidth, gameOptions.gameHeight, Phaser.CANVAS);
        game.state.add("Boot", boot);
        game.state.add("Preload", preload);
        game.state.add("TitleScreen", titleScreen);
        game.state.add("PlayGame", playGame);
        game.state.start("Boot");
    })
})

var boot = function(){};

// rest of the game
You can compare this way to create the game with the one used in the original prototype. And look what happens now: I am playing Risky Step as a Facebook Instant Game. This is only the beginning, as during next posts I will show you how to create leaderboards, access to your Facebook information, and all the stuff you are used to when playing on Facebook, stay tuned.