RSS feed を JavaScript で HTML に埋め込む | 有限会社ファーストネット

RSS feed を利用すると、自分のウェブサイトに、お気に入りの Blog サイトの更新情報などを表示することができます。例えば、サイト間でのリンクを動的に生成することができます。通常 Blog サイト側のプロキシ処理が必要ですが、”Google Ajax Feeds API“を使うと簡単に RSS feed をウェブサイトに統合できます。

以下の通り、極めて簡単に実現できます。
Googleアカウントでログイン。Google AJAX Feed API への登録から、RSSを表示させたいサイトのURLを入力し「APIキーを生成」ボタンをクリックします。

APIキーが生成されサンプルウェブページが表示されます。これを自分のサイトのに埋め込めばとりあえずエントリタイトルが表示されます。

Ajaxの学習ならAjaxTower を参考に目的の仕様を作りあげました。
【仕様】
・エントリの表題を表示する
・そのエントリの表題をクリックするとエントリ本文を表示する
・表示するエントリの表題は3件
・キャッシュの強制書き換え（キャッシュ騙し）を行う

<head>～</head>の間で、JavaScriptを読み込みます。以下です。

&lt;script type="text/javascript" src="http://www.google.com
/jsapi?key=APIキー"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="./feed_api.js"&gt;&lt;/script&gt;

/jsapi?key=APIキー"></script>

そして、～で、外部RSSを表示したい箇所に以下を挿入します。

&lt;div id="feed"&gt;&lt;/div&gt;

1	<div id="feed"></div>

feed_api.jsのソースコード

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

function initialize() {

  var feedurl = "RSS feed の URL" + (new Date()).getTime();
  var feed = new google.feeds.Feed(feedurl);
  feed.setNumEntries(3);
  feed.load(dispfeed);

  function dispfeed(result){
    if (!result.error){
      var container = document.getElementById("feed");
      var htmlstr = "";

      for (var i = 0; i &lt; result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];

        htmlstr += 
'&lt;h3&gt;・&lt;a href="' + entry.link + '"&gt;' + entry.title + '&lt;/a&gt;&lt;/h3&gt;';
      }

       container.innerHTML = htmlstr;
    }else{
       alert(result.error.code + ":" + result.error.message);
    }
  }

}
google.setOnLoadCallback(initialize);

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

function initialize() {

var feedurl = "RSS feed の URL" + (new Date()).getTime();

var feed = new google.feeds.Feed(feedurl);

feed.setNumEntries(3);

feed.load(dispfeed);

function dispfeed(result){

if (!result.error){

var container = document.getElementById("feed");

var htmlstr = "";

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

htmlstr +=

'<h3>・<a href="' + entry.link + '">' + entry.title + '</a></h3>';

}

container.innerHTML = htmlstr;

}else{

alert(result.error.code + ":" + result.error.message);

}

google.setOnLoadCallback(initialize);

これでイケました。