JavaScript SDKの使用方法

FacebookのJavaScript SDKは、クライアントサイドからのAPI呼び出しを便利にする様々な機能を備えています。

Facebook Developers - JavaScript SDK

JavaScript SDKの実装手順

  1. チャンネルファイルを作成する。
    テキストエディタを開いて以下の1行を記述し、ファイル名「channel.html」で保存する。

    <script src="//connect.facebook.net/en_US/all.js"></script>
    
  2. JavaScript SDKを読み込むページを開き、id="fb-root" を指定したdivを配置する。

    <div id="fb-root"></div>
    
  3. JavaScript SDKを読み込み、初期化する。

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '【appId】', ///// ← 解説を参照 /////
        channelUrl : 'channel.html', // チャンネルファイルのパスを指定
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });
    };
    
    // Load the SDK Asynchronously
    (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/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
    </script>
    </body>
    </html>
    

    解説

    【appId】

    FacebookアプリのアプリケーションID(App ID/API Key)を指定。 確認方法

JavaScript SDKの実装手順 (Synchronous Loadingを使用した場合)

この方法は同期的にJavaScript SDKをロードするため、パフォーマンスの点から通常での使用が推奨されていません。主にデバッグ用途で使用することが推奨されています。

  1. id="fb-root" を指定したdivを配置する。

    <div id="fb-root"></div>
    
  2. JavaScript SDKを読み込む。

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
    </html>
    
  3. JavaScript SDKを初期化する。

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
    // Facebook JavaScript SDK初期化
    FB.init({
        appId  : '【appId】', ///// ← 解説を参照 /////
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true  // parse XFBML
    });
    </script>
    </body>
    </html>
    

    解説

    【appId】

    FacebookアプリのアプリケーションID(App ID/API Key)を指定。 確認方法

Sample (Graph APIをコールする)

Graph APIの「feed」をコールして自身のウォールを取得しています。
※詳細は ウォールを取得する を参照してください。

<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
// Facebook JavaScript SDK初期化
FB.init({
    appId  : '...', // appId
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
});

// JavaScript SDK初期化時にappIdを指定しなくても取得可
//(取得時のパラメータにaccess_tokenを指定するため)
//FB.init();

function getWall() {
    FB.api('/me/feed'
         , { access_token: '...' }
         , function(response) {
               // 取得後のコールバック
               var contents = '';
               for (var i = 0; i < response.data.length; i++) {
                   for (var elem in response.data[i]) {
                       contents += elem + ' : ' + response.data[i][elem] + '<br>';
                   }
                   contents += '<hr>';
               }
               
               // ウォールの内容を表示させる
               document.getElementById('result').innerHTML = contents;
           });
}
</script>
<input type="button" value="get wall" onclick="getWall();">
<div id="result"></div>
</body>
</html>

参考サイト