複数のRSSフィードをまとめて日付順に表示する方法 「Google Feed API」利用

11月 30th, 2011 by berry | Filed under RSSフィード.

wordpressの更新情報をwordpressでないページに一覧表示、
その他ブログサービスの更新情報を一覧表示する方法は「Google Feed API」の利用がおすすめです。

RSSフィードを登録するだけで簡単に一覧表示のコードを生成してくれるサービスもあるのですが、カスタマイズ性が低く、また広告入りになったりするので非常に使いづらいものでした。
「Google Feed API」はカスタマイズ性が高く、広告も表示されません。また、phpなどの特別なファイルを用意しなくてもhtmlファイル内で扱うことができるのが利点です。

「Google Feed API」を利用するには、まず「APIキー」を取得する必要があります。取得は簡単で1分でできます。

次のサイトに行き、「sign up for a API key」をクリックします。
http://code.google.com/intl/ja/apis/ajaxfeeds/

サイトのURLを入れろと言ってきますので、自分のサイトのURLを入れます。

 API keyが表示されます。これで取得完了です。

次はhtmlにコードを記載します。
<head></head>内または直接<body></body>内に以下のスクリプトを入力します。

<script type=”text/javascript” src=”http://www.google.com/jsapi?key=取得したAPIキー“></script>
<script type=”text/javascript”>
<!–//
google.load(“feeds”, “1″);
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd(“フィードURL“, 3);
feedAdd(“フィードURL“, 2);
feedAdd(“フィードURL“, 1);
}//フィードURLを増やすごとに4、5、6と数値も増やす
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//1つのフィードごとに取得したい記事数を入れる
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput(“feed”, 100);
}
});
}function feedOutput(feedId, listNum){
var container = document.getElementById(feedId);
entryArray = asort(entryArray, “sortDate”);
if(listNum > entryNum){ //修正箇所
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var eTitle = entry.title;
var eCont = entry.contentSnippet.substring(0, 50);
var eLink = entry.link;
var eimg = “”;
var wrap = document.createElement(“ul”);
wrap.innerHTML = eimg + ‘<li><span>’ + date.getFullYear() + ‘年’ + (date.getMonth() + 1 ) + ‘月’ + date.getDate() + ‘日</span><a href=”‘ + eLink + ‘” target=”_blank”>’ + eTitle + ‘</a>(’ + entry.blogName + ‘)</li>’;
container.appendChild(wrap);
}
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}google.setOnLoadCallback(initialize);
//–>
</script>

最後に<body></body>内に

<div id=”feed”></div>

を記載

うまく動作すればこれで「日付」「記事タイトル」「ブログタイトル」の順でリスト表示されると思います。<li>にクラスをつけたり、#feed要素にスタイルを記述するなどして見た目をカスタマイズできます。

コードは以下のサイト様を参考にさせていただきました。
Google AJAX Feed API で複数のブログからフィードを取得して、しかも日付順に並び替えるコード


Leave a Reply