Facebook SDK для JavaScript
Версия API Graph

Facebook SDK для JavaScript с RequireJS

Из этого руководства вы узнаете, как внедрить Facebook SDK для JavaScript в другие модули JavaScript с помощью RequireJS. JavaScript SDK не поддерживает модель асинхронного определения модуля (AMD). Поэтому в данном руководстве описывается, как добавить объект FB, созданный SDK, с помощью параметра shim.

Предполагается, что вы знакомы с модулями RequireJS и JavaScript. Подробнее о RequireJS.

Настройка

Настройте другие скрипты RequireJS, как обычно, и добавьте новый файл .js для использования Facebook SDK. Данный проект подразумевает использование структуры каталогов, аналогичной этой.

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

Добавьте новый файл для настройки и работы с SDK, как показано ниже.

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

Импортируйте скрипт requirejs и объявите main.js атрибутом data-main.

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

Добавление параметра shim в Facebook SDK

В основном скрипте проекта добавьте параметр shim в require.config, как показано ниже.

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

Будет создан модуль facebook, использующий URL-адрес JavaScript SDK, а объект FB будет помечен как объект экспорта для этого модуля.

В новом файле fb.js вы можете инстанцировать и использовать объект FB, как обычно. Добавьте ID своего приложения из Панели приложений.

После этого достаточно обернуть код функцией define, указав модуль facebook, добавленный через параметр shim, как требуемую зависимость.

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

См. также