Tuesday, January 21, 2020

Create FB Instant Game

1. index.html

<html>
<body>
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
whatever...
</body>
</html>
2. main.js
FBInstant.initializeAsync()
    .then(function() {
        var progress = 0;
        var interval = setInterval(function() {
            progress += 100;
            FBInstant.setLoadingProgress(progress);
            if (progress >= 95) {
                clearInterval(interval);
                FBInstant.startGameAsync()
                    .then(
                        function() {
                            // Retrieving context and player information can only be done
                            // once startGameAsync() resolves
                            var contextId = FBInstant.context.getID();
                            var contextType = FBInstant.context.getType();

                            var playerName = FBInstant.player.getName();
                            var playerPic = FBInstant.player.getPhoto();
                            var playerId = FBInstant.player.getID();
                            //start Game
                            startYourGame();
                        }
                    )
            }
        }, 100);
    });

Error:
Sorry the Game is not available at the moment
- missing adding Product
  - Create FB App --> Add Instant Game

Local Test
https://www.facebook.com/embed/instantgames/APP_ID/player?game_url=https%3A%2F%2Flocalhost%3A8080

Remote Test
https://m.facebook.com/instantgames/play/APP_ID/?source=www_play_url

Release:
https://developers.facebook.com/docs/games/instant-games/test-publish-share
1. Zip package
2. App/Instant game/web hosting/Upload
3. Link of Game: https://fb.gg/play/app_id_or_namespace


 https://github.com/plexonic/InstantGameDemo

Policy
https://developers.facebook.com/policy/#games

Ads:
https://www.facebook.com/fbgaminghome/blog/install-ads-for-instant-games-best-practices
https://developers.facebook.com/docs/games/gamesonfacebook/monetization
http://phaser.io/tutorials/facebook-instant-games-ads

Share:
https://developers.facebook.com/docs/sharing/webmasters
https://github.com/mrmop/IGX/wiki/Social-Sharing

https://stackoverflow.com/questions/53030470/fbinstant-shareasync-function-doesnt-work-without-any-errors-in-facebook-inst

- share via ShareAsync with out popup

var img = "data:image/png;base64,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";
FBInstant.shareAsync({
     intent: 'INVITE',
     image: img, // base64Image code must be passed in img
     text: 'Play this Awesome game',
     data: {myReplayData: '...'},
}).then(function() {
     location.reload(); 
});

 Leader Board
https://www.emanueleferonato.com/2018/05/18/my-first-facebook-instant-game-has-been-released-play-risky-steps-on-facebook-and-learn-how-to-build-your-own-game/

How to get acces token
https://developers.facebook.com/tools/explorer
https://elfsight.com/blog/2017/10/how-to-get-facebook-access-token/


Reference:
https://static.nrk.no/origo/latest/index.html?icons.md
https://www.youtube.com/playlist?list=PLFfAvp9Vrt0XRu4In4uYowL1efYLTSTpM
https://developers.facebook.com/docs/games/instant-games/getting-started/quickstart
https://phaser.io/tutorials/getting-started-phaser3
https://github.com/Mohammedcha/FB-Instant-Games-ADS-Controller
https://developers.facebook.com/docs/games/instant-games/guides/ads-monetization

Select Context
https://github.com/anisurrahmansagor/Test-Your-Luck/blob/master/index.html
https://github.com/dangkyokhoang/randomness
https://github.com/MJarolimek/tic-tac-toe/tree/master/tic-tac-toe

Sample
https://www.emanueleferonato.com/2018/11/30/match-3-bejeweled-html5-prototype-built-with-phaser-updated-to-phaser-3-adding-object-pooling-and-using-ecma-script-6-conventions/
https://www.emanueleferonato.com/tag/wheel-of-fortune/
https://www.emanueleferonato.com/tag/bejeweled/

Activate Iphone

1. Switch to Safe mode
2. Connect to Itune - Update - Activate