サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」

2008 年 4 月 8 日 | コメントはありません。 | Posted in Ajax, クールなWEBサービス, 便利なWEBツール・サービス

2009年4月22日追記: 残念ながら、サービスが終了してしまったようです。同じようなサービスに複数のRSSをまとめてアコーディオンのように表示するブログパーツ「Splush」があります。

Ajaxで複数RSSをサクサク表示してくれる「escaloop」。GoogleのサービスにもGoogle AJAX Feed APIがありますが、排出されるコードが思わしくないのが難点。複数RSSをまとめてくれるブログパーツもありますが、総合的に見ると「escaloop」が今のところ一番かも。

シンプルな複数RSSまとめブログパーツ「escaloop」

Ajaxローダー特有の「グルグル」で読み込み始めてくれて、気持ち良さも感じます。余計な装飾がないのでサイトに融合しやすいのも肝かも。

「escaloop」で利用可能なサービス

下記サービスのRSSを読み込めるようです。

del.icio.us
Flickr
Google
Google Reader
LastFM
Livejournal
Magnolia
Pownce
StumbleUpon
Tumblr
Twitter
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をカスタマイズしたファイルの保存先を指定すればデザインをいじれるようです。

/*
escaloop badge: default.css
$Id: default.css 341 2008-02-07 09:16:55Z carlo_carlo $
*/

#escaloopList {
list-style-type: none;
padding-left: 0px;
margin-left: 0px;
}

#escaloopList LI {
list-style-type: none;
font-size: 10pt;
padding-left: 10px;
line-height: 125%;
}

#escaloopList LI.lst_date {
margin: 10px 10px 20px -10px;
font-weight: bold;
font-size: 13pt;
}

#escaloopList .item_date { color: gray; }

#escaloopList IMG {
border: 1px solid #999;
padding: 4px;
margin: 4px;
}

#escaloopList LI.lst_source {
margin: 40px 10px 15px -10px;
font-weight: bold;
font-size: 13pt;
}

#escaloopList .bullet_source {
background: url(http://escaloop.com/img/blog.png) left top no-repeat;
padding-left: 25px;
margin-bottom: 5px;
}

#escaloopList .bullet {
background: url(http://escaloop.com/img/blog.png) left top no-repeat;
padding-left: 25px;
margin-bottom: 20px;
}

#escaloopList .delicious { background: url(http://escaloop.com/img/delicious.png) left top no-repeat; }
#escaloopList .diggcom { background: url(http://escaloop.com/img/digg.png) left top no-repeat; }
#escaloopList .facebook { background: url(http://escaloop.com/img/facebook.png) left top no-repeat; }
#escaloopList .flickr { background: url(http://escaloop.com/img/flickr.png) left top no-repeat; }
#escaloopList .google { background: url(http://escaloop.com/img/google.png) left top no-repeat; }
#escaloopList .jaiku { background: url(http://escaloop.com/img/jaiku.png) left top no-repeat; }
#escaloopList .lastfm { background: url(http://escaloop.com/img/lastfm.png) left top no-repeat; }
#escaloopList .livejournal { background: url(http://escaloop.com/img/livejournal.png) left top no-repeat; }
#escaloopList .magnolia { background: url(http://escaloop.com/img/magnolia.png) left top no-repeat; }
#escaloopList .newsvinecom { background: url(http://escaloop.com/img/newsvine.png) left top no-repeat; }
#escaloopList .pownce { background: url(http://escaloop.com/img/pownce.png) left top no-repeat; }
#escaloopList .googlereader { background: url(http://escaloop.com/img/googlereader.png) left top no-repeat; }
#escaloopList .stumbleupon { background: url(http://escaloop.com/img/stumbleupon.png) left top no-repeat; }
#escaloopList .tumblr { background: url(http://escaloop.com/img/tumblr.png) left top no-repeat; }
#escaloopList .twitter { background: url(http://escaloop.com/img/twitter.png) left top no-repeat; }
#escaloopList .vimeocom { background: url(http://escaloop.com/img/vimeo.png) left top no-repeat; }
#escaloopList .vox { background: url(http://escaloop.com/img/vox.png) left top no-repeat; }

#escaloopContent DIV.lbe {
text-align: right;
}

　たった4行のコードを追加するだけで複数RSSを表示できてしまうのはなかなか嬉しいですよね。興味のある方はescaloop. ☆ Dead-simple lifestream badges.へどうぞ。

Via：delicious

ネットで5億稼ぐ! バカ売れサイト7つの法則−超衝撃SEO対策で検索エンジン市場を支配せよ!: 価格：￥ 1,575; 平均評価：4.5; 納期：在庫あり。; Amazon で詳細を見る by WEB担当者向けの書籍ランキング

スポンサードリンク

前の記事：超高機能な無料ストレージカンタンな画像加工や公開用ブログパーツ等を生成できる「FileQube」
次の記事：バージョンアップされたVirtual Earth 3Dがこれまたすごい
ジャンル： RSS, ブログパーツ, 複数RSS

この記事へのリンクURL
この記事へのリンクタグ: 表示サンプル：サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」 - WEBマーケティングブログ
この記事へのリンクタグ(その２): 表示サンプル：サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」(WEBマーケティングブログ)

この記事はAjax, クールなWEBサービス, 便利なWEBツール・サービスのカテゴリに属する記事です。この記事へのコメントを RSS 2.0 でフォローすることも出来ます。

サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」。Ajaxで複数RSSをサクサク表示…