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

Facebook SDK для JavaScript с jQuery

В этом руководстве вы узнаете, как встроить Facebook JavaScript SDK в веб-приложение на базе jQuery. jQuery и JavaScript SDK предлагают свои собственные решения, позволяющие отложить выполнение кода до завершения загрузки библиотеки. Это руководство поможет вам сочетать эти решения и использовать их до вызова SDK.

В этом примере используется jQuery версии 2.0.0, загруженный из Google Hosted Libraries CDN. Подробнее о jQuery см. в документации по jQuery.

Интеграция

Добавьте jQuery в заголовок документа и внедрите метод $(document).ready(), который будет выполнен после завершения DOM и инстанцирования jQuery. Ваша страница будет выглядеть примерно так.

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>jQuery Example</title>
  <script>
    $(document).ready(function() {
      // Execute some code here
    });
  </script>
</head>

Вместо того чтобы импортировать Facebook JavaScript SDK с асинхронным скриптом по умолчанию, используйте метод jQuery getScript(). Он позволит импортировать SDK из URL, соответствующего языку ваших пользователей. Вы можете опустить протокол в начале URL-адреса; в этом случае будет использоваться протокол, соответствующий текущему URL-адресу.

По умолчанию jQuery ставит отметку времени для асинхронных запросов, чтобы браузер их не кэшировал. Вы можете отключить эту функцию с помощью метода ajaxSetup(). В этом случае SDK будет кэшироваться локально между страницами.

Метод getScript() является асинхронным, поэтому вы будете отправлять анонимную функцию обратного вызова, в которой сможете выполнить код инициализации SDK обычным образом. Добавьте ID своего приложения из Панели приложений.

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
    FB.init({
      appId: '{your-app-id}',
      version: 'v2.7' // or v2.1, v2.2, v2.3, ...
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

Разделение зависимости

Размещая всю логику вызова SDK в обратном вызове getScript, вы тем самым гарантируете, что объект FB существует. Однако это не лучшее решение для сложных приложений. Объект FB является глобальным, поэтому вы можете разместить логику SDK вне обратного вызова getScript. Однако в этом случае, перед тем как вызывать объект, надо убедиться в его существовании. Если вы хотите, чтобы объект FB загружался в ходе установки приложения, вы также можете использовать фреймворк для работы с зависимостями модулей, например RequireJS.

См. также