SDK Facebook pour JavaScript
Version API du graphe

SDK Facebook pour JavaScript avec RequireJS

Dans ce didacticiel, vous découvrirez comment intégrer le SDK Facebook pour JavaScript à d’autres modules JavaScript à l’aide de RequireJS. En principe, le SDK JavaScript n’est pas compatible avec la solution AMD (Asynchronous Module Definition). Par conséquent, ce didacticiel traite de l’écriture d’un shim pour fournir l’objet FB créé par le SDK.

Ce didacticiel suppose que vous maîtrisiez les modules RequireJS et JavaScript. Apprenez-en davantage sur RequireJS.

Configuration

Configurez vos autres scripts RequireJS comme d’habitude, et ajoutez un nouveau fichier .js afin d’interagir avec le SDK Facebook. Ce projet part du principe que vous disposez d’une structure de répertoire identique à celle indiquée ci-dessous :

- project/
   - index.html
   - scripts/
      - main.js
      - require.js

Ajoutez un nouveau fichier pour configurer le SDK et interagir avec celui-ci, comme indiqué ci-dessous :

- project/
    - index.html
    - scripts/
       - main.js
       - require.js
       - fb.js

Vous devez importer le script requirejs et déclarer main.js comme votre data-main, comme indiqué ci-dessous :

<script data-main="scripts/main" src="scripts/require.js"></script>

Ajout d’un shim au SDK Facebook

Dans le script principal de votre projet, ajoutez un shim à require.config, comme indiqué ci-dessous :

require.config({
  shim: {
    'facebook' : {
      exports: 'FB'
    }
  },
  paths: {
    'facebook': 'https://connect.facebook.net/en_US/sdk.js'
  }
})
require(['fb']);

Cette opération entraîne la création d’un module facebook à l’aide de l’URL du SDK JavaScript, et marque l’objet FB comme exportation pour ce module.

Dans votre nouveau fb.js, vous pouvez instancier l’objet FB et l’utiliser comme d’habitude. Ajoutez votre ID d’app depuis l’Espace App.

Vous devez simplement encapsuler votre code dans un bloc défini et transférer le module du shim facebook comme dépendance requise.

define(['facebook'], function(){
  FB.init({
    appId      : '{your-app-id}',
    version    : 'v20.0'
  });
  FB.getLoginStatus(function(response) {
    console.log(response);
  });
});

Voir aussi