Facebook for Websites : Facebook開発者向けドキュメントの日本語訳とTips

2011/08/27更新

http://developers.facebook.com/docs/guides/web/

Facebook Platformはウェブサイトのソーシャライズを手助けをします。たった一行のHTMLでLike Buttonを設置して行動を促すなど、Social Pluginsを使うことが可能です。Login ButtonとRegistration Pluginを使えば、登録やサインインの実装が簡単に、もしくは不要にさえなります。また、Graph APIは任意のユーザの全ソーシャルグラフへアクセスすることを可能にし、高度にパーソナライズされたユーザ体験を提供する助けとなります。

このガイドは、これらの機能を用いてウェブアプリケーションを作る基礎を紹介します。ガイド中のサンプルは、サーバサイドの実装にはPHPを、クライアントサイドの実装にはHTML/JavaScriptを用いています。これらのサンプルは明快なので、簡単に他の言語に置き換えることができます。

Social Plugins

Social PluginsはFacebook Platformを使い始める上で最も簡単なツールです。これらのプラグインは埋め込み可能なソーシャライズ機能で、たった一行のHTMLでサイトに実装できます。Facebookによって提供されているので、これらプラグインはFacebookにログインしている全ユーザに対して、たとえ初めて訪れるユーザであってもパーソナライズされています。

もっとも重要なソーシャルプラグインはLike Buttonで、ユーザはワンクリックであなたのwebページを友人と共有できます。表示するには、下記のようなiframeタグを用います。

<html>
    <head>
      <title>My Great Web page</title>
    </head>
    <body>
       <iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>
    </body>
 </html>

「いいね！」ボタンには数多くのオプションがあり、訪問ユーザの友だちの中でページを「いいね！」した人の名前やプロフィール画像を表示することもできます。以下の「いいね！」ボタンはFacebook Developersのものです。

「いいね！」ボタンををサイト上に表示すると、それ以外のSocial Pluginを使ってユーザとより深くかかわり合う事も可能となります。Activity Feed Pluginを使えば、ユーザの友人がサイト上で「いいね！」やコメントをした直近の内容を表示できます。また、Recommendation Pluginを使えば、サイト上でユーザの友人が「いいね！」やコメントした情報を基に、ユーザに対してパーソナライズされたリコメンデーションを表示することもできます。以下の例はFacebook DeveloperのActivityとRecommendation Pluginです。

大部分のSocial Pluginはiframeタグを書き足すだけでサイト上に表示する事が来ます。中には、CommentsやLive StreamのようにXFBML( eXtended Facebook Markup Language )が必要になるものもあります。XFBMLはXML要素のセットで、あなたのHTMLページに埋め込む事でSocial Pluginの表示が可能になります。ページが読み込まれてXFBML要素が見つかると、JavaScript SDKによって指定されたプラグインがレンダリングされます。

全てのSocial Pluginに対してXFBML要素が提供されていて、たとえばLike Buttonなどは以下のXFBMLで表示する事が出来ます。

 <html>
    <head>
      <title>My Great Web page</title>
    </head>
    <body>
      <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
      <fb:like></fb:like>
    </body>
 </html>

Facebook Platformに関して詳しく知らなくても使える為、iframe版のプラグインが一番広く使われています。XFBML版は、もっと詳細を管理したりコードに一貫性を持たせたいという玄人に使われる傾向にあります。

最初のステップは、これ以上シンプルにできないくらいシンプルです。Social Pluginのページから使いたいプラグインを選択し、表示された作成画面のステップに沿って設定します。以下のような作成画面が表示され、プラグインのセットアップやコードの生成をしてくれます。

Authentication

ユーザ登録やサインインの手順を簡略化したり改善するために、ログインシステムとしてFacebookを利用できます。これにより、ユーザはあなたのサービスを使う為に色々とフォーム入力したり、真新しいユーザ名とパスワードを覚え直す必要が無くなります。ユーザがFacebookにログインしている限りは、彼らは自動的にあなたのサイトにもサインインします。Facebookをログインに使えば、ユーザがサイトに訪れた瞬間からソーシャルでパーソナライズされた状態を提供するのに十分な情報が提供されます。

Facebook PlatformはOAuth2.0を認証に使います。OAuth 2.0を直に使ってログイン部分を実装する事も可能ですが、オープンソースのJavaScript SDKを使うのが最も簡単な手順です。

JavaScript SDK を使うには、あなたのサイトをFacebookに登録してApp IDを取得する必要があります。App ID はあなたのサイトに対して与えられる固有のIDで、ユーザとあなたのサイト間の適切なレベルの安全性を保証するものです。App IDを用いてJavaScript SDKをロードする例は以下の通りです。

 <html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
    </body>
 </html>

JavaScript SDKがロードされ、App IDが指定された状態で初期化されたら、下記のようにXFBMLの<fb:login-button>要素を使ってLogin Buttonを配置します。

 <html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button>Login with Facebook</fb:login-button>
    </body>
 </html>

