Facebookページに複数のブログのRSSフィードを表示する方法

5.16
2011

もうひとつFacebookネタ。覚書もかねて。

Facebookページに複数のブログのフィードを表示させてみました。
私は「LOWEREAST81」のFacebookページのお手伝いをしているのですが、そこで実装している方法です。
LE81 Facebookページ

今回は、専用のタブに複数のブログのRSSを読み込んで、それを更新日付順に並べ替えています。
さらに加えて、どのブログのエントリーなのかを分かりやすくするために、各タイトルの頭に目印をつけています。

利用したのは、「Involver」と「Yahoo Pipes」です。


さて、実際の設定方法を見てみましょう。
当然ですが、Facebookページがすでにある前提です。

簡単に作業の流れを説明します。

1.Involverの「RSS for pages」をFacebookページにインストール
2.Yahoo Pipesで、表示させたい複数のRSSフィードを一つにまとめる
3.Yahoo Pipesのフィードを、「RSS for pages」に設定する

当然ですが、難所は2ですね。


(1)まずは、Involverのページへ。左上の「Get Apps」をクリック


(2)アプリ一覧から、「Rss Feed」を選択。(Installをクリック)


(3)追加したいFacebookページを選択


(4)なんか、会社名と電話番号を聞かれます。まあ、適当に。


(5)で、この画面で、読み込みたいフィードを登録します。

はじめて使う人は、とりあえず自分のブログのフィードURLをためしに設定してみてください。

さて、次はYahoo Pipesの作り方です。
これは・・。ハマりますよww
すげーおもしろい。


(1)まずはYahoo Pipesに行きます。「Create Pipe」をクリックすると、ログイン画面になります。YahooIDがあればそれでログイン可能です。


(2)編集画面が開きます。ここからの説明は、この編集画面でPipeを作っていく説明になります。

基本的な操作は、左メニューにある「アイテム」を、右側のフィールドに追加していきます。
追加は、ドラッグ&ドロップか、「+」マークを押すことでできます。
追加したアイテムそれぞれのパラメーターをいじりながら、各アイテムを「パイプ」でつなぎ、完成させます。

細かい説明はいらないから完成形だけ見せろ!という人はコチラ

「Edit Source」から。


(3)まずは、Sources>Fetch Feedを追加。Feedを取得したいRSSのURLを入れてください。


(4)次に、Operators>Regexを追加。そして、先ほどのFetch Feedとパイプでつなぎます。つないでから、画面の通りに設定してください。
左から順に、「item.title」を選択、「(.*)」と入力、「ブログ|$1」と入力。
右側のチェックボックスは全部無視でいいです。

一応説明すると、Fetch Feedで取得したRSS情報に、一定のルールにのっとって変更を加えるのがこのRegexです。

ここで設定しているのは、「item.title」のデータに対して、正規表現「(.*)」で検索をかけ、ヒットしたものを「ブログ|$1」で置き換えています。
「item.title」は、記事のタイトル情報です。
正規表現「(.*)」は、ようはどんな文字でも全部ヒットさせる。
「ブログ|$1」の「ブログ|」という部分が、記事のタイトルに追加して表示させたい文言です。ここを自由に変えてください。
「$1」ってのは、よくわかりませんが記事タイトルの元データみたいですね。


(5)続いて、もう一つSources>Fetch Feedを追加。2つ目のブログのFeedを入力。


(6)次に、Operators>Regexを追加。基本的にはさっきと同じことをもう一回やります。

画面の例では、私のブログのフィードと、Twilogのフィードをマージしています。
(そんなもの使いませんけどね。)
なので、二つ目のRegexは「Twilog|」とタイトルの頭に付け加えています。


(7)Operators>Unionを追加して、二つのブログのRSSを一つにします。

ここまで完了すれば、2つのフィードのマージと、それぞれの記事タイトルに特定の文言を付け加えることができます。
ただし、このままOutputしてしまうと、ブログ毎にフィードがまとまってしまい、二つのフィードを時系列で並べることができません。
そこで、Output前にもう一つアイテムを追加します。


(8)Operators>Sortを追加します。で、画面の通り設定をしてください。

Sortは、いずれかのデータをキーにして並び替えをするアイテムです。
「item.y:published」は、RSSの日付です。


(9)ということで、最後に「Pipe Output」につないで、完成です。
完成したら、上部の「Run Pipe」をクリック。


(10)完成したPipeがこちら。「Get as RSS」をクリックすれば、RSS画面に移動します。

ちなみに、LE81のページで使っているPipeは、もうちょっと手が込んでます。
AmebaのRSSなんですが、なんか余計な広告フィードが混ざってるんですよ。
それがうざいので、Operators>Filterで、URLに「rssad.jp」を含む場合はブロックする設定にしてます。

さて、後はFacebookに設置するだけ。


(1)最終的に完成したRSSフィードを先ほどの「RSS for pages」に入れて


(2)完成です。

いやー、Yahoo pipe面白い!
これは奥が深いなー。