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

jQueryを使ってFacebook SDK for Javascriptを組み込む

このチュートリアルでは、Facebook SDK for JavascriptをjQueryベースのウェブアプリに組み込む方法について学びます。jQueryとJavaScript SDKでは、ライブラリが読み込まれるまでの間、コードの実行を延期するそれぞれのソリューションがあります。このチュートリアルは、その2つを組み合わせて、SDKを呼び出す前にその両方を使用できるようにするものです。

この例では、GoogleのHosted Library CDNで提供されるjQuery 2.0.0を使用しています。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()メソッドを使って、利用者のロケールに合った正しいURLからSDKをインポートします。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コールバックの外に置くことができます。ただし、この場合は呼び出す前に存在することを確認する必要があります。または、RequireJSのようなモジュールの依存関係のフレームワークを使って、FBオブジェクトが必ずアプリケーションセットアップの一部として読み込まれるようにします。

参考情報