▲PAGE TOP

複数のRSSを新しい順に並べて表示する方法

複数のRSSを読み込んで吐き出すコードです。

参照元>簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】

実際に使用しているページ> 0102030405.comアフィリエイトシステム内にあるアフィリエイトニュースニュース(見るにはログインする必要があります: インラインフレーム内のHTML )

サンプルコード 
<script type="text/javascript" src="http://www.hans-huber.com/0102030405/java/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

// 初期設定
var disp_entry_count = 10;       //表示させたい記事の数

// RSS URL
var site = new Array();

site[0] = {
    title:'ブログ',
    url:'http://blog-jp.0102030405.com/feeds/posts/default/-/アフィリエイトシステム',
    disp_entry:5        // 取得する記事の数
};

site[1] = {
    title:'よくある質問',
    url:'http://faq-jp.0102030405.com/feeds/posts/default/-/アフィリエイトシステム',
    disp_entry:5        // 取得する記事の数
};

var channel = new Array();
var entry = new Array();
var entries = new Array();
var Feed = "";

google.load("feeds", "1");
function init() {
   
    var site_count = 0;
   
    for (var i=0; i<site.length; i++){
   
        // 読み込むRSSを設定
        var feed = new google.feeds.Feed(site[i]['url']);
        feed.setNumEntries(site[i]['disp_entry'])
        feed.load(function(rss) {
            if (!rss.error) {
               
                // RSSからサイトの情報を配列に格納
                channel['title'] = rss.feed.title;
                channel['link'] = rss.feed.link;
                channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];
                channel['description'] = rss.feed.description;
                channel['author'] = rss.feed.author;

                // RSSから記事の情報を配列に格納
                for (var j=0; j<rss.feed.entries.length; j++){
                   
                    var feed_entry = rss.feed.entries[j];
                    var entry = {
                        site_title : channel['title'],
                        site_link : channel['link'],
                        site_favicon : channel['favicon'],
                        title : feed_entry.title,
                        link : feed_entry.link,
                        content : feed_entry.content,
                        contentSnippet : feed_entry.contentSnippet,
                        publishedDate : feed_entry.publishedDate
                    };
                   
                    var date = new Date(entry['publishedDate']);
                    entry['time'] = date.getTime();
                    var yy = date.getYear();
                    var mm = date.getMonth() + 1;
                    var dd = date.getDate();
                    if (yy < 2000) { yy += 1900; }
                    if (mm < 10) { mm = "0" + mm; }
                    if (dd < 10) { dd = "0" + dd; }
                    entry['date'] = yy + "年" + mm + "月" + dd + "日";
                   
                    entry['img'] = entry['content'].match(/src="(.*?)"/igm);
                   
                    if (entry['img'] != null) {
                        for (var k=0; k<entry['img'].length; k++){
                            entry['img'][k] = entry['img'][k].replace(/src=/ig, "");
                            entry['img'][k] = entry['img'][k].replace(/"/ig, "");
                        }
                    }
                    entries.push(entry);
                }
            }
            site_count++;
            if (site.length == site_count){ disp(); }
        });
    }
}
   
function disp() {

    //日付順に並べ替え
    entries.sort (function (b1, b2) { return b1.time < b2.time ? 1 : -1; } );
   
    // 記事をhtmlに整形
    for (var l=0; l<disp_entry_count; l++){
        if (entries.length < l+1){ break; }
       
        if (entries[l]['img'] != null) { Feed += ''; }
        Feed += ''
                    + '<img src="http://www.hans-huber.com/0102030405/afsystem/templates/images/check.gif"><a href="'+ entries[l]['link'] + '" target="_blank">' + entries[l]['title'] + '</a>'
                    + '<br><img src="http://www.hans-huber.com/0102030405/afsystem/templates/images/space.gif">' + entries[l]['contentSnippet'].substr(0, 50) + '……<hr size=1 color=#e6e6e6>';
    }
    // 表示するタグに追加
    $('#topics').append( Feed );
}

google.setOnLoadCallback(init);

</script>
<!-- RSSを表示するタグ -->
<div id="topics"></div>


▼HMTLに整形する部分のオリジナル・バージョン
 // 記事をhtmlに整形
    for (var l=0; l<disp_entry_count; l++){
        if (entries.length < l+1){ break; }
       
        if (entries[l]['img'] != null) { Feed += '<div style="width: 105px ; float: left ;">
<a href="' + entries[l]['site_link'] + '"><img width="100px" height="75px" src="' + entries[l]['img'][0] + '"></a></div>'; }
        Feed += '<div style="width: 195px ; float: right ;"><img src="' + entries[l]['site_favicon'] + '">'
                    + '<a href="' + entries[l]['site_link'] + '">' + entries[l]['site_title'] + '</a><br/>'
                    + entries[l]['date']
                    + '<br/>'
                    + '<a href="'+ entries[l]['link'] + '">' + entries[l]['title'] + '</a>'
                    + '<p>contentSnippet:' + entries[l]['contentSnippet'].substr(0, 100) + '……</p></div><div style="clear:left;"></div><hr style="border:none;border-top:dotted 1px #888888;height:1px;color:#FFFFFF">';
    }





COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)