アンテナサイトの作り方

ステップ1

Sign up for the Google AJAX Feed APIでAPI keyを取得する。

ステップ2

<head>~</head>内で以下のコードをコピペします。

<script type="text/javascript" src="http://www.google.com/jsapi?key=あなたのAPIキー"></script>
<script type="text/javascript"><!--// API本体の読み込みgoogle.load('feeds', '1');
// 初期化関数を定義
function feeds_init() {
// 読み込むfeed
var feed = new google.feeds.Feed('表示したいいサイトのRSS・フィード');
// 読み込み件数
feed.setNumEntries(5);
// 読み込んだfeedを加工する処理
feed.load(function(result) {
// エラーじゃないよね?
if (!result.error) {
// 結果を表示するエレメント
var container = document.getElementById('put_feed');
// 汎用変数textを初期化
var text = '';
// feedを処理するループ
for (var i = 0; i < result.feed.entries.length; i++) {
// entryに1件取り出す
var entry = result.feed.entries[i];
// feedのlink及びtitle属性のデータをHTMLに整形しつつtext変数に加える
text += '<li><a href="' + entry.link + '">' + entry.title + '</a></li>';
}
// ULタグで囲んでエレメントに出力
container.innerHTML = '<ul>' + text + '</ul>';
}
});
}
// 関数をイベントハンドラとして登録
google.setOnLoadCallback(feeds_init);
//-->
</script>

ステップ3

<body>~</body>内で表示したい位置に以下のコードをコピペするとアンテナサイトの出来あがり!

<div id="put_feed" class="example"></div>

簡単でしょ?

公式ドキュメントは以下を参照。
Google AJAX Feed API Developer Guide
Google AJAX Feed API Class Reference

参考書籍