Facebookのタイムラインにアプリを追加する方法(オープングラフアプリ・タイムラインアプリ)

Facebookのタイムラインにアプリを追加する方法(オープングラフアプリ・タイムラインアプリ)

Posted at October 3,2011 1:55 AM
Tag:[Facebook, Timeline]

Facebookの新しい機能「タイムライン」に、アプリを追加できるようになりました(オープングラフアプリ・タイムラインアプリ)。Facebookアプリ上で行ったアクションが次のようにタイムラインに表示されます。

タイムライン

ここでは開発者ブログの「How To: Get Started with the Open Graph」にあるサンプルを実際に使って、Facebookアプリをタイムラインに表示する方法を紹介します。

サンプルはFacebook内に表示するIFrameタブのアプリではなく、通常のウェブサイトでFacebookアプリを動作させます。また、元記事ではFacebookの「Cloud Services」を使ってSSL接続対応を行ってますが、ここでは自前のレンタルサーバーにファイルをアップロードする方法で説明します。

1.アプリの作成

まずウェブサイト用のアプリを作成します。アプリのページで「Create New App」をクリック(初めて作る場合はその前に許可画面が表示されると思います)。

アプリのページ

適当なアプリ名とネームスペースを入力し、「I Agree~」をチェックして「続行」をクリック。ネームスペースに数字は使えません。

アプリ作成ダイアログ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

アプリの設定画面に移動するので、「Website」をクリックしてフォームを表示させ、「サイトURL:」に次項で作成するFacebookアプリ用のファイルのアップロード先のURLを設定し「変更を保存」をクリック。分からない場合は手順を進めていけば分かると思いますので、適当なURLを入れておいてください。

Website

2.タイムラインとアプリの接続の設定

以下の内容を「cookie.html」というファイルで保存します。html要素のlang属性やscript要素にある「en-US」は「ja-JP」にした方がいいかもしれませんがこのまま進めます。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
     xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head>
<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, oauth:true
    });
</script>
 
<fb:add-to-timeline></fb:add-to-timeline>
 
<h3>
    <font size="30" face="verdana" color="grey">
        Stuffed Cookies
    </font> 
</h3> 
<p>
    <img title="Stuffed Cookies" 
            src="http://example.com/cookie.jpg" 
            width="550"/>
</p>       
</body> 
</html>

赤色のYOUR_APP_IDには、1項で作成したアプリのアプリケーションIDを設定してください。ファイルを保存後、1項で設定した「サイトURL:」直下にcookie.htmlをアップロードします。

実際にアプリとタイムラインの接続を制御する部分は以下です。この「Add To Timeline」はソーシャルプラグインとして公開される予定です(2011年10月2日現在はベータ版)。

<fb:add-to-timeline></fb:add-to-timeline>

ファイル内の「http://example.com/cookie.jpg」はクッキー画像です。これはhttps://developers.facebook.com/attachment/cookies.jpgからダウンロードできますが、手持ちの画像で全く問題ありません。

ブラウザからcookie.htmlにアクセスすると次のような画面が表示されるので、「タイムラインに追加」をクリック。

cookie.html

「ログインしてFacebookに追加」をクリック(ログイン状態であれば異なる画面かもしれません)

ログインしてFacebookに追加

これでアプリとタイムラインが接続に追加されました。

cookie.html

3.Open Graphの設定

Facebookアプリの「Open Graph」の項目を設定します。アプリ管理画面左メニューの「Open Graph」をクリック。

アプリ管理画面

サンプルにしたがって「cook」と「recipe」を入力して「スタート」をクリック。

Open Graph

アクションを設定します。ここでは特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。

Open Graph

オブジェクトを設定します。ここでも特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。

Open Graph

アグリゲーションを設定します。ここではサンプルにしたがって「Aggregation Title」のみ「Things I've cooked」に変更して「Save and Finish」をクリック。

Open Graph

これで設定完了です。

Open Graph

4.アクションの公開

オブジェクトの生成(=OGPの設定)を行います。

以下の内容をcookie.htmlのhead要素としてペーストします。

<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE: 
    http://ogp.me/ns/apps/YOUR_NAMESPACE#"> 
    <meta property="fb:app_id" content="YOUR_APP_ID" /> 
    <meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 
    <meta property="og:title" content="Stuffed Cookies" /> 
    <meta property="og:image" content="http://example.com/zhen/cookie.jpg" /> 
    <meta property="og:description" content="The Turducken of Cookies" /> 
    <meta property="og:url" content="http://example.com/zhen/cookie.html"> 
</head>

ペーストした中にある「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。3ヶ所あります。head要素の「ns#」の後ろは半角スペースのままでOKです。

<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE: 
    http://ogp.me/ns/apps/YOUR_NAMESPACE#"> 
    …中略…
    <meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 

「YOUR_APP_ID」にアプリのアプリケーションIDを設定してください。

    <meta property="fb:app_id" content="YOUR_APP_ID" /> 

og:imageのcontent属性値を、cookies.htmlのimg要素のURLに変更します。

    <meta property="og:image" content="http://example.com/zhen/cookie.jpg" />

og:urlのcontent属性値を、ウェブサイトのcookie.htmlのURLに変更します。

    <meta property="og:url" content="http://example.com/zhen/cookie.html"> 

head要素はアプリ管理画面の「Open Graph」→「Object Types:」の「Get Code」で取得できます。

Open Graph

保存後、cookie.htmlを上書きアップロードします。

続いて、アップロードしたファイルをデバグします。アプリ管理画面の「Use Debug Tool」をクリック。

アプリ管理画面

cookie.htmlのURLを入力

デバグ画面

次のように表示されればOKです。Errorが表示される場合はOGPが正しく設定されていない可能性があるので、確認してください。

デバグ画面

続いてアクション公開用のスクリプトを追加します。前準備としてまず、cookie.htmlのhead要素に以下を追加します。

    <script type="text/javascript">
    function postCook()
    {
        FB.api('/me/YOUR_NAMESPACE:cook' +
                    '?recipe=http://example.com/cookie.html','post',
                    function(response) {
            if (!response || response.error) {
                    alert('Error occured');
            } else {
                alert('Post was successful! Action ID: ' + response.id);
                }
        });
    }
    </script>

「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。また、「http://example.com/cookie.html」の部分は、cookie.htmlのURLに書き換えてください。

同様に、cookie.htmlのbody終了タグの直前に以下を追加します。

        <form>
            <input type="button" value="Cook" onclick="postCook()" />
        </form>
        <fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>

「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。

保存後、cookie.htmlを上書きアップロードします。ブラウザでcookie.htmlにアクセスすると、次のような「cook」というフォームボタンが一番下に表示されるのでクリックします。

cookie.html

アプリが正常に動作しました(サンプルでalertを表示するようにしています)。

cookie.html

「cook」をクリックしたユーザー(私)のタイムラインにアプリが表示されました。最近のアクティビティにも表示されています。

タイムライン

タイムラインで該当のアプリだけを表示したい場合は、アプリ管理画面の「See App Timeline View」をクリック。

アプリ管理画面

これで該当アプリだけがタイムラインに表示されます。

タイムライン

5.承認のための要求

前項までの設定では、作成したアクションはアプリ開発者やテストユーザーにしか公開されないため、公開のための承認要求が必要なようです。

アプリ設定画面の「Open Graph」のAction Typeの右にある「送信」をクリック。

承認要求

「Continue」をクリック。

承認要求

「Provide Usage Instructions」に任意の内容を入力して「Submit for Approval」をクリック。ここではサンプルにしたがって「Click cook button on app」と入力します。

ダイアログ

2012年1月22日追記:承認画面のメッセージが変わりました。承認依頼は受け付けられたようです。

ダイアログ

以下は2011年10月現在のもので「Open Graphはベータ版のためまだ承認できません」といった内容のダイアログが表示されます。

ダイアログ

状態が「確認中」に代わります。2011年10月3日現在ではまだ承認されていません。

状態

6.その他

アプリ管理画面のRolesの項目にテストユーザー「Auth Dialog Preview User」が追加されるようです。このテストユーザーでアクションを実行すれば結果がユーザーのニュースフィードなどに反映されるようです。

テストユーザー

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)