ARTICLE

Facebook Open Graph ACTION + OBJECT で遊んでみよう

f8 Tokyo から何ヶ月も経ってしまいましたが色々整ったところで、そろそろ Open Graph Action で遊んでみましょう！

Facebook アプリの基本的な知識や作り方などは「facebookアプリの作り方(PHP編)」を参照。
※この記事がわかりやすそうでした

Facebook Open Graph Action のデモ

以下、jsdo.it で作成した Open Graph Action のデモです。
Action: view + Object: source code で試してます。

Open Graph アクション投稿までの流れ

  1. Login with Facebook をクリックするとウィンドウ起ち上がる
  2. ログインに成功するとウィンドウが自動で閉じられる
  3. 画面に “Open a posted activity in Facebook” というのが表示されるのでクリックすると投稿されているのが確認できる
    ※自分のプロフィールからみると、また違った風に表示されているので確認してみてください。

すぐ遊ぶために必要なもの

  • Facebook アプリを作ることができる Facebook アカウント
  • jsdo.it アカウント（Private モードで投稿することもできます）

さあ作り方です

1. Facebook 開発者 > アプリ へアクセスしましょう

2. アプリ作成ボタンクリック

3. アプリ名とアプリの名前空間を入力して次へ

4. メニューの Settings > Basic の基本情報を入力して保存

サンプルの URL は実際にアクセスできません。試す際は外部からアクセスできる URL を入力しましょう。
jsdo.it で試したい場合は App Domain: jsrun.it / Site URL: http://jsrun.it/ に変更しましょう。

5. メニューの Settings > Auth Dialog で適当に情報を入力して保存

publish_actions が設定されていることに注意してください。
また、設定項目がダイアログの何処に表示されるのかを確認するためにも、なるべく全ての項目を埋めましょう。
さらに…、アクティビティがちゃんと登録したアプリから投稿されているかを視覚的に確認しやすくするために、ロゴ・アイコンも設定しておきましょう。とりあえず識別できればいいので、適当なもので構わないと思います。

6. メニューの Settings > Advanced で有効・無効のチェックを付けて保存

Sandbox Mode: Disabled / Enhanced Auth Dialog: Enabled に注意してください。

7. メニューの Open Graph から新しい Action + Object を作成

本番アプリとして定義する場合は、あまりに一般的でない単語だと申請する際に拒否されます。
また want, need, love などの動詞は定義できないようです。
詳しくは右記 URL を参照（公式のチェックリスト）：Open Graph Checklist - 和訳

8. 作成したアクションの設定をおこなう

Advanced の中身

Graph API URL で URL ベースの名前修正ができるみたいです。
公式ドキュメントページ： Define Actions / Using Text Templates

9. 作成したオブジェクトの設定をおこなう

アグリゲーションを使うととても面白いことができますが、今回は端折ります。
公式ドキュメントページ： Define Objects

10. Dashboard へ戻り、作ったオブジェクトの “Get Code” を押して、コードをコピー

ダイアログが起ち上がる

コードをコピーしましょう。head 要素にも記述があるので注意してください。

11. HTML ファイルを作成し、諸々設定

ここからは jsdo.it での作業となります。
jsdo.it で「Start coding」をクリックしてコーディングを開始しましょう。
HTML のタブをクリックして以下を貼り付けてください。
緑の文字色の箇所は 10 でコピーしたものを少しいじったコードです。 なので、ペーストして置き換えてください。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# unchicchi: http://ogp.me/ns/fb/unchicchi#">
        <meta property="fb:app_id"      content="アプリID" /> 
        <meta property="og:type"        content="アプリ名前空間:アプリのオブジェクト名" /> 
        <meta property="og:url"         content="http://jsrun.it/tetsuwo/m1Ko" /> 
        <meta property="og:title"       content="Facebook の Open Graph ACTION + OBJECT で遊んでみよう【デモ】" /> 
        <meta property="og:description" content="説明エリアです。" /> 
        <meta property="og:image"       content="http://jsdo-it-static-contents.s3.amazonaws.com/images/capture/m/1/K/m1Ko.jpg" />
    </head>
    <body>
        <div id="fb-root"></div>
        <header>
            <h1>Demo: Facebook Open Graph ACTION + OBJECT</h1>
        </header>
        <section>
            <aside>
                <input type="button" value="Login with Facebook!" onclick="login()" />
            </aside>
            <pre id="result"></pre>
        </section>
    </body>
</html>

※CSS は こちら からコピペしていただいて構いません。

12. JavaScript からアクションを投稿

次は JavaScript です。JavaScript タブをクリックして以下のコードを貼り付けてください。

window.fbAsyncInit = function() {
    FB.init({
        appId: 'アプリID',
        status: true,
        cookie: true,
        oauth: true,
        xfbml: true
    });

    FB.getLoginStatus(function(response) {
        if (response.authResponse) {
            if (window.opener) {
                window.opener.fbLoginCompleted();
                window.close();
            }
        } else {
            console.log(response);
        }
    });
};

window.fbLoginCompleted = function() {
    FB.api('/me', function(me) {
        FB.api(
            '/me/アプリ名前空間:アプリのアクション名',
            'post',
            { アプリのオブジェクト名: location.href },
            function(response) {
                console.log(response);
                var result = document.getElementById('result'), tmp = '';
                tmp += '<a href="https://www.facebook.com/'
                    + me.username
                    + '/activity/' + response.id
                    + '" target="_blank">Open a posted activity in Facebook</a>\n';
                tmp += 'response:' + JSON.stringify(response) + '\n';
                tmp += '--------\n';
                result.innerHTML = tmp + result.innerHTML;
            }
        );
    });
};

function login() {
    FB.login(function(response) {
        if (response.authResponse) {
            console.log('Welcome!    Fetching your information.... ');
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        scope: 'publish_actions',
        redirect_uri: location.href,
        display: 'iframe'
    });
}

// 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));

アプリID（App ID/API Key）、アプリ名前空間（unchicchi）、アプリのアクション名（view）、アプリのオブジェクト名（source_code）をご自分のものと置き換えてください。
書き換えたら「Finished Editing」をクリック！

お疲れ様です！これで完了しました！
それでは動きを確認しましょう！

13. 動作確認

まずは Play を押して「Login with Facebook!」をクリックしましょう。

そして、新認証ダイアログ（Enhanced Auth Dialog）が立ち上がるので「Facebokでログイン」をクリックしてください。

そうすると jsdo.it へ戻ってきます。（redirect_uri で location.href しているからです。）
そして、レスポンスが以下のように返ってきていれば成功です！
何かエラーが出ている場合は書いてある英語を読めば大体解決できると思います。
では、”Open a posted activity in Facebook” をクリックしましょう。

うぃぃぃぃぃぃぃぃぃぃぃぃ！(ﾟ∀ﾟ)

ボクがこの手順通りに作って出来たのが コレ です。
上手くいかない場合はこれと見比べてみてください。

本番アプリとして稼動させるには…

上述の手順を踏まえて作った場合、サンドボックスモードのままなので、開発者本人やアプリの役割に追加されているユーザーのみ利用することができます。これを一般ユーザーに使ってもらうにはアクションを申請して承認されなければなりません。
承認されるには、Settings > Advanced で Sandbox Mode: Enabled に変更し、Open Graph > Dashboard から申請したいアクションの Submit を押せば完了です。（結果が返ってくるまで3日くらいかかったかも…）

もし拒否（Reject）された場合は右記のチェックリストを参照して該当するものがあるか探してください。Open Graph Checklist

終わりに

最後まで読んでいただきありがとうございました！

このような記事を書くのは初めてのことでして、色々と至らぬ点がありそうです。

何か間違いなどありましたら、コメントいただければ幸いです！ よろしくお願いいたします。

blog comments powered by Disqus
  1. tetsuwo posted this

Categories