JavaScript用Facebook SDK
グラフAPIバージョン

RequireJSを使ってFacebook SDK for Javascriptと組み合わせる

このチュートリアルでは、RequireJSを使って、Facebook SDK for Javascriptを他のJavaScriptモジュールと組み合わせる方法を学びます。通常、JavaScript SDKはAsynchronous Module Definition (AMD)の設計パターンと互換性がありません。そのため、このチュートリアルでは、shimを記述して、SDKによって作成されるFBオブジェクトを取得する方法について説明します。

このチュートリアルは、RequireJSとJavaScriptモジュールに関して理解している方を対象としています。RequireJSについて詳しくは、こちらをご覧ください。

構成

他のRequireJSスクリプトを通常どおり構成し、Facebook SDKとの連携用に新しい.jsファイルを追加します。このプロジェクトでは、以下のようなディレクトリ構造を扱います。

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

以下のように、構成とSDKとの連携用に新しいファイルを追加します。

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

以下のように、requirejsスクリプトをインポートして、data-mainとしてmain.jsを宣言します。

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

Facebook SDKにshimを追加する

メインプロジェクトのスクリプトで、以下のようにshim宣言をrequire.configに追加します。

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

これにより、JavaScript SDK URLを使ってfacebookモジュールが作成され、FBオブジェクトがそのモジュールのエクスポートとしてマークされます。

新しく作成されたfb.jsで、FBオブジェクトをインスタンス化し、通常どおり使用できます。アプリダッシュボードで、アプリのアプリIDを追加します。

defineブロックでコードをラッピングし、shimモジュールfacebookを必要な依存関係として渡すだけです。

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

参考情報