このチュートリアルでは、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オブジェクトが必ずアプリケーションセットアップの一部として読み込まれるようにします。