http://developers.facebook.com/docs/reference/javascript/

JavaScript SDKは、全てのGraph APIとDialogへのアクセスをJavaScriptを介して行うことを可能にします。認証やXFBML版のSocial Plugins表示を行うリッチなクライアントサイドの機能を提供します。

JavaScript SDKの大部分の関数はアプリケーションIDを必須としますが、アプリケーション登録することで取得することができます。

使い方の例は、Facebook for WebsitesAuthentication guideを参照してください。 JavaScript Testコンソールを用いてJavaScript SDKのメソッドをテストすることが可能です。SDKはオープンソースで、GitHubで公開されています。

Loading

<script>とFB.init()を呼ぶことでSDKをロードします。ドキュメント内に<div id="fb-root">を配置する必要もあります。以下が、一般的なオプションを指定しつつSDKを初期化する例です。

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
</script>

Loading the SDK Asynchronously

サイト内にSDKをロードする最も効率的な方法は、非同期で読み込むことです。これによりページの読み込みがブロックされなくなりますので、ページの高速な読み込みをユーザやSEOロボット/スパイダーに保証するのにとても重要です。以下がその例です。

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

上記の例では、window.fbAsyncInitに定義されている関数がJS SDKロード直後に実行されます。SDKロード後に実行したいコードは全てここのFB.init()以降に納めます。たとえば、ユーザのログインステータスをチェックしたり、Facebookイベントを監視するなどです。

非同期読み込みが正しく動作するようにするため、以下のXFBMLの項目に記されているXMLネームスペースを必ず含んでください。

Internationalization

このSDKは異なるlocalesをサポートしています。上記例で指定されているen_USロケールを置き換えて利用することができます。たとえば、SDKをヒンディ語でロードしてダイアログ表示など行う場合、以下のように指定します。

http://connect.facebook.net/hi_IN/all.js

XFBML

XFBMLをウェブページ中で使用するには、<html>にXMLネームスペースを追加する必要があります。この宣言なしには、XFBMLはInternet Explorerで正しくレンダリングされません。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

SSL

SSL接続でもFaceboook Connectを利用できます。自分のページがhttps://で提供されている場合にのみ利用するべきです。SDKライブラリは表示中のページのプロトコルに依存します、SSL版でもURLは同じで、プロトコルのみ切り替わります。

https://connect.facebook.net/en_US/all.js

Debugging

デバッグ作業を助けるため、デバッグ用のSDKも用意されています。(en_USロケールのみ)

http://static.ak.fbcdn.net/connect/en_US/core.debug.js

Authentication & Authorization

Facebook JavaScript SDKを用いるとユーザ登録とサインイン手順を無くし、Facebookアカウントを用いてあなたのサイトにログインさせることが可能になります。ユーザのログインステータスをhttp://www.facebook.com/とあなたのサイトで共有することで可能にしていますので、ユーザがFacebookにログインしている限り、あなたのサイトにもログインした状態になります。

つまり、開発者自身で登録手順を実装する必要がなく、ユーザは真新しいプロフィール情報を作ったり新しいパスワードを覚え直す必要がなくなります。一番の利点は、ユーザのソーシャルグラフに開発者がアクセスできるようになる点です。これにより、カスタマイズされたソーシャル体験を提供できるようになります。

Status & Sessions

最初のステップは、まず、どうやってユーザを特定し、彼らに代わってAPI呼び出しを行うかです。事実、だいたい半分のAPI利用は認証に依存しています。

  • FB.login() -- ログインし、追加のパーミッションをリクエストします
  • FB.logout() -- ログアウトします
  • FB.getLoginStatus() -- facebook.comからログイン状態を得ます
  • FB.getSession() -- 直近のセッションへの同期されたアクセッサ

さらに、FB.Event.subscribe()を用いていろいろなイベントを監視することが可能です。

  • auth.statusChange
  • auth.sessionChange
  • auth.login
  • auth.logout

API Calls

Facebookは多くのサーバサイドAPIを提供していて、Facebook上のデータをあなたのサイトに取り込んだり、Facebookに対してデータを送信できるようにしています。これらは全て、FB.api()を用います。

FB.api(
  {
    method: 'fql.query',
    query: 'SELECT name FROM user WHERE uid=5526183'
  },
  function(response) {
    alert('Name is ' + response[0].name);
  }
);

Dialogs

SDKの最もパワフルな機能の一つは、Facebook UIのフローを実装できることです。一般的な例はfeedダイアログで、FB.ui()を用いてこれらダイアログを表示します。例えば下記のようにです。

FB.ui(
  {
    method: 'feed',
    attachment: {
      name: 'JSSDK',
      caption: 'The Facebook JavaScript SDK',
      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.'
      ),
      href: 'http://fbrell.com/'
    },
    action_links: [
      { text: 'fbrell', href: 'http://fbrell.com/' }
    ]
  },
  function(response) {
    if (response && response.post_id) {
      alert('Post was published.');
    } else {
      alert('Post was not published.');
    }
  }
);

Method Categories


Core Methods

Graph APIの呼び出しを行います


FB.getLoginStatus

サーバから現在のログイン状態を取得し、ユーザがログイン中だったらセッション情報を返します。


現在のセッション情報への、同期されたアクセッサ


ライブラリを初期化します。


ログイン/認証/パーミッションのリクエスト


バックグラウンドでユーザをログアウトさせます。


Dialogs をiframeもしくはポップアップで表示します。たとえば、ウォール投稿したり、リンク共有したり、友達リクエストするなどです。



Event Handling

FB.Event.subscribe

任意のイベントを監視し、イベント時にコールバックを実行します。


FB.Event.subscribe.の逆で、監視を外します。


XFBML Methods

ドキュメント中のXFBMLマークアップをレンダリングします。


Data Access Utilities

Performs a parameterized FQL query and returns a FB.Data.query object which can be waited on for the asynchronously fetched data.

Wait until the results of all queries are ready.


Canvas Methods

FB.Canvas.getPageInfo

アプリケーションのキャンバスページに関する情報を含むJSオブジェクトを返します。


FB.Canvas.scrollTo

キャンバスページ中で、任意の場所までスクロールするよう指示します。


FB.Canvas.setAutoResize

指定ミリ秒毎にiframeのリサイズを行うタイマーをスタート/ストップします。


FB.Canvas.setDoneLoading( function foo(result) { alert(result.time_delta_ms); });


iframeをリサイズさせます。


FB.Canvas.stopTimer();

// Stuff happens

// In an event handler for a button press FB.Canvas.startTimer();

// at the end of the page load FB.Canvas.setDoneLoading();


FB.Canvas.stopTimer(
    function foo(result) {
        alert(result.time_delta_ms);
    });