JavaScript SDKは、全てのGraph APIとDialogへのアクセスをJavaScriptを介して行うことを可能にします。認証やXFBML版のSocial Plugins表示を行うリッチなクライアントサイドの機能を提供します。
JavaScript SDKの大部分の関数はアプリケーションIDを必須としますが、アプリケーション登録することで取得することができます。
使い方の例は、Facebook for Websites とAuthentication 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.jsXFBML
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.jsAuthentication & 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
現在のセッション情報への、同期されたアクセッサ
ライブラリを初期化します。
ログイン／認証／パーミッションのリクエスト
バックグラウンドでユーザをログアウトさせます。
Event Handling
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.setDoneLoading( function foo(result) { alert(result.time_delta_ms); });
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);
});
