Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

How to use libraries installed via <script> tags in React

I’m trying to create a Facebook Instant HTML5 application in React.

As per their Quick Start documentation, they want me to install their SDK using a script tag, like so:

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

I’ve created my app using create-react-app. I’ve placed that snippet inside /public/index.html so it looks like:

...
<body>
    <noscript>You need to enable javascript to run this app.</noscript>
    <script src="https://connect.facebook.net/en_US/fbinstant.6.3.js"></script>
...

They also provide the following snippet:

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
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();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

Which I’ve placed in src/index.tsx'.

This then gives me errors, saying:

  'FBInstant' is not defined  no-undef

Which likely means that the library is not being installed properly / brought into the proper namespace so that my React code can access it.

How can I get around this? Facebook tells me not to download and include it myself – they’ll reject my app.

Important notes:

Do not download and add the SDK to your bundle as it will be rejected in later steps.

This is a new way to build games on Facebook and does not support the Graph API.

So it seems I must use these <script> tags. How can I make React recognise it?

Tags:

2

Answers


  1. 0

    Once you have added the fbinstant script tag in the index.html

    In your src/index.tsx, Add this to the top (before your snippet):

    const FBInstant = window.FBInstant;
    Login or Signup to reply.
  2. 0

    As you explained, you’re getting this error because the typescript compiler does not recognize FBInstant, Since it is not installed.

    However in this case seems all you need is to make the compiler ignore these warning. The most suitable in my opinion is export it to a seperate js file (and not ts / tsx), since it is a javascript code. Than import it as any node module.

    If you don’t like this option, alternative methods can be:

    1. including the SDK code on your index.html, right after your script tag
    2. Using @ts-ignore to suppress typescript errors
    3. define FBInstant before the SDK script (more about this here)
    interface Window {
  [key:string]: any; // Add index signature
}
const FBInstant = (window as Window)['FBInstant'];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search