Coder Social home page Coder Social logo

fbinstant-samples's Introduction

Instant Games Examples

This repository contains a collection of examples that show how to use the Facebook Instant Games SDK (FBInstant). There is also an excellent page here (https://www.facebook.com/fbgaminghome/developers/get-started) that can help you get started with the Facebook Instant Games.

Pre-requisites

  1. Install Node JS
  2. Install Yarn
  3. Download or clone this repository

Setup

  1. Make sure that your Instant Game app is setup. For more information see our Setup Guide
  2. In the root folder of this repo, run
    $ yarn install
  3. Copy or rename the file config.template.json to config.json and replace the information needed from your app.
    {
    	"FB_appId":"<YOUR_APP_ID_HERE>",
    	"FB_uploadAccessToken": "<YOUR_UPLOAD_TOKEN_HERE>",
    	...
    }

Your app ID can be found at the landing page of your app's dashboard.

Your upload access token can be found on the Instant Games -> Web Hosting tab of your app's dashboard.

Client-side examples:

Client-side examples are contained in the examples/ folder:

  • ads: Shows how to display Rewarded Videos and Interstitial Ads
  • bots: Shows how to send data from the game client to a bot and vice-versa
  • cross-promo: Shows how to prompt the player to switch to another one of your Instant Games
  • hello-world: An empty project with the boilerplate in place to get you up and running quickly
  • in-app-purchases: Shows how to use payments inside of your Instant Game
  • leaderboards: Shows how to use leaderboards (global and context-specific) in your Instant Game
  • secure-backend: Shows how to validate data in your backend to make sure they are authentically coming from your Instant Game, to prevent cheating
  • sending-messages: Shows how to show messages from your game to the current context (conversation)
  • shortcuts: Shows how to create a mobile home shortcut to the game

Running Client-Side examples:

In order to run these examples you will need to use one of these tasks:

  • run-mock: Runs on localhost against a mocked version of the SDK
  • mock: It is the same as run-mock. Runs on localhost against a mocked version of the SDK
  • run-dist: Runs on localhost against the production SDK
  • dist: It is the same as run-dist. Runs on localhost against the production SDK
  • upload: Package and upload your game in order to test on mobile

Below are some examples of how to execute these tasks:

$ yarn run-mock --project hello-world

Will run the hello-world project from localhost against a mocked version of the SDK (returns dummy data for every call). This way of running projects is especially useful for quickly iterating on local changes done to any of the projects.

$ yarn run-dist --project sending-messages

This will run the sending-messages project with HTTPS from localhost and embed it into our embedded player which allows you to connect to the latest version of the SDK. All data returned from the SDK will be authentic an updated. In order to use this option, you need to correctly set the FB_appId property on config.json. If the app shows stuck in 0% loading, make sure to visit https://localhost:8000 and follow the instructions on your browser trust the development certificates.

$ yarn upload --project ads

This will package and upload the ads example to Web Hosting. After that you can set the game to production mode in order to test it from the uploaded build - and not localhost. This option is especially useful since it allows you to test on mobile devices (More information here)

Server-side examples

Server-side examples are contained in the servers-examples/ folder:

  • nodejs-backend: It's a working backend for the secure-backend client demo, that shows how to perform server-side validations for client-signed calls from Instant Games.
  • nodejs-bot: It's a working backend for the bots client demo, that shows how to send and receive structured data from a game client.

Running server-side examples

Before running any of the server side examples, make sure to copy or rename the template.env into .env and provide the necessary information.

You can run any of the server-side examples above by running the following commands on terminal:

$ cd /server-examples/nodejs-backend
$ yarn install
 yarn install v1.7.0
 [1/4] Resolving packages...
 [2/4] Fetching packages...
 [3/4] Linking dependencies...
 [4/4] Building fresh packages...
 Done in 6.86s.
$ node index
 Node app is running on port 5000

From that moment on, your server-side code is running on http://localhost:5000. By changing the client-side code to point to that endpoint, you can test the full end-to-end flow locally.

Alternatively, you can host your backend code in a service such as Glitch or Heroku

Note: for the nodejs-bot server-side demo, you will need to host your backend in an external server.(More information here)

License

Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.

The examples provided by Facebook are for non-commercial testing and evaluation purposes only. Facebook reserves all rights not expressly granted.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

fbinstant-samples's People

Contributors

ainsleyh avatar dependabot[bot] avatar ioi0 avatar jsaindon avatar kayrules avatar krzysztof-grzybek avatar mingcaocao avatar sparshrestha avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fbinstant-samples's Issues

Not Able to import the FBInstant (Use of unresolved identifier 'FBInstant') Swift IOS

I have added pod file's to my project

pod 'FBSDKShareKit'

pod 'FacebookSDK'

pod 'FBSDKCoreKit'

pod 'FBSDKLoginKit'

I want to use this function of FBInstant

var connectedPlayers = FBInstant.player.getConnectedPlayersAsync()
.then(function(players) {
console.log(players.map(function(player) {
return {
id: player.getID(),
name: player.getName(),
}
}));
});
I tried to import packages but didn't find FBInstant package it gives error

Use of unresolved identifier 'FBInstant' (error)

Not able to get user email id

I need email in my game for further communication like rewards, notification, etc
but as per document I didn't see any way to get email I tried with javascript sdk using
FB.login(function (response) {
if (response.authResponse) {
FB.api('/me?fields=email', function (userInfo) {
console.log(userInfo.email);
});
} else {
console.log('Auth cancelled.')
}
}, {
scope: 'email'
});

but i always got Blocked opening error ="in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set"

Please let me know How i can get user email id

keep showing 0% loaded

Hi,

I'm not sure what going wrong, the basic sample app keep showing loading screen.

it's neither working on local nor in production.

I've tried adding console.log at different place and it seems the script is not coming inside FBInstant.initializeAsync().then I'm not sure why.

i use command yarn upload --project hello-world to upload the hello-world code zip file.

I'm attaching more details here please help me what's wrong I'm doing.

This is zip of codebase 1ce706e0-f4fc-11ea-80c6-b160fcafe6a2.zip

This is index.html content
https://gist.github.com/LabN36/eaf0b95ef17f7a2216d5869740fea142

Screenshot 2020-09-12 at 7 02 19 PM

Screenshot 2020-09-12 at 7 02 37 PM

Screenshot 2020-09-12 at 7 11 26 PM

yarn run-mock not working as expected

The command not replacing the production js with the mock js script. To fix this, you need to enter the task-name in the html file as below:

<!-- build:js -->
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
<!-- endbuild -->

so it will replace that block properly into this:

<script src="js/mock/fbinstant.6.2.mock.js"></script>

Stuck loading in 0%

I created new app in facebook and try to test helloworld sample through my app. I use this command

yarn run-mock --project hello-world with url https://www.facebook.com/embed/instantgames/GAME_ID/player?game_url=https://localhost:8000

. But the game stuck loading in 0% without showing any error.

Problem when running hello-world project

I have a problem with run hello-world project
After config project and run
yarn run-mock --project hello-world, my screen only display

Screen Shot 2019-04-17 at 12

If I run, yarn run-dist --project hello-world. It open embedded player browser correctly

I am using Mac Sierra 10.12.6 with node version (v11.10.1) and Chrome browser.
Any help or suggestion would be great appreciated.

Running scripts is not working with latest version of Node

I was getting this error when running scripts until I downgraded from node-v10.15.3 to node-v8.16.0

PS C:\Users\Yo\Desktop\fbinstant-samples-master> yarn run-mock --project hello-world
yarn run v1.15.2
$ gulp run-mock --project hello-world
gulp run-mock --project hello-world[10808]: c:\ws\src\node_contextify.cc:626: Assertion `args[1]->IsString()' failed.
1: 00007FF7E62FF04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
2: 00007FF7E62DA0C6 node::MakeCallback+4518
3: 00007FF7E62DA17F node::MakeCallback+4703
4: 00007FF7E62AF630 node::DecodeWrite+13024
5: 00007FF7E6ADC122 v8::internal::OptimizingCompileDispatcher::Unblock+59890
6: 00007FF7E6ADD289 v8::internal::OptimizingCompileDispatcher::Unblock+64345
7: 00007FF7E6ADC5CC v8::internal::OptimizingCompileDispatcher::Unblock+61084
8: 00007FF7E6ADC4EB v8::internal::OptimizingCompileDispatcher::Unblock+60859
9: 000001585CBDC5C1
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

getcontextId retuning null or ""

After Facebook removed the non-contextual leader board we need to store values in the leader board using context ID but if a player starts fresh context ID is returning null I am not able to call the leader board with the null context ID.
Is there any other way to store user values in the leader board
Thanks in Advance

depencies should be updated

Those libs should be updated

Blocked opening [...] in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

Its propably not the right place to ask this question but i couldnt find better.
hi, im trying to implement facebook login in my "fb-insant" game, but when i click on the login button i get following error : Blocked opening [huge link here] in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
My code responsible for auth:

 <div id="fb-root"></div>
    <script
      async
      defer
      crossorigin="anonymous"
      src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.3&appId=myID&autoLogAppEvents=1"
    ></script>
    <div
      class="fb-login-button"
      data-width=""
      data-size="large"
      data-button-type="continue_with"
      data-auto-logout-link="false"
      data-use-continue-as="true"
    ></div>

Thanks in andvance

Yarn mock error

hello:

after all the install.

when i execute the CMD :
yarn run-mock --project hello-world

i have an error :

Screen Shot 2019-03-31 at 00 32 45

yarn dist is not working

yarn run-mock works perfect for me
but i've got "Sorry, this game can't be played right now." error when yarn dist

I checked chrome dev tools console but no error found..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.