jQueryでアメブロのRSSを読み込み、ホームページに表示（zRSSFeed）

当方では、ホームページとアメーバブログを連携させたサービスを提供しております。
そのお仕事の中で、アメブロの記事のリストをホームページのトップページに表示させるのですが、当方が利用している術を紹介致します。
色々と導入方法はあるのですが、一番使いやすいツールとして、zRSSFeedというjQueryのプラグインを紹介します。

導入方法

必要ファイルをzRSSFeedのサイトよりダウンロードして、ホームページ内HTMLのhead要素の範囲内に設置して下さい。
RSS Feeds Reader Plugin for jQuery

<script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery.zrssfeed.min.js" type="text/javascript"></script>

続けて以下のように記述します。

<script type="text/javascript"> $(document).ready(function () {   $('.ameblo').rssfeed('任意のRSS URL', {     limit: 6   }); }); </script>

「limit: 6」が表示する記事数なので、数字を任意に変更して下さい。

<script type="text/javascript"> $(document).ready(function () {   $('.ameblo').rssfeed('任意のRSS URL', {     limit: 6,     header: false,     titletag: 'span',     content: false  }); }); </script>

上記は、タイトルと日付のみが表示されます。

オプションについて詳しくはRSS Feeds Reader Plugin for jQueryページを確認してください。
CSSは下記になります（任意で変更して下さい）。

.ameblo {
clear:both;
margin: 0;
padding: 0;
width: 226px;
overflow:hidden;
}
.rssBody ul {
margin: 0px;
padding: 0px;
}
.rssBody ul li{
margin: 0 0 8px 0;
padding: 0 4px 8px 4px;
border-bottom: dotted 1px #CCCCCC;
list-style:none;
width:218px;
overflow:hidden;
}
.rssRow { padding: 0px; }
.rssRow div {
float:left;
width:226px;
}

勿論、アメブロ以外にも他のブログサービスやホームページのRSSを読み込めますのでお試しください。
♪ 合わせて読む
アメブロのRSSのPRを消す方法！