SDK do Facebook para JavaScript
Versão Graph API

SDK do Facebook para JavaScript com RequireJS

Neste tutorial, você aprenderá a incorporar o SDK do Facebook para JavaScript com outros módulos de JavaScript usando RequireJS. Normalmente, o JavaScript SDK não é compatível com o padrão de design Asynchronous Module Definition - Definição assíncrona de módulo (AMD), portanto, este tutorial aborda a produção de um shim a fim de fornecer o objeto FB criado pelo SDK.

Este tutorial pressupõe que você esteja familiarizado com os módulos RequireJS e JavaScript. Saiba mais sobre RequireJS.

Configuração

Configure normalmente seus outros scripts RequireJS e adicione um novo arquivo .js para interação com o SDK do Facebook. Este projeto pressupõe uma estrutura de diretórios como a seguinte:

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

Adicione um novo arquivo para configurar e interagir com o SDK, conforme mostrado abaixo:

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

Você deve importar o script requirejs e declarar main.js como seu data-main da seguinte maneira:

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

Como adicionar um shim ao SDK do Facebook

Em seu script de projeto principal, adicione uma declaração de shim ao require.config, da seguinte maneira:

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

Isso cria um módulo facebook, usando o URL do JavaScript SDK, e marca o objeto FB como a exportação desse módulo.

Em seu fb.js recém-criado, você pode instanciar e usar o objeto FB como de costume. Adicione o número de identificação do aplicativo do Painel do aplicativo.

Você só precisa envolver seu código em um bloco de definição, passando o módulo shim facebook como uma dependência obrigatória.

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

Veja também