あけましておめでとうございます！及川でございます。

お正月は寝正月のことですよね！
地元に戻るといくらでも寝れるので驚きます！

とはいっても、ちゃんと開発なんかもしてみてました。

よく使うWebサービスからFacebookに更新通知が届くことがありますよね？ユーザーのリピートにどのくらい効果があるのか知りたくて、実装してみることにしました。

進めていく中でFacebookの仕様にハマってしまい、検索してもなかなか解決策が出てこなかったのでその辺の注意点も踏まえて基本的なところからまとめてみます。

Notifications APIはどんな機能なのか？

Notifications APIは、Facebookアプリから特定のユーザーに狙い撃ちで通知を表示させることができる機能です。通知とは、Facebookのヘッダーにある地球のとこに出てくる更新通知のことです。

img_fb_header.png

PCやMACでFacebookをよく見るならわかると思いますが、とりあえず開いて見ちゃいますよね。

友だちのアクションなんかといっしょに自分のFacebookアプリからお知らせを送ることができるんです。メルマガなんかの開封率に比べてどれだけ効果が見込めるかがおわかりですよね？

このお知らせの効果測定はFacebookアプリのInsitghtsで確認できるので、内容をチューニングしていくことで、試行錯誤しながら効果を上げていけば強力な武器になります！

さーどうやって使ったらいいんでしょう！？気になりますよね？ね？

さっそく使うNotifications API

使い方を説明します。

Facebookアプリの登録

開発者ページからアプリ登録をします。

Facebook for Developers
https://developers.facebook.com/

基本的な登録方法は省略しますが、大事なのは「App on Facebook」として登録するところです。いわゆるキャンバスアプリとして登録しないと利用できません。

次の画像のようにURLを入力します。ここでも注意が必要です！有効なSSL証明書がインストールされたhttps環境でないとFacebookアプリのURLにアクセスしても真っ白な画面になってしまいます。

ここにかなりハマりました。URLの後ろに「/（スラッシュ）」がないとダメとか、Sandboxモードであればhttpでも大丈夫とか、いろいろな情報がありましたが結局お金を払ってSSLでアクセスできるようにしないと開発すらできないようです。

img_fb_dev_canvas_setting.png

そんなときでもお財布にやさしいRapid SSLであれば安価にSSLの購入ができるのでオススメです。

APIを叩いてお知らせを送る

お知らせを送るには、以下の様なURLにhttpsでPOSTします。

https://graph.facebook.com/{FACEBOOK_ID}/notifications?access_token={ACCESS_TOKEN}&template={TEXT}&href={URI}

{ と } でくくっているところには、アプリ固有のデータを設定します。設定内容と例は次のとおりです。

FACEBOOK_ID:
　送信相手のfacebook ID
　例： u-pyon

ACCESS_TOKEN:
　アプリケーションIDとアプリのシークレットキーを半角:で区切ったもの
　例： your_app_key:your_app_secret_key

TEXT:
　お知らせに送るメッセージの内容

URI:
　リンク先のURI。FacebookアプリのURLからの相対パス。
　例： canvas.html, canvas.html?return_url=http://example.com/

ここで気づいたかもしれませんが、リンク先はFacebookアプリ内にしか指定できません。ただし、パラメータの設定も可能なので外部サイトにリダイレクトさせたい場合はURLを渡してあげて、JavaScriptでそのURLにリダイレクトすることができます。

上記の情報を設定したURLにhttpsでPOSTリクエストをすれば、お知らせが届きます！

もちろん、前提条件としてFacebookアプリに登録済みのユーザーのみに限定されます。

ちなみにスマホのFacebookアプリには通知されません。ブラウザでの閲覧のみに限られます。

FacebookアプリからJavaScriptで外部サイトにリダイレクト

FacebookアプリのURIは、アプリサーバにも同じようなパスでPOSTリクエストが飛んできます。

たとえば、https://apps.facebook.com/your-app/redirect?return_url=http:%3A%2F%2Fexample.com%2Fにアクセスすると、
Facebookアプリのサーバのドメインをexample.comだとすると、POSTリクエストは
http://example.com/redirect?return_url=http:%3A%2F%2Fexample.com%2Fとなり、その内容がiframeに表示されます。

ここでiframeに表示するhtmlに以下の様なJavaScriptを埋め込むことで、外部サイトにリダイレクトすることができます。

[code:js] [/code]

Yahoo! のURLのところはhrefのパラメータからうまくアプリケーション側で取得して、差し替える必要があります。

Facebookアプリのiframeはwindow.opener.documentで親ウィンドウの情報が取得できない！？

JavaScriptで、iframeで開かれたページから親ウィンドウの情報をwindow.openerというオブジェクトを通して取得することができるのですが、Facebookアプリの場合はPOSTリクエストによって取得されたhtmlを擬似的にiframeで表示しているためか、window.opener.documentがundefinedになりうまく取得できません。
なので、URLのパラメータを使って処理する場合、リクエストを受けるサーバ側で処理してあげないといけないようです。

これで気軽にWebサイトをFacebookアプリ化して、Notifications APIで更新通知を送れますね！