ブログの記事をFacebookのAdd To Timeline（タイムラインに追加）に対応させる

「Open Graph対応の何となくソーシャル風味なブログを作ってみた」で書いたように、このブログの記事を読んだことがFacebookのタイムラインに表示されるようなOpen Graph対応アプリを作成しましたので、作り方をまとめます。

Facebookアプリとしては最も簡単な部類に入るでしょうが、初めてだとそれなりに勉強になるかとは思います。

1. Open Graphを理解する

まずはFacebook開発者サイトの、以下のチュートリアルを読み、やるべきことを理解します。

Tutorial - Facebook開発者

2. アプリを作成

Facebookアプリの作成方法については割愛し、ブログを使ったウェブアプリの作成に必要な項目だけにとどめます。

まずは基本設定で以下を入力します。それぞれの環境に合わせて読み替えてください。

アプリのドメイン: ovreneli.blogspot.com
アプリをFacebookに結合する方法→ウェブサイト
サイトURL: http://ovreneli.blogspot.com/

次に、[オープングラフ]-[Getting Started]でアクションとオブジェクトを定義します。

このアプリでは「read a article」としましたが、それだとニュースという扱いになるようです。

3. OGPの記述を追加

ここからはブログ側での作業になります。

OGPって何？って方は、以下のリンクに詳しくまとまっていますので、ぜひお読みください。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

「いいね！」ボタン導入の際にすでにOGPを記述されている場合でも、オブジェクトの定義は追加する必要があるかと思います。「read a article」のarticleです。

Bloggerの場合、index（トップページ、ラベル）、item（記事ページ）、archive（アーカイブ）、static_page（固定ページ）の4種類のページタイプがあるみたいですが、itemのページでog:typeをarticleに設定する必要があります。

以下、Bloggerテンプレートでの記述例です。他のテンプレートをお使いの場合は読み替えてください。

名前空間の追加（青字の部分）

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'
  xmlns:fb='http://www.facebook.com/2008/fbml'
  xmlns:og='http://ogp.me/ns#'>

OGPの追加（<head>と</head>の間、<b:skin>の上あたりがよさそう）

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.title' property='og:title'/>
<b:else/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
<b:else/>
    <meta content='blog' property='og:type'/>
</b:if>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta content='画像のURL' property='og:image'/>
    <meta content='アプリケーションID' property='fb:app_id'/>
    <meta content='ja_JP' property='og:locale'/>

4. Add To Timelineプラグインを設置

<body>のすぐ下あたりに、以下を追加します。
「いいね！」ボタンをiframe以外で設置している場合は、window.fbAsyncInitの追加だけで済むと思います。

<div id='fb-root' style='display:none;'></div>
<script>
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションID',
    status: true,
    cookie: true,
    oauth: true
  });
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=アプリケーションID';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

次に、サイドバーなどにHTML/JavaScriptガジェットを追加します。

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

テンプレートを保存して、プラグインの表示を確認します。

また、この時点で、curlを使って動作確認することが可能です。
確認方法は、アプリのページの[オープングラフ]-[Dashboard]で、Action Types: Readの「Get Code」を参照してください。

5. publishの実装

最後に、fbAsyncInit内に「read a article」をpublishする実装を追加します（青字の部分）。

publishする条件は以下です。

ページのog:typeがarticleであること
ユーザーが「タイムラインに追加」でアプリを許可していること

og:typeの判定はBloggerテンプレートのページタイプで代替していますが、環境によってはJavaScriptで判定するなど、いくつかの方法が考えられると思います。

<div id='fb-root' style='display:none;'></div>
<script>
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションID',
    status: true,
    cookie: true,
    oauth: true
  });
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      setTimeout(function() {
        FB.api('/me/news.reads', 'post', { article: '<data:blog.url/>' }, function(response) {
          /*window.console &amp;&amp; console.log(response);*/
        });
      }, 15000);
    }
  });
</b:if>
};

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = '//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=アプリケーションID';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

テンプレートを保存して、動作確認をします。

うまくいくと、15秒後にタイムラインに出るはずです。Washington Post Social Readerなどのニュースと一緒になってしまうんですけど…

成功した場合、FB.apiのコールバックでresponse.idがセットされていますので、動作しなければresponseを確認しましょう。

まとめ

最も簡単なFacebookアプリの作り方を紹介しました。

日本でもそろそろOpen Graph対応アプリの開発が活発になると面白いなと思っています。

@ovreneli (tech)

2012年2月13日月曜日