zRSSFeed - by shigemk2

jQueryでRSSフィードを読み込むプラグインです。

使いかたは、公式のDownloadからzipファイルをダウンロードして、
RSS Feeds Reader Plugin for jQuery - Zazar Online Website Builder

以下のように書くだけ。(一例)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site feeds sample</title>
<!-- ファイルを読み込む -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="./index.xml" />
</head>
<script type="text/javascript">
 $(document).ready(function () {
    // このように使う
    $('div#media').rssfeed('http://langrich.com/news/media/feed', {
     limit: 10,
     date: false,
     header: false,
     content: false,
   });
 });
</script>
<body>
  <div id="media"></div>
</body>
</html>

limitが表示する記事数で、
date がfalseなら記事の投稿日時を表示せず、
content がfalseなら記事の中身を表示しない、など。

RSSフィードの読み込みに成功したなら、デフォルトでは
このようなHTMLが展開される。

<div id="test" class="rssFeed">
   <div class="rssHeader"><
     <a>... (heading) ...</a>
   </div>
   <div class="rssBody"></div>
     <ul>
       <li class="rssRow odd">
         <h4><a>... (title) ...</a></h4>
         <div>... (date) ...</div>
         <p>... (description) ...</p>
         <div class="rssMedia">
           <div>Media files</div>
           <ul>
             <li><a>... (media link) ...</a></li>
           </ul>
         </div>
       </li>
       <li class="rssRow even">...</li>
       ...
     </ul>
   </div>
 </div>

div のなかにul と liが展開されている構図だ。
難点として、展開されているulとliに属性をつけることが出来ないことだと思う。
細かいカスタマイズは無理っぽい。