Google Feed APIを使ってFeedを取得する

Google Feed APIを使ってFeedを取得。記事内にある本文（文字数を指定してまるめて）と最初の画像だけを表示する例。

外部jsファイルを以下の内容で作成。

feedBlog.js

// APIを読み込む
google.load("feeds", "1");


// 初期関数
function initialize(){


 // Feed URLを指定 
 var feed = new google.feeds.Feed("http://Feed URL");


 //読み込む件数を設定
 feed.setNumEntries(3);
 feed.load(dispfeed);


 //フィードを読み込む
 function dispfeed(result){


  //エラーチェック
  if(!result.error){


   //表示する要素を設定
   var container = document.getElementById("feed_blog");
   var htmlstr = "";
   htmlstr += '<div id="feed">';
   for (var i = 0; i < result.feed.entries.length; i++) {


    var entry = result.feed.entries[i];
    var eimg = "";
    var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.jpg)|(\.JPG))/);
    if(imgCheck){
     eimg += '<img ' + imgCheck[0] + '" width="148" >'; // img要素のサイズはここで
    }


    htmlstr += '<div class="post clearfix">';
    htmlstr += eimg;
    htmlstr += '<div class="bodyPost">' + '<h3 class="title"><a href="' + entry.link + '">' + entry.title + '</a></h4>' + entry.contentSnippet.substring(0, 100)+' ... &gt;&gt; <a href="' + entry.link + '">続きを読む</a>' +'</div></div>';


   }
   htmlstr += '</div">';


   container.innerHTML = htmlstr;
   var elems = container.getElementsByTagName('a'); // containerに含まれるa要素
   for (var j = 0, l = elems.length; j < l; j++) {
    elems[j].target = '_blank'; // targetに'_blank'を設定
   }
  }
 }
}
google.setOnLoadCallback(initialize);

Feedを表示するhtml内に以下を記述。

<script src="https://www.google.com/jsapi"></script><!-- Google Feed APIを読み込む -->
<script src="js/feedBlog.js"></script><!-- Feedを読み込むための設定ファイル -->

取得したFeedを表示させたい場所に以下を記述。

<div id="feed_blog"></div>

パースした内容の外観（レイアウトや装飾的なデザイン等）はCSSで調整。

以上です。

Web API: The Good Parts