Ajaxで複数RSSをサクサク表示してくれる「escaloop」。GoogleのサービスにもGoogle AJAX Feed APIがありますが、排出されるコードが思わしくないのが難点。複数RSSをまとめてくれるブログパーツもありますが、総合的に見ると「escaloop」が今のところ一番かも。
シンプルな複数RSSまとめブログパーツ「escaloop」
Ajaxローダー特有の「グルグル」で読み込み始めてくれて、気持ち良さも感じます。余計な装飾がないのでサイトに融合しやすいのも肝かも。
「escaloop」で利用可能なサービス
下記サービスのRSSを読み込めるようです。
- del.icio.us
- Flickr
- Google Reader
- LastFM
- Livejournal
- Magnolia
- Pownce
- StumbleUpon
- Tumblr
- Vox
escaloop スタートアップガイド
以前にどなたかのブログでリクエストがあったので英語が苦手な方向けに、ちょっと雑ですがガイドします。
- escaloop. ☆ Badge Builderのページを開く
- 「— I want to build a (new) badge!」をクリックすると↓のように開くのでRSSをコピペしていく

- 「Styling settings」の欄で各種項目を設定
- List style
- CSSに自信がある方はセッティングしてみては?下の方にデフォルトのCSSを記載しておきます。
- Number of bullets
- 表示させる記事数を10~全部まで選択できます
- Grouping
- たとえばFlickrならFlickrだけをまとめて表示し、その次にTumblrのみを表示するといったような設定
- List of sources
- ↑の表示でも反映させているように、一番下に読み込んでいるRSSの元サイトへのリンクを表示する設定
- 「Save Your Setting」ボタンを押して保存

- 「Here's a preview of your badge (will open in a new window).」をクリックすると新しいタブでプレビューできます
- ↓ここに表示されるコードは、次回以降同じ設定を呼び出すための「escaloop ID」です

- 上段のHTMLをブログパーツを表示させたい場所にコピペし、下段のコードを<head>内または</body>タグの直前にコピペします(ブログの場合は記事の一番下でもOK。)

- 設置完了
デフォルトのCSS
排出されるコード中にある、 <link type="text/css" href="http://escaloop.com/badge/css/default.css" rel="stylesheet" /> の部分で下記CSSをカスタマイズしたファイルの保存先を指定すればデザインをいじれるようです。
たった4行のコードを追加するだけで複数RSSを表示できてしまうのはなかなか嬉しいですよね。興味のある方はescaloop. ☆ Dead-simple lifestream badges.へどうぞ。
Via:Dead-simple lifestream badges - escaloop - FeedMyApp
- Webサイトコンテンツ増強テクニック―Webパーツ、RSS、Webサービスで手軽にパワーアップ
- 価格:¥ 2,205
- 平均評価:5.0
- 納期:通常24時間以内に発送
Amazon で詳細を見る by WEB担当者専門書店









