Google Feed APIでブログのRSSフィードをWebサイトに表示する

 in Google / Google Libraries API by

Google Feed APIを利用すると 簡単にRSSを表示することができます

Google Feed APIって何ができるの?

さまざまなブログツールで利用されているRSS/Atomフィードを簡単に表示できます
ほかにもPicasaやGoogle Buzzの情報も表示することが可能です

スクリプトの記述

Google Ajax Libraries APIの利用

<script type="text/javascript" src="http://www.google.com/jsapi/"></script>
必要なライブラリ(feeds)をダウンロード

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

google.loadでライブラリを利用すると 非同期で読み込まれるため
ライブラリの読み込み完了したら 関数を実行するように「google.setOnLoadCallback」を利用する


google.setOnLoadCallback(function(){

  getFeed();

}); //google.setOnLoadCallback
Feedを読み込むスクリプト

今回「http://googlejapan.blogspot.com/atom.xml」を読み込みます


function getFeed(){
  var feed = new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");
  feed.setNumEntries(5);
  feed.load(callback);
}

function callback(result){
  if (result.error){
    alert(reault.error.message);
  }
  var res = "";
  var len = result.feed.entries.length;
  for (var i = 0;i < len;i++){
    var entry = result.feed.entries[i];
    var title = entry.title;
    var date = entry.publishedDate;
    var content = entry.contentSnippet;
    res += "<p><b>" + title + "</b></p>";
    res += "<div>" + date + "</div>";
    res += content + "<hr />";
  }
  var panel = document.getElementById("feed_panel");
  panel.innerHTML = res;
}

こんな感じで 読み込んだfeedをidが「feed_panel」の要素の中に表示させることができます
htmlには


<div id="feed_panel"></div>

と記述するだけです

サンプルコード


<html>
<head>
・
・
・
<script type="text/javascript" src="http://www.google.com/jsapi/"></script>
<script type="text/javascript">
google.load("feeds","1");
google.setOnLoadCallback(function(){
 getFeed();
}); //google.setOnLoadCallback
function getFeed(){
   var feed = new google.feeds.Feed("http://googlejapan.blogspot.com/atom.xml");
   feed.setNumEntries(5);
   feed.load(callback);
 }
  function callback(result){
   if (result.error){
     alert(reault.error.message);
   }
   var res = "";
   var len = result.feed.entries.length;
   for (var i = 0;i < len;i++){
     var entry = result.feed.entries[i];
     var title = entry.title;
     var date = entry.publishedDate;
     var content = entry.contentSnippet;
     res += "<p><b>" + title + "</b></p>";
     res += "<div>" + date + "</div>";
     res += content + "<hr />";
   }
   var panel = document.getElementById("feed_panel");
   panel.innerHTML = res;
 }
</script>
</head>
<body>
<div id="feed_panel"></div>
</body>
</html>

出力サンプル

jQueryも利用したスクリプト部分のサンプルコード


<html>
<head>
・
・
・
<script type="text/javascript" src="http://www.google.com/jsapi/"></script>
<script type="text/javascript">
google.load("jquery","1");
google.load("feeds","1");
google.setOnLoadCallback(function(){
  var feed = new google.feeds.Feed("http://feedblog.ameba.jp/rss/ameblo/prostaff1/rss20.xml");
  feed.setNumEntries(10);
  feed.load(function(result){
    $.each(result.feed.entries,function(){
      $("#feed_panel").append("<p><b>" + this.title + "</b></p>" + "<div>" + this.publishedDate + "</div>" + this.contentSnippet + "<hr />");
    });
  });
}); //google.setOnLoadCallback
</script>
</head>
<body>
<div id="feed_panel"></div>
</body>
</html>

jQueryも利用した出力サンプル

参考ページ

THE HAM MEDIA BLOG

参考書籍の紹介

この本にもっと詳しいサンプルデータが掲載されています