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/

Related Posts:

  • Flutter: Your Ultimate Guide to Modern App Development In the dynamic world of app development, Flutter has emerged as a game-changing technology. It offers a unique blend of flexibility, efficiency, and exceptional performance. Whether you’re an aspiring developer, an … Read More
  • AI Stable Diffusion và các khái niệm cần biết AI Stable Diffusion là một mô hình AI sinh học mới nhất có thể chuyển đổi văn bản thành hình ảnh, cung cấp một cấp độ sáng tạo và tiện lợi mới cho các nhà sáng tạo nội dung và nghệ sĩ. Công nghệ hoạt động bằng cách… Read More
  • Regular Expression to find a string included between two characters Base string: This is a test string [more or less]need to get only more or less (without the brackets).  Easy done: (?<=\[)(.*?)(?=\]) Technically that's using lookaheads and lookbehinds. See Lookahead and Look… Read More
  • Google sheet scripts Duplicate inactive sheet and Rename based in active cell datafunction EXPORT() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sti = ss.getSheetByName('Template'); var sta = ss.getSheetByName('Booking… Read More
  • Mobile App Development with AI Assistant uly surprising to me. I was able to create a complete AI-driven mobile application. It involved not only using AI in the final application but also applying AI at every stage of the development process, including id… Read More

0 comments:

Post a Comment