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

    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

    参考書籍の紹介

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

Comments are closed.