RSSフィードを自分のサイトに表示させる方法

RSSフィードを取得して、自分のサイトで表示させる場合、サーバ側でフィードを取得して表示させるというようなスクリプトを組む必要があるのだが、どうも面倒なので、なにか方法がないかと調べたところGoogle Feed APIというのを見つけました。

Google Feed APIのよいところは、ページにJavascriptを数行書くだけでOKというところ。APIキーといったのも不要なのが良い感じ。

で、使い方は、
https://developers.google.com/feed/v1/devguide?hl=ja
にあるとおりなんだけど、簡単に書くと、headタグの間に

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
 var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
 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 div = document.createElement("div");
   div.appendChild(document.createTextNode(entry.title));
   container.appendChild(div);
  }
 }
 });
}
google.setOnLoadCallback(initialize);
</script>

というタグを書き、フィードを表示したい場所に

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

を書くだけ。
(タグ中のhttp://fastpshb.appspot.com/feed/1/fastpshbはフィードのURLにする必要があります)

ただ、これだと、タイトルにリンクがつかないので

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");

function initialize() { var feed = new google.feeds.Feed("http://choice-site.com/feed/"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("google_feed"); var ul=document.createElement("ul"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; var list = entry.title; a.appendChild(document.createTextNode(list)); div.appendChild(a); ul.appendChild(div); } container.appendChild(ul); } }); } google.setOnLoadCallback(initialize); </script>

のような感じにするとよいです。(ulタグも追加しました)
あと、

var feed = new google.feeds.Feed("http://choice-site.com/feed/");

の後に

feed.setNumEntries(10);

を追加すると表示件数を10件にすることができます。

なお設置サンプルはこちらにあります。

投稿日:
カテゴリー: tips タグ: