Part 2 - Preparing the HTML
Instant Games comprises of two parts: Phaser, with the Instant Games plugin and the Instant Games SDK itself. The SDK cannot be bundled into your game and must be referenced externally via a script tag.
Here is the html file we'll use for this tutorial:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="yes" />
<meta name="screen-orientation" content="portrait" />
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<script src="lib/phaser-facebook-instant-games.js"></script>
</head>
<body>
</body>
</html>You can see that we're requesting fbinstant.6.2.js, which is the Instant Games SDK. We're also including the phaser-facebook-instant-games.js pre-built package. This part is optional, as you may prefer to package Phaser and your game code into a single bundle, but for the sake of simplicity in this tutorial we'll keep the game code and Phaser itself separate.
The rest of the html consists of some standard meta tags. If you need any custom CSS, it should be added here, or referenced in an external CSS file.
All of the source code in this tutorial is available to download from this repository.