読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

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

API Feed Google JavaScript
Sponsored Links

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で調整。

以上です。

稼ぐ言葉の法則――「新・PASONAの法則」と売れる公式41

稼ぐ言葉の法則――「新・PASONAの法則」と売れる公式41