Facebook-SDK für JavaScript
Graph API-Version

Facebook-SDK für JavaScript mit RequireJS

In diesem Tutorial erfährst du, wie du das Facebook-SDK für JavaScript mit RequireJS in andere JavaScript-Module integrierst. Normalerweise ist das JavaScript-SDK nicht mit dem Designmuster Asynchronous Module Definition (AMD) kompatibel. Deshalb geht es in diesem Tutorial darum, wie du einen Shim schreibst, um das vom SDK erstellte FB-Objekt bereitzustellen.

Dieses Tutorial setzt Grundkenntnisse zu RequireJS und JavaScript-Modulen voraus. Erfahre mehr über RequireJS.

Konfiguration

Konfiguriere deine anderen RequireJS-Skripte ganz normal und füge eine neue .js-Datei für die Interaktion mit dem Facebook-SDK hinzu. Bei diesem Projekt wird die folgende Verzeichnisstruktur vorausgesetzt:

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

Füge wie folgt eine neue Datei für die Konfiguration des SDK und die Interaktion mit demselben hinzu:

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

Du solltest wie folgt das requirejs-Skript importieren und main.js als data-main deklarieren:

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

Hinzufügen eines Shims zum Facebook-SDK

Füge in deinem Hauptprojektskript eine Shim-Deklaration zu require.config hinzu, wie hier dargestellt:

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

Dadurch wird ein facebook-Modul mit der JavaScript-SDK-URL erstellt und das FB-Objekt wird als Export für dieses Modul markiert.

Im neu erstellten fb.js kannst du das FB-Objekt wie gewohnt instanziieren und verwenden. Füge die App-ID für deine App aus dem App Dashboard hinzu.

Du musst deinen Code lediglich in einem define-Block verpacken und dabei das facebook-Shim-Modul als erforderliche Abhängigkeit übergeben.

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

Siehe auch