Creating a Facebook Instant Game
Brief guide on creating Facebook Instant game that will tell you, “What animal you look like?” :D
Intro
Actual app development is done using standard html, javascript and css technologies. Facebook provides a javascript sdk to perform facebook related operations such as retrieving user info, profile picture ect.
Instant app package is basically a web application with some extra tweaks to work with facebook system. I’ll use a customised version of facebooks official sample from, https://github.com/fbsamples/fbinstant-samples. Refer the repo for more advanced examples with instant game platform.
Before proceeding get the source code from, https://github.com/databoxtech/article_fb_instant_game
If you open the source code, you will see below folder structure.
Template does few things to make our life easier,
- Mock facebook SDK: we need to use facebook sdk to get users name and other details. But as we develop it’s a tedious task if we had to run this inside facebook always. What mock sdk does is it emulates how the actual sdk works and give us dummy responses where necessary.
- Gulp Build System: Gulp automates most of the manual work like replacing mock sdk in production build. You can include more options like minifying, obfuscating into the mix (little advance topic)
Coding Time
First you need to install node dependencies. Goto the source code folder using terminal/ command line and run npm install. If you don’t have npm (node package manager) installed, refer this link to do so https://www.npmjs.com/get-npm
Once installed run npm run mock, this will start dev server and serve the game. Whenever you make any modification stop and run above command again (until I fix live reload)
When you run the mock server and open the URL in browser, you will see this dialog. It’s from the mock SDK informing you game loading has completed. At this point, it will call startGame javascript function in our code
At this point we hide our splash, and get users info. Getting users info other than name is not really needed for this game. Refer below code
We also show “Play” button. When play button is clicked showMyAnimal function is invoked.
Above function simply displays a random animal image along with the name.
Run npm run mock and check whether our application works as expected. Here’s a sample video of it.
Setup facebook
so far it’s been basic coding, now we have to configure some stuff on facebook.
Goto https://developers.facebook.com/apps/, you might have to verify your phone no. Click on “Create App” to create a new app (don’t use an existing one with android/ios/web enabled). Select the 3rd option(For everything else) in the given dialog and provide a name for the app when asked. I’ll use “AnimalMe” as name. Once done you will see below screen.
Click on “Instant Games” => “Set Up” and confirm the acceptance conditions.
Now we can try our app for real with facebook. Note the “App ID” from top bar, open the config.json file in our code folder and paste it at “PASTE_APP_ID_HERE”. Refer below screenshot,
Now run npm run dist and you should see something similar to below,
It should display your account information. If it works upto this point, it’s ready to be uploaded. Run the command npm run archive. This will create a zip file under the “archives” directory.
Now goto “Web Hosting” section, and click on “Upload Version” as shown below.
Then select the latest zip file on the archives folder and upload. Once done it will appear like this.
Now you can mouse over the “Status” area and push the build to production.
Once done visit the link “https://fb.gg/play/APP_ID_HERE” to try your game. Remember to replace APP_ID_HERE with your app id.
You are basically done with the basic process. However now you need to enable the live mode. To do that fill the required app details and provide necessary icons/ banners. Once complete flip the switch in top bar,
Entire workflow can be reviewed from below video. Good Luck!
Github Repo: https://github.com/databoxtech/article_fb_instant_game
