RSSフィードをサイト内に読み込ませることができるjQueryプラグイン「zRSSFeed」

こんなプラグインが欲しかったと思わせる素晴らしいjQueryプラグインzRSSFeedの紹介です。

zRSSFeedは、RSSフィードをサイト内に読み込ませることができるjQueryプラグインです。

設置方法は非常に簡単です。必要ファイルをzRSSFeedのサイトよりダウンロードして下記のようにhead要素の範囲以内に設置します。

zRSSFeedのサイトでは、jQuery1.4.2で記してますが1.4.3でも動作します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

フィードを表示させたい箇所に下記のようにdiv要素なりを設置します。

<div id="rssFeed"><div>

そしてプラグインを動作させるために記述をhead要素の範囲以内に下記のように記述します。

<script type="text/javascript">
$(document).ready(function () {
  $('#rssFeed').rssfeed('フィードのURL', {
    limit: 5
  });
});
</script>

『rssfeed('フィードのURL', {』の箇所に表示させたいRSSフィードのURLを記述し、「limit: 5」はデフォルトの値ですが、5項目表示となりますので、6項目以上表示させたい、もしくはそれ以下の場合はこの数字を変更するとその数字の項目分が表示されます。

また、CSSでのデザインは、生成されるHTMLなどは、下記のようになりますので、h4要素やrssRowなどをセレクタにしてデザインしてください

<div class="rssBody">
<ul>
<li class="rssRow odd">
<h4><a href="記事のURL">記事のタイトル</a></h4>

<div>日付</div>
<p>記事の内容の最初の数文字</p></li>

<li class="rssRow even">
<h4><a href="記事のURL">記事のタイトル</a></h4>
<div>日付</div>
<p>記事の内容の最初の数文字</p></li>

・
・
・

</ul></div>

ちなみに、下記図は当ブログのフィードを読み込ませた場合の例です。