SDK di Facebook per Javascript
Versione API Graph

SDK di Facebook per JavaScript con RequireJS

In questo tutorial, scoprirai come incorporare l'SDK di Facebook per JavaScript con altri moduli JavaScript tramite RequireJS. Normalmente, l'SDK JavaScript non è compatibile con lo schema di progettazione AMD (Asynchronous Module Definition, Definizione asincrona dei moduli), pertanto in questo tutorial viene illustrato come scrivere uno shim per fornire l'oggetto FB creato dall'SDK.

Il tutorial è pensato per chi ha familiarità con i moduli RequireJS e JavaScript. Scopri di più su RequireJS.

Configurazione

Configura gli altri script RequireJS normalmente e aggiungi un nuovo file .js per l'interazione con l'SDK di Facebook. In questo progetto si presuppone che sia presente una struttura di directory simile alla seguente:

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

Aggiungi un nuovo file per la configurazione dell'SDK e l'interazione con quest'ultimo, come descritto di seguito:

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

Devi importare lo script requirejs e dichiarare main.js come attributo data-main nel seguente modo:

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

Aggiunta di uno shim all'SDK di Facebook

Nello script del progetto principale, aggiungi la dichiarazione di uno shim a require.config, come mostrato di seguito:

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

In questo modo viene creato un modulo facebook usando l'URL dell'SDK JavaScript e l'oggetto FB viene contrassegnato come esportazione per quel modulo.

Nel file fb.js appena creato, puoi istanziare e usare l'oggetto FB normalmente. Aggiungi l'ID app per la tua app dalla Dashboard gestione app.

Devi semplicemente eseguire il wrapping del codice in un blocco di definizione, passando il modulo shim facebook come dipendenza obbligatoria.

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

Altri contenuti da consultare