ユーザがブラウザ上でページを読み込むと、JavaScript SDKがLogin Buttonを表示します。

ユーザをログインさせる為には、３つのステップが必要です。

まず、Facebookがユーザを認証しなくてはなりません。この段階で、誰が誰であるのか保証されます。

次に、Facebookがあなたのサイトを認証します。これにより、ユーザが他の誰かにではなく、あなたのサイトに対して情報を提供する事が保証されます。

最終的に、ユーザがあなたのサイトに対して情報アクセスの許可を与え、ユーザ自身がどの情報を提供するのか理解している事が保証されます。

これらの手順は複雑に見えますが、実際のあなたの作業はfb:login-buttonを使うだけで、ユーザはそのボタンをクリックすればログインできます。ユーザがクリックするとJavaScript SDKはユーザがFacebookにサインインしている事とあなたのサイトからリクエストが送信されている事を確認します。そしてブラウザには認証ダイアログが開き、あなたのサイトに関する情報と、あなたのサイトがどのユーザデータを求めているのかが表示されます。デフォルトでは以下のように表示されます。

ユーザがAllowをクリックすると、あなたのサイトが求めているユーザ情報へのアクセスが許されます。ユーザがDon't Allowをクリックすると、ダイアログは閉じられていかなる情報もあなたのウェブサイトに対しては与えられません。デフォルトでは、ユーザ名、写真などの他に、Facebookで全ユーザに公開されているデータへのアクセスが許されます（詳しくはUserオブジェクトに関する項目を読んでください）。

それ以上の情報（たとえばemailアドレスなど）へのアクセスが必要な場合は、その情報に対するパーミッションを得る必要があります。その場合は、fb:login-buttonに対して以下のようにperms属性を指定します。

 <html>
    <head>
      <title>My Facebook Login Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js">
      </script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button perms="email,user_checkins">
         Login with Facebook
      </fb:login-button>
    </body>
 </html>

ユーザがログインボタンを押すと下の図のような認証ダイアログが表示されます。permsにemailとuser_checkinsの二つが足されているので、認証を求める項目二つがセクション内に増えています。

パーミッションの一覧はpermissions referenceでご確認ください。求めるパーミッションの数とそれらを承認するユーザ数には、強い反比例の関係があります。多くのパーミッションを求めるほどそれを承認するユーザ数は減ってしまいますので、本当に必要なものだけを選ぶようお勧めします。

Facebook アカウントを持たないユーザへのサポート
Facebook が持っていない／提供しない追加情報の入力

の二点です。

Registration Login の使い方はLogin Buttonを使うのと同じくらい簡単です。XFBMLのfb:registrationをページ内に設置するだけで、下記のようになります。

 <html>
    <head>
      <title>My Facebook Registration Page</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js">
      </script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
         <fb:registration
            fields="[{'name':'name'}, {'name':'email'},
            {'name':'favorite_car','description':'What is your favorite car?',
            'type':'text'}]" redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION">
    </fb:registration>
    </body>
 </html>

ユーザがまだFacebookにログインしていない場合には、下記のようなフォームが表示されます。フォームの入力欄は補完されていませんが、Facebookにログインして補完させるリンクがあります。

ユーザがFacebookにログイン済みだったり、このフォームからログインした場合は下記のようなフォームです。今回の場合はユーザのFacebook情報で入力欄が補完されています。

ユーザは情報を確認し、そして／もしくは、カスタマイズされた入力欄に入力して（上記の例で言うと、favorite_carがユーザが直接入力する必要のあるカスタム入力欄で、これはFacebookのプロフィールでは管理していないものです）、Registerをクリックします。これで下記ダイアログのように認証プロセスが始まります。

それが完了すると、ユーザはfb:registrationのredirect-uriアトリビュートに指定されたURLへとリダイレクトされ、登録プロセスが完了します。

Login ButtonとRegistration Pluginを使うと、簡単に5億人以上のFacebookユーザをサイトへ導けるようになります。その過程で、より多くのコードを無くす、もしくは減らす事さえ可能です。Login Button、Registration Plugin、JavaScript SDKを読む事で、FacebookへのLogin追加についてもっと学ぶ事ができます。

Personalization

Social Pluginがあなたのページをパーソナライズする簡単な方法を提供するのに対し、Login Buttonの設置さえすれば、Graph APIの力を使ってより深くパーソナライズされたユーザ体験を提供できるようになります。Graph APIでユーザのFacebookプロフィールへアクセスし、それを用いてカスタマイズしたユーザ体験を提供できるのです。また、Graph APIでユーザのFacebook WallやNews Feedに投稿する事も可能です。ユーザのソーシャルグラフにアクセスして、彼／彼女の友人を直接誘導してくることさえもできます。

