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

スポンサードリンク

　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：Dead-simple lifestream badges - escaloop - FeedMyApp

Webサイトコンテンツ増強テクニック―Webパーツ、RSS、Webサービスで手軽にパワーアップ

Webサイトコンテンツ増強テクニック―Webパーツ、RSS、Webサービスで手軽にパワーアップ: 価格：￥ 2,205; 平均評価：5.0; 納期：通常24時間以内に発送; Amazon で詳細を見る by WEB担当者専門書店

》》》ほかの情報をリサーチ（ブログランキング）

スポンサードリンク

タグ： RSS , ブログパーツ

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

HOME

検索