2009/7/23

Google Ajax Feed APIでブログの新着記事を表示する

Google Feed APIというのが便利でして、以前、「Google AJAX Feed APIも試してみた」という記事も書きましたが、外部サイトのRSSを取って来て、表示用に整形できます。今回は日付の日本語化も含めたやり方がわかったのでメモメモ。

google.load("feeds", "1");

function initialize() {
var feedurl = "http://feedproxy.google.com/jp/et";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(3);
feed.load(dispfeed);

function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
htmlstr += ‘<dl>’;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var date = new Date(entry.publishedDate);
htmlstr += "<dt class=’date’>" + date.toLocaleString() + "</dt><dt class=’title’><a href=’" + entry.link + "’>" + entry.title + "</a></dt><dd>"+entry.contentSnippet+"</dd>";
}
htmlstr += "</dl>";

container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}

google.setOnLoadCallback(initialize);

こちらを参考にしました。toLocaleStringってのを使ってやると便利ですね。
Google AJAX Feed APIでRSSフィードの日付も表示

HTMLの生成の辺りは、CSSで調整しやすいように適当にいじってお使いくださいませ。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円