Javascript SDKからGraph APIへのアクセスは明快で、FB.apiを使います。この機能は文字列の引数によって、Graphのどの部分をターゲットとするのか指定したり、完了後に実行されるコールバック関数を指定できます。以下のデモが、Graph APIからどのようにFB.api()を使ってユーザの写真や名前を取得し、サイト内に表示するのかを示しています。

<html>
    <head>
      <title>My Great Website</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js">
      </script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });
         FB.api('/me', function(user) {
           if(user != null) {
              var image = document.getElementById('image');
              image.src = 'http://graph.facebook.com/' + user.id + '/picture';
              var name = document.getElementById('name');
              name.innerHTML = user.name
           }
         });
       </script>
           <div align="center">
           <img id="image"/>
           <div id="name"></div>
           </div>
    </body>
 </html>

JavaScript SDKを使ってサイトをパーソナライズする別の方法は、FB.ui関数です。この関数はPlatform Dialogsをサイト内に表示させるので、FB.uiを使えば、ユーザのFeedに対して投稿したり友人をサイトへ招待させる事ができるようになります。以下は、Feed Dialogをサイト内で使う場合の例です。

<html>
    <head>
      <title>My Great Website</title>
    </head>
    <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js">
      </script>
      <script>
         FB.init({ 
            appId:'YOUR_APP_ID', cookie:true, 
            status:true, xfbml:true 
         });

         FB.ui({ method: 'feed', 
            message: 'Facebook for Websites is super-cool'});
      </script>
     </body>
 </html>

ページがブラウザにロードされた段階でJavaScript SDKは以下のようなダイアログを表示し、フィードに対してユーザは投稿できます。最初にダイアログに対する諸々のデフォルト値を設定しておいて、必要に応じてユーザに変更させる事も可能です。

JavaScript SDKでできる事を学ぶ最善の方法の一つは、JavaScript Consoleを使う事です。このツールは、自分のサイトへ変更を加える前にコンソール内で直接実行できるサンプルを提供しています。

Javascript SDKがあればクライアントサイドのコードからGraph APIやPlatform Dialogへアクセスできますが、サーバサイドからのGraph APIへのアクセスも大変興味深いものです。JavaScript SDKはログインしたユーザの情報をfbs_YOUR_APP_IDという名前のクッキーに保存します。以下のPHPプログラムは、どのようにクッキー情報を取得し、生成するページをその情報によってカスタマイズする方法を示しています。

<?php

define('YOUR_APP_ID', 'your app id ');
define('YOUR_APP_SECRET', 'your app secret');

function get_facebook_cookie($app_id, $app_secret) {
  $args = array();
  parse_str(trim($_COOKIE['fbs_' . $app_id], '\\"'), $args);
  ksort($args);
  $payload = '';
  foreach ($args as $key => $value) {
    if ($key != 'sig') {
      $payload .= $key . '=' . $value;
    }
  }
  if (md5($payload . $app_secret) != $args['sig']) {
    return null;
  }
  return $args;
}

$cookie = get_facebook_cookie(YOUR_APP_ID, YOUR_APP_SECRET);

$user = json_decode(file_get_contents(
    'https://graph.facebook.com/me?access_token=' .
    $cookie['access_token']));

?>
<html>
  <body>
    <?php if ($cookie) { ?>
      Welcome <?= $user->name ?>
    <?php } else { ?>
      <fb:login-button></fb:login-button>
    <?php } ?>
    <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,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body>
</html>

JavaScript SDKでクッキーを扱うのは、ユーザを認証してサーバサイドからのコードにアクセスする数通りの方法の一つでしかありません。Security Guideでは、クライアントサイドのコード無しで、どのようにしてサーバから直接認証してGraph APIにアクセスするのかを解説しています。

Analytics

ユーザ層の統計や、あなたのサイトでユーザがどのように共有しているのかを、Insightsを使って知る事ができます

ドメインやアプリ毎に細分化されたレポートをInsightsは提供します。ユーザがFacebookやFacebook連携サイトであなたのサイトのコンテンツを共有している統計を、どこでそれが実行されたかに関わらず知る事が可能です。たとえば、ユーザがFacebookのステータスメッセージの部分にあなたのサイトのURLを入力すれば、あなたのドメインの統計情報として取得できます。

Insightsで扱われるデータはGraph APIを通しても取得可能ですので、あなた自身の作成する統計システムでFacebookの統計データを扱う事もできます。

Next Steps

このページでは、Facebook Platformが提供している機能の中で、あなたのサイトで利用できるものを簡単に説明しましたが、core conceptsのドキュメントはより詳しくFacebook Platformの機能について解説しています。また、Graph APIは、始めてみるのにはとても良い分野です。実際に動くサンプルを求めているのならば、是非サンプルをご覧下さい。何かひらめきを求めているのであれば、Showcaseをチェックしてみてください。

Facebook開発者向けドキュメントの日本語訳とTips