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

2008年4月8日 | 0 | カテゴリ 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マーケティングブログ)

検索

RSS購読ツール

メニュー

Loading...
カテゴリー

Loading...
- WEBマーケティングブログの日記
  1. かしこいUSBポートの使い方ができる「Infinite USB」 2010年 4月 3日
    ネットブックやタブレットPCなど、USBポートが少ないデバイスに役立ちそ�. […]
  2. 新卒採用の会社説明会で座談会を行いました 2010年 3月 17日
    車のディーラーからベンチャー企業に転職し、独立、そして新たなベンチ�. […]
  3. ノート２冊をまとめて使えるコクヨのSYSTEMIC［システミック］が使える件 2010年 2月 24日
    最近は、仕事の効率化を図るために、情報を集約する母艦ノート、スキマ�. […]
- 市場調査データ検索データベース
  1. 米スマートフォン Androidの伸びがすごい 2010年 6月 19日
    Insight for WebAnalytics: 米スマートフォン、携帯市場シェアの2割を突破スマー. […]
  2. 世界のインターネット利用者の82％がGoogleを利用 2010年 6月 19日
    Insight for WebAnalytics: 世界のインターネット利用者の82％がGoogleを利用この�. […]
  3. Twitterを運営している企業は4%、アクセス解析する気もない企業が1割超 2010年 6月 19日
    Insight for WebAnalytics: Twitterを運営している企業は4%、アクセス解析する気も�. […]

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