Documentation

Instant Games Integration

Thank you so much for purchasing our item from codecanyon.

Overview

This documentation is to help integrate Facebook Instant Games API in your HTML5 Games, all support and available HTML5 Games can be found here.

Installation

Follow the steps below to setup your game:

1. Place and insert SDK script in index.html

                                 
   <script src="js/vendor/TweenMax.min.js"></script>
   <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
                                 
                               

2. Disable and insert new script in init.js

                                 
   /*$(function() {
      var resumeAudioContext = function() {
         // handler for fixing suspended audio context in Chrome
         try {
            if (createjs.WebAudioPlugin.context.state === "suspended") {
               createjs.WebAudioPlugin.context.resume();
               // Should only need to fire once
               window.removeEventListener("click", resumeAudioContext);
            }
         } catch (e) {
            // SoundJS context or web audio plugin may not exist
            console.error("There was an error while trying to resume the SoundJS Web Audio context...");
            console.error(e);
         }
      };
      window.addEventListener("click", resumeAudioContext);
   
      // Check for running exported on file protocol
      if (window.location.protocol.substr(0, 4) === "file"){
         alert("To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.");
      }
   
   
      $(window).resize(function(){
         resizeLoaderFunc();
      });
      resizeLoaderFunc();
      checkBrowser();
   });*/
   
   window.onload = function() {
      FBInstant.initializeAsync().then(function () {
         $(window).resize(function(){
            resizeLoaderFunc();
         });
         resizeLoaderFunc();
         initPreload();
      });
   };
                                 
                               

3. Replace scripts below in loader.js

                                 
   /*!
   * 
   * CANVAS PRELOADER UPDATE - This is the function that runs to update preloder progress
   * 
   */
   function handleProgress() {
      FBInstant.setLoadingProgress(loader.progress/1*100);
   }
   
   /*!
   * 
   * CANVAS PRELOADER COMPLETE - This is the function that runs when preloader is complete
   * 
   */
   function handleComplete() {
      FBInstant.startGameAsync().then(function () {
         toggleLoader(false);
         initMain();
      })
   };
                                 
                               

4. Download fbapp-config.json and place it in the root of the HTML5 Game folder and not in any subfolders, similarly to index.html.
   
   Update orientation base on game supported orientations, "LANDSCAPE" or "PORTRAIT".

                             
   {
      "instant_games": {
         "platform_version": "RICH_GAMEPLAY",
         "orientation": "LANDSCAPE",
         "navigation_menu_version": "NAV_FLOATING"
      }
      }
                             
                           

   For complete settings can refer to Bundle Configuration Reference

5. Now just have to upload a zipped file with the integrated game, and you’re done. Below some guide on how to create Faceook App, test and upload your game.
   • Create new Facebook App
   • Test and Upload your game