Facebook SDK

https://developers.facebook.com/docs/javascript/gettingstarted

Facebook SDKのjavaScriptは、クライアントサイドに豊富な機能を提供します。

サイト上のいいねボタンや他のソーシャルプラインを有効にします。
ユーザがサイトにサインアップする障壁を下げるための、Facebookログイン機能を提供します。
Graph APIと呼ばれるFacebookのプライマリAPIを呼び出すのが簡単になります。
ストーリーのシェアなどの様々なアクションをユーザに行なってもらうためのダイアログ表示を有効にします。
ゲームやFacebookタグアプリケーションなどを構築する際の、コミュニケーションを用意にします。

SDK、ソーシャルプラグイン、ダイアログはデスクトップ、モバイルの両方のウェブブラウザで動作します。

ローディングと初期化
ソーシャルプラグイン(いいね！ボタンやコメント)
ダイアログ
Facebookログイン
グラフAPI
ゲームとページタブアプリ
Webview内のWebアプリケーション

ローディングと初期化

下記のコードは共通オプションを指定し、javaScript SDKの読み込みと初期化を行います。 YOUR_APP_IDとWWW.YOUR_DOMAIN.COMを Appダッシュボードで指定されているものに置き換えてください。

このコードを<body>タグのすぐ後に配置してください。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // Facebook JavaScript SDKの初期化
    FB.init({
      // ダッシュボードのアプリID
      appId      : 'YOUR_APP_ID',
      // クロスドメイン対策用のチャンネルファイル
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
      // Facebookログインステータスをチェック
      status     : true,
      // ページ上のソーシャルプラグインを探す
      xfbml      : true
    });

    // イベントリスナー追加のような初期化の追加処理をここに書きます
  };

  // SDKの非同期読み込み
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

あなたのウェブサイトやオンラインサービス、またはそれらのサービスの一部が、 13歳未満の子供向けに作られている場合は、初期化コードを変更する方法についてをお読みください。

非同期読み込み

上記の処理は、SDKを非同期で読み込むことで、ページ内の他の要素の読み込みをブロックしないようにしています。 SDKソースの読み込みが完了すると、window.fbAsyncInitに割り当てられた関数が実行されます。

SDKが読み込みされた後に実行させたいコードは、この関数内のFB.initの後に配置すべきです。例えば、ユーザーの状態でログインをテストしたり、アプリケーション内のFacebookイベントに署名する場合などです。

また、SDKと並べて他のjavaScriptライブラリを使用することも出来ます。他のライブラリとSDKを使用するための方法を下記から参照してください。

初期化パラメータ

この例では、SDKのen_USバージョンが初期化されるため、全てのダイアログとUIはUS英語になります。 SDKのロケール固有のバージョンを読み込みするためには、ローカライズの項目を参照してください。

statusをtrueにすることによって、SDKはOAuthにヒットしたユーザーの情報を取得しようと試みます。 statusをfalseにするとページ読み込み時間が改善されますが、手動による認証ユーザーのログイン状態のチェックを行わなければいけません。このプロセスを更に詳しく知りたければ、Facebookログインの項目を参照してください。

xfbmlをtrueにすると、SDKはソーシャルプラグインを初期化するためにDOMの解析を行います。もし、ソーシャルプラグインをページ上で使用しないのであれば、xfbmlをfalseにすることでページ読み込みの時間を改善することが出来ます。ソーシャルプラグインの詳細については、ソーシャルプラグインの項目を参照してください。

利用可能な全ての初期化オプションについては、FB.initドキュメントを参照してください。

`fb-root`タグ

JavaScript SDKは、ページ内にfb-root要素を必要とします。

fb-root要素は、display:none、visibility: hiddenを使った隠し要素にしてはいけません。この要素、またはその他のSDKパーツが、Internet Explorerで適切に動作しなくなります。

SDKはfb-rootに要素を挿入することで、bodyまたはページの最上部に近い位置に配置される事を期待します。 fb-root要素がposition: absoluteまたはposition: relativeの要素内に無ければベストです。もし、fb-root要素をposition指定された要素内に配置しなければいかない場合、そのpositionは、bodyの先頭近くにすべきですが、SDKのパーツのプロパティが動作しない可能性があります。

チャンネルファイルの追加

チャネルファイルを追加することで、特定のブラウザのクロスドメイン通信の問題に対処することになり、 javaScript SDKのパフォーマンスの大幅な向上に繋がります。チャンネルファイル(channel.html)の中身は、次のような1行です。

 <script src="//connect.facebook.net/en_US/all.js"></script>

チャンネルファイルは、キャッシュを出来るだけ長く持つよう設定されるべきです。このファイルが参照される際に、終了期限を長くしたExpiresヘッダーを送信すべきです。こうすることで、チャンネルファイルがブラウザにキャッシュされ、各ページでリフレッシュしてもリロードされません。適切なキャッシュが無いと、著しいパフォーマンスの低下を引き起こしてしまいます。 PHPであれば次のような方法で実装します。

 <?php
 $cache_expire = 60*60*24*365;
 header("Pragma: public");
 header("Cache-Control: max-age=".$cache_expire);
 header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
 ?>
 <script src="//connect.facebook.net/en_US/all.js"></script>

channelUrlパラメータは、FB.init()の任意設定ですが、設定することを強くお勧めします。チャンネルファイルが提供されると、下記の既知の3つの問題に対しての助けとなります。

channelUrlが未設定の場合、フレームをまたいだソーシャルプラグインが空白となる可能性があります。
もし、channelUrlが未設定で、ページに音声または動画の自動再生が含まれていた場合、クロスドメイン通信のためバックグラウンドで2回目にページが読みこまれているため、ユーザには2つの音声が聞こえる可能性があります。
チャンネルファイルは、サーバー側のログで余分なヒットの混入を防ぐことができます。もし、channelUrlが未設定の場合、ログのfb_xd_bustまたは、fb_xd_fragmentパラメータをページビューの適切な数をカウントするために削除すべきです。(翻訳に自信無し)

channelUrlに指定するURLは、フルパスでSDKを含めるページと一致していなければいけません。別の言い方をすると、サイトがwwwを提供していれば、チャンネルファイルのドメインに必ずwwwを含まなければならず、もし、document.domainがページ上で変更されれば、同様にchannel.htmlファイルのdocument.domainも変更しなければいけません。また、プロトコルも一致していなければいけません。もし、サービスがhttpsで提供されていた場合、channelUrlもhttpsでなければなりません。 scriptのsrcも一致したプロトコルを同様に使用することを覚えておいてください。上記のサンプロコードは、プロトコル相対URLを使用しています。

デバッグ

パフォーマンス向上のため、javaScript SDKは圧縮されたものを読み込みます。デバッグバージョンのjavaScript SDKを読み込むことも可能で、非圧縮であることはもちろん、ログ機能や厳格な引数チェックも含んでいます。それをするためには、URLの読み込みを次のようにします。

js.src = "//connect.facebook.net/en_US/all/debug.js";

ローカライゼーション

javaScript SDKは、Facebookにサポートされている全ての地域で利用可能です。

サイトにあった地域のSDKに変更するには、SDKソースの読み込み時にen_USをサポートされているコードに変更します。例えば、サイトがスペイン語の場合、下記のコードを使用してSDKを読み込みすると、全てのソーシャルプラグインがスペイン語になります。

<script>
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/es_LA/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

もし、チャンネルファイルを使用しているのであれば、メインページにjavaScript SDKを読み込む際に一致するURLに変更する必要があります。

ソーシャルプラグイン(いいね！ボタンやコメント)

いいねボタンやコメントプラグインのようなソーシャルプラグインは、ユーザがあなたのサイトを通して気軽にソーシャルアクションを起こせるようにしてくれます。これらは、特別な名付けをされたタグとしてあなたのウェブサイトに埋め込まれます。これらは、2つのフォーマットのうち片方が指定されます。

HTML5スタイル(推奨):

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

または、XHTMLスタイル:

<html xmlns:fb="http://ogp.me/ns/fb#">
...
<fb:like send="true" width="450" show_faces="true"></fb:like>

SDKは、これらのスタイルのタグのうち一方を自動的にページをスキャンします。もし、FB.init()時にxfbml: trueのオプションが指定されていれば、プラグインがセットアップされます。

もし、ページ上にソーシャルプラグインが無いのであれば、xfbmlをfalseにすることで、ページのパフォーマンスを向上させることが出来ます。

ダイアログ

Facebookダイアログは、ユーザのタイムラインにコンテンツをシェア、メッセージの送信、リクエストの送信などの機能を、簡単に提供する機能を提供します。ダイアログを表示するには、javaScript SDKのFB.ui()メソッドを使用します。

javaScript SDKによって表示されたダイアログは、モバイルかデスクトップなのかによって自動的にフォーマットされます。

下記の例では、FB.ui()メソッドを使用して、ユーザが彼らのタイムラインにリンクをポストするためのフィードダイアログを呼び出しています。

FB.ui(
  {
   method: 'feed',
   name: 'The Facebook SDK for Javascript',
   caption: 'Bringing Facebook to the desktop and mobile web',
   description: (
      'A small JavaScript library that allows you to harness ' +
      'the power of Facebook, bringing the user's identity, ' +
      'social graph and distribution power to your site.'
   ),
   link: 'https://developers.facebook.com/docs/reference/javascript/',
   picture: 'http://www.fbrell.com/public/f8.jpg'
  },
  function(response) {
    if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
  }
);

Facebookログイン

Facebookログインは、Facebookのアカウントを使用してユーザをあなたのアプリケーションに登録、ログインする機能を提供します。詳しいガイドについては、javaScript SDKを使用したFacebookログインの実装を参照してください。

Facebookのログインを実装する際に使用するjavaScript SDKは下記のとおりです。

FB.login() — ユーザにログイン、または権限の追加を訪ねます。
FB.getLoginStatus() — ユーザの現在のFacebookログイン状態を取得する非同期メソッドです。

上記のメソッドに加えて、FB.Event.subscribe()を使用した署名についてのいくつかの関連するイベントがあります。

auth.login
auth.logout
auth.statusChange
auth.authResponseChange

グラフAPI

Graph APIのデータを読み込み、書き込みするために、javaScript SDKのFB.api()メソッドを使用します。

詳しいガイドは、Getting Started: The Graph APIを確認してください。

下記は、現在ログイン中のユーザ名を読み込むシンプルな例です。

FB.api('/me', function(response) {
  alert('Your name is ' + response.name);
});

ゲームとページタブアプリ

JavaScriptのSDKは、FacebookのCanvasページ上で親となるfacebook.comのページと通信するための方法を提供します。これは、Canvasのiframeのサイズ変更、パフォーマンスデータを収集、静的リソースの最適化をするのに便利です。詳しい情報は、Apps on Facebook guideを確認してください。

Custom Flash Hiding Callback
Canvas上でのFlashデベロッパーに対しての特別な考慮 - もし、Adboe Flashアプリケーションをホスティングしているならば、opaqueのFlashオブジェクトに、 wmodeを設定することをお勧めします。

もし、windowまたはdirectのwmode値を使用しなければいけない場合、 Canvasは自動的に隠れ、ダイアログ、チケットフライアウト(?)、チャットタブ、通知表示時にFlashオブジェクトを表示させます。(翻訳に自信無し)

カスタム非表示と表示を提供することを希望する開発者は、FB.initに対し、 hideFlashCallbackオプションでJavaScript関数を渡すことができます。この関数は、ユーザの行動(通知をクリック等)によるFlashオブジェクトの表示、非表示、または、デベロッパーによるFlashオブジェクトの表示、非表示が行われる度に実行されます。この関数は、2つのプロパティを含むオブジェクトのパラメータを受け取ります。

state: 'opened'または'closed'の値をサポート
elem: 表示または非表示にするHTML要素

カスタムアクションは200ms以内に完了されなければいけません。そうしなければ、Flashオブジェクトは自動的に非表示とみなされます。

実装例:

function(params) {
  if (params.state == 'opened') {
    // Flash object非表示
    FB.Canvas.hideFlashElement(params.elem);
  } else {
    // Flash object表示
    FB.Canvas.showFlashElement(params.elem);
}

FB.Canvas.hideFlashElementと FB.Canvas.showFlashElementを通して、 Flashコンテンツは、手動で表示、非表示を行うことが出来ます。

Webview内のWebアプリケーション

javaScript SDKは、ネイティブのFacebook iOSまたはAndroidアプリのWebビュー内に読み込まれたウェブページに対しても互換性があります。ユーザがウェブサイト、またはネイティブのFacebookアプリ内のウェブアプリのリンクを辿る際に、ユーザはネイティブのFacebookアプリケーション体験の内側に留まり、 UIWebView(iOS)または、WebView (Android)内で、クリックされたリンクが表示されます。

ネイティブアプリ内のWebビューは、標準ブラウザセッションから、通常はサンドボックス化されています。 Facebookアプリは、ソーシャルプラグインと認証がまだ動作するように、デフォルトのデバイスのブラウザが共有するセッション空間が読み込まれているものとしてWebビュー内にセッションを注入します。(翻訳に自信なし)

もし、あなたのアプリがFB.ui()を通してSDKでダイアログを使用、または、FB.login()を使用してユーザ認証を行うのであれば、これらの機能はネイティブの同等の機能と置き換えられます。