SDK de Facebook para JavaScript
API Graph versión

SDK de Facebook para JavaScript con RequireJS

En este tutorial aprenderás a usar RequireJS para incorporar el SDK de Facebook para JavaScript a 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), en este tutorial se explica cómo crear una corrección de compatibilidad para proporcionar el objeto de Facebook creado por 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 el resto de scripts de RequireJS de la forma habitual y agrega 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

Agrega 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 el atributo "data-main" tal como se indica:

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

Agregar una corrección de compatibilidad al SDK de Facebook

En el script principal del proyecto, agrega una declaración de corrección de compatibilidad 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, con 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 de Facebook y usarlo como lo harías normalmente. Agrega 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 de corrección de compatibilidad 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