ホーム > web・PC > web制作 > JavascriptのみでRSSを表示するGoogle AJAX Feed API

JavascriptのみでRSSを表示するGoogle AJAX Feed API

2008年6月18日 11:50 | 個別ページ | コメント(0) | トラックバック(0)

RSSを表示する時にCGIやPHPだと導入できるパターンが多く、動かないサーバだと問題があったりします。
JavascriptのみでRSSを表示する「Google AJAX Feed API」というのがあり、これだと、どのサーバでも動作します。

Google AJAX Feed API への登録

Google AJAX Feed API への登録ページに行きます。
利用規約を読んだ上でこれに同意しますにチェックをします。
使用するウェブサイトの URLにURLを記入します。
APIキーを生成ボタンを押します。
生成されたキーが表示されます。
ぞえぞえねっとを登録した場合、下記のコードでした。
ABQIAAAA7_2e7OzfQnVgCZgpBhg3_RRuFDZRL6kVjV5uEtK0eNiWSesqyRQLz2Yqzy4YWkbEdJbTDPQHNS4Itg

サンプルコードも記載されているので、そのまま使うことができます。

日付とタイトルとタイトルにリンクをつけたサンプル

複数のサイトを参考にして日付とタイトルとタイトルにリンクがついたのを作成しました。

表示するためのソースコード

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA7_2e7OzfQnVgCZgpBhg3_RRuFDZRL6kVjV5uEtK0eNiWSesqyRQLz2Yqzy4YWkbEdJbTDPQHNS4Itg"></script>
<script type="text/javascript">

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

function initialize() {
var feed = new google.feeds.Feed("http://www.zoezoe.net/atom.xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var date = '<li>' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日 ";
container.innerHTML += "　" + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a></li>";
}
}
});
}

google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<ul>
<div id="feed"></div>
</ul>
</body>

表示サンプル

ぞえぞえねっとのRSSを取得して表示しています。

この記事に関連している、 web制作 で他の記事も見ることができます。

ブログランキングに参加しています。記事がよかったと思ったらクリックお願いします。
（他のいいブログも探すこともできます。）
ブログランキング・にほんブログ村へ 人気ブログランキングへ

↑このページのトップに戻る

トラックバック(0)

このブログ記事を参照しているブログ一覧: JavascriptのみでRSSを表示するGoogle AJAX Feed API

このブログ記事に対するトラックバックURL: http://www.zoezoe.net/manager/mt-tb.cgi/610

コメントする

↑このページのトップに戻る
文字サイズ変更： 大 小
421714 hit