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で調整しやすいように適当にいじってお使いくださいませ。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。フリーランス歴15年。プランナー、デザイナー。加藤康祐企画設計代表。学生時代にデザイン会社でWebデザインを経験。2005年よりフリーランスとしてキャリアスタート。これまでに個人から上場企業まで、100以上のクライアントとのプロジェクトを経験。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの編集・運営、社会的養護の子どもたちの自立を支援するNPOのサポート等。趣味はラグビーと料理。Keep the head up, Bind tight & Stay low.

加藤康祐企画設計

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