読者です 読者をやめる 読者になる 読者になる

主に技術的なことを書くブログ

あくまでもデザイナーという方向で技術的なことをメモしていましたが、ざっくばらんに書くことにします。

Google AJAX Feed API を使ってRSSリストをページに表示させる。

JavaScript

MTとかワードプレスとかはそういうプラグインがありそうですが、普通の静的なページにRSSからの更新情報などを表示させたいときは、Google AJAX Feed APIというやつを使えば手っ取り早いみたいです。

表示方法はいくつかあるみたいで、XMLとかでも吐き出せるみたいですが、今回は、2つのブログ的なものの更新を1ページに表示させたかったので、FeedControlのデモを使ってみました。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://RSSフィードのURL1", "RSSのタイトル1(HTMLタグも使える)");
feedControl.addFeed("http://RSSフィードのURL2", "RSSのタイトル2(HTMLタグも使える)");
/* 5件まで表示 */
feedControl.setNumEntries(5);
/* id="feedControl"のブロック要素に表示される */
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>


上記をヘッダでもどこでもいいので追加して、表示したいところに、

<div id="feedControl"></div>


というブロック要素を配置すれば、最近の更新5件のフィードが表示されます。

でも、デフォルトの状態では、否応なしに、概要文とかが表示されてしまうので、そういうの消せへんのかなぁ、と思って軽く調べてみましたが、CSSで display: none;して消すしかないみたいです。わりと無駄にクラスがついてるので、CSSだけでも相当いじれました。

ひとつのRSSしか読み込まない場合はけっこうカスタマイズできるみたいですが、僕には情熱がなかったのと、それで良い感じだったので、それでいきました。