Webデザインの記事一覧3 « | AirNX 開発者ブログ

スローライフな旅 AirNX »
開発者ブログ »
Webデザインの記事一覧3

Google AJAX Feed APIでブログの更新情報を表示

複数のブログを運営していると「他のブログの更新情報をメインのブログに表示したい」という場合があります。MovableTypeで複数のブログを運営しているのなら以前紹介した方法を使えば良いのですが、他のブログがレンタルブログだったりWordPressだった場合、そうはいきません。

そこでGoogle AJAX Feed APIの登場です。
これでサイトに他のブログの更新情報を表示します。
表示例（shinとkiyoのサイトの更新情報部分）

まずGoogleのアカウントを取得しログイン済みの状態でサインアップ用のサイトにアクセスします。このサイトで、APIキーを取得して下さい。

続いて取得したAPIキーを<head>〜</head>内に読み込みます。

テキストエディタ等で下記をコピペ後feed.jsとして保存。
FTPソフトでサーバーにアップロードします。

var urls = new Array("表示したいブログのRSS1",
"表示したいブログのRSS2（カンマで区切って増やせます）");

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

function initialize() {
var container = document.getElementById("google-feed");

for (var n = 0; n < urls.length;n++ ) {
var feed = new google.feeds.Feed(urls[n]);
feed.setNumEntries(1);

feed.load(function(result) {
if (!result.error) {

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
container.innerHTML += "<ul><li><a href='" + entry.link + "'>" + result.feed.title + " - " + entry.title + " (" +　changeDate(entry.publishedDate) + ")"　+ "<\/a><\/li><\/ul>";
}
}
});
}

}

//日付表記を変換
function changeDate(str){
var myDate=new Date(str);

var MM=myDate.getMonth()+1;
if(MM<10){MM="0"+MM;}
var DD=myDate.getDate();
if(DD<10){DD="0"+DD;}
var date=MM+"/"+DD;
return date;
}

google.setOnLoadCallback(initialize);