アクセス30倍!?facebookアプリにOpen Graphを実装してみた。

by shinji on 2月 20, 2012


というわけで、僕のEvernoteの中身第一弾です。

前置き

facebookのOpen Graphという仕組みをご存知ですか?

2010年9月22日に開催されたFacebookの開発者向け会議「f8」で発表されたfacebookの新機能です。

f8

これまでfacebook上で友人と情報を共有するには、「いいね」や「ウォールへ投稿」等を行う必要がありましたが、Open Graphが実装されたアプリを使えば、そういった行動を必要とせずに、自動的に友人と行動を共有できる仕組みです。

例えば、Spotifyという音楽サービス上で好きな音楽をあなたが聴いているとその情報がソーシャルチャンネル(ティッカー、ニュースフィード、タイムライン)上に自動的に流れていき、友人とその音楽体験を共有できると。。。

まぁ人によってはかなりアレな仕組みなんですけど、「近所のあのおっちゃんが見てるからポイ捨てやめようぜ」みたいな世界を作りたいんじゃないのかななんて思ったり。

いろんな見方があるとは思いますが、アプリ開発者にとっては、とてつもなく魅力的な仕組みでして、facebook Developersブログによると、Open Graphを実装した様々なサービスが既に大きな効果をあげています。

Spotify: f8以降400万人以上の新規ユーザーを獲得
Earbits:ファンになったユーザー数が1350%増
MOG: Facebookユーザー数が246%増加
Rdio: Facebookからのユーザー登録数が30倍増加
Slacker: 月間アクティブユーザー数が11倍以上増加
Deezer: Open Graph統合を発表以来、10,000以上のユーザーを毎日獲得
引用元:facebook developersブログ

自分のアプリに実装してみる

さて、前置きが長くなりましたが、そのOpen Graphをアプリに実装してみましょう!

まず、何も考えずこちらのサイトの指示通りにやってみてオブジェクトとアクションの概念を掴んでください。
Tutorial: Facebook開発者向けドキュメントの日本語訳とTips

この手順通りにやっていけば、とりあえず動きます。あなたのアプリがどんなジャンルのものであれ、最初は必ず指示通りにcookというアクション(動詞)を定義し、recipeというオブジェクト(名詞)を定義して試してみてくださいね。後で消せますから。

一旦最後まで指示通りにやったあと、自分のアプリ独自のオブジェクトとアクションを設定してみたいと思うはずです。
ニュースサイトであれば、newsというオブジェクトとreadというアクション。
音楽サイトであれば、musicというオブジェクトとlistenというアクション。
クックパッドのようなレシピサイトであれば、recipeというオブジェクトとcookというアクション。

ここで、僕が開発しているExamsアプリを例に作業を進めてみます。

このアプリは、今流行の診断・検定アプリを自由にfacebookページにインストールして公開できるアプリです(ベータテスト中)。
Open Graphを実装しないと、どんな名前の検定を受けても、ユーザーのティッカー等には、「Examsを使い始めました」と出てしまうので、できればExams内に作られた診断・検定名をソーシャルチャンネルに表示させたい。

というわけで、アプリ管理者ページのオープングラフを設定するページに移動し

上記フォームに take a exam(オブジェクトはexam、アクションはtake)と設定しました。(本当は”an”ですが後でfacebook側がうまく設定してくれます。)

Get Startedをクリックすると下記のページに移動します。

ここでいろいろ設定できるみたいなんですが、とりあえず細かいところはあまり気にせずに進めてみましょう。
※ちなみに日本語は設定できないみたいです。

ここまでは、特に問題なく進めることができると思うのですが、僕は次の手順で詰まりました。。。。
現在、独自のアクションを勝手に追加することはできず、必ず最後にfacebookの承認をもらわなければなりません。

というわけで「Submit」を押せばいいのですが、エラーがでてきてContinueすることができません。。。

どうもAggregationsをちゃんと設定しろよと言われているみたいです。設定したはずなのにな。。。と思いながらAggregationsのPreviewをクリックします。

下記画像内のPreview Actions:というところをきちんと設定しないといけないみたいなので、設定します。テキトーに設定しました(笑)

その後、もう一度Submitをクリックすると、このアクションを申請する理由を書く欄がでてくるので英語でテキトーに書いたあと、Continueをクリックし、申請完了。pendingという表示になり、とりあえずここまでの作業は終了と。

どうもfacebookが手動で承認してるみたいで、結構承認されたのは遅かったです。5日くらいかかりましたかね。

その内に、既にご存知とは思いますが
Tutorial: Facebook開発者向けドキュメントの日本語訳とTips
の指示にしたがってOGPタグと、アクションを投稿する命令をアプリ内に記述します。

ちなみに承認に気づいたのは、ある日僕のfacebookのティッカーにこのような情報が流れたからです。

いつの間に承認されたんだよ。。。と思いつつも、とりあえず動いていたみたいなのでほっとしました。

注意

publish_actionsのパーミッションを取得しないと、Open Graphに流れないとのことでしたので、そのように実装したのですが、どうもユーザーによってはpublish_actionsのパーミッションリクエストがそもそもできないようになっており、多くのユーザーが全くログインできないというひどい目にあいました。
いろいろググってみると

“While in Open Graph Beta, the ‘publish_actions’ permission can only be requested from developers and test users of your app. The ‘publish_actions’ permission will be ignored if requested from any other user.”
Is ‘publish_actions’ extended permissions available for testing?

という怪しい記述が。。。でもユーザーによってはログインできる方もいまして、意味不明です。もしかすると、アクションがpending中だったからなのかもしれませんが、どうしようもなかったので、publish_actionsパーミッションのリクエストをしないようにすると動きました。アクションが承認された後の動きはまだ試せていません。。。

最後に

こうやって書いてみると、まだまだ実装したとは言えないかもしれませんが、いろいろわかり次第追記していこうと思います。もし何かご存知の方がいましたらコメントをいただけると幸いです。技術ブログは初めてのため、非常にお見苦しい点が多々あったとは思いますが、最後まで読んでいただきありがとうございました。

Leave your comment

Required.

Required. Not published.

If you have one.