最終更新日：2014年12月27日　作成日：2008年6月18日 | コメント(0)

ぞえぞえねっと > web制作 > JavascriptのみでRSSを表示するGoogle AJAX Feed API

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

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を取得して表示しています。

この記事が参考になったらSNSにお願いします。
この記事が属する「web制作」の情報を見る

コメントする


< グルメ：カフェ アンジュ（cafe Ange）（兵庫県加東市） 　 須藤 元気：風の谷のあの人と結婚する方法（2006/7） >
この記事が属する「web制作」の情報を見る
Copyright ぞえぞえねっと All rights reserved