分はじめに前回はHerokuのアドオン仕組みについて,エコシステムからおすすめアドオンなどを紹介しました。Herokuを利用するメリットをまた別の観点から理解していただけたかと思います。今回はマンガ共有アプリの開発を進めようと思います。Facebookのいいね!と連動する方法について紹介します。Facebookの「いいね!」とはFacebookの特長として「いいね!」機能が挙げられます。Pageに「いいね!」を押してファンになって自分の最新情報に情報を受け取ったりするものです。Facebook内だけでなくAPIを利用して別のブログの中にいいね!ボタンを見ることも多くなりました。外部のシステムとの連携もどんどん進んでいます。protocolを利用します。protocolとは外部のサイトに設置されるいいね!ボタンはURLごとに区別されるようになっています。protocolです。これを利用すると,Facebook上で誰かがいいね!を押したときにその付加情報を元にいいね!を押したフィードに情報が付加されます。HTMLのmetaタグに付加情報として表示されるたとえば,上の画像のように画像の情報をメタ情報として指定することで,適切な画像をフィードに表示することができます。設定前はページ上のどれかの画像を表示するというような動きになっています。protocolを利用して,ページ情報を付加しておくことでFacebook上に流れるフィードをよりわかりやすく,効果的にすることが可能になるのです。protocolはFacebookが作った規格ですが,Facebookだけで利用するのではなくWebの標準規格として利用されることを狙っています。対応しておくといずれは他のサービスでも利用される様になるかもしれません。いいね!ボタンを配置する外部のサイトにいいね!ボタンを配置する方法は,2つありますす。SDKを導入済み(第6回で解説済み)なのでそちらを利用することにしています。ブログなどにのせるのであれば,IFrameの方が簡単です。どちらもこちらのページから必要項目を入力するとHTML片を生成してくれます。マンガ共有サービスでは,マンガごとのページにいいね!ボタンを設置して気軽に「いいね!」をクリックしてもらえるようにしたいと思います。XFBMLを先ほど紹介したページで生成して,それを参考に以下のヘルパーメソッドを実装しました。表示されているページのURLに対しfb:likeタグを生成するシンプルなものです。font=""></fb:like>!endそれを,マンガの詳細ページで表示します。これを実装した差分はこちらです。protocolに対応するこれでマンガの詳細ページを表示した際にいいね!を押せるようになりました。protocolに対応します。マンガの詳細ページにメタ情報を追加したコミットはこちらです。以下のような,ヘルパーメソッドを定義しました。}endこのメソッドを以下のように,呼び出してメタ情報を設定します。gemを利用すると簡単に検証することができます。protocolの仕様を用いてページのメタ情報を取得し,正しく設定されていることを確認することができます。protocolに対応することで,いいね!ボタンを押したときにフィードに効果的な情報を表示し,そのページにより多くのユーザを誘導できるようになるでしょう。protocolについて学びました。protocolを活用することで,いいね!ボタンを押したときにユーザのフィードにより効果的な情報を表示することができるようになること,また非常に簡単に実現できることがご理解いただけたかと思います。次回は,Herokuでアプリを操作するときに利用するherokuコマンドをもっと便利に利用する方法をご紹介します。