SDK de Facebook para JavaScript
versión API Graph

SDK de Facebook para JavaScript con RequireJS

En este tutorial aprenderás a usar RequireJS para incorporar el SDK de Facebook para JavaScript en otros módulos de JavaScript. Como el SDK para JavaScript normalmente no es compatible con el patrón de diseño de definición de módulos asincrónicos (AMD, por sus siglas en inglés), en este tutorial se explica cómo crear una estructura shim para proporcionar el objeto FB que crea el SDK.

Para realizar este tutorial se recomienda estar familiarizado con los módulos de RequireJS y JavaScript. Obtén más información sobre RequireJS.

Configuración

Configura los demás scripts de RequireJS de la forma habitual y añade un nuevo archivo .js para establecer la interacción con el SDK de Facebook. Este proyecto usará una estructura de directorios como la siguiente:

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

Añade un nuevo archivo para configurar e interactuar con el SDK, como se muestra a continuación:

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

Importa el script requirejs y declara main.js como atributo data-main tal como se indica a continuación:

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

Cómo añadir un módulo shim al SDK de Facebook

En el script principal del proyecto, añade una corrección shim a require.config según se muestra a continuación:

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

De este modo, se crea un módulo facebook mediante la URL del SDK para JavaScript y se marca el objeto FB como exportado para ese módulo.

En el archivo fb.js que acabas de crear puedes crear una instancia del objeto FB y usarlo como lo harías normalmente. Añade el identificador de la aplicación desde el panel de aplicaciones.

Solo necesitas incluir el código en un bloque "define", en el cual se comunica el módulo shim facebook como una dependencia necesaria.

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

Más información