最近では、ECサイトの新規ユーザーの獲得やリピーターの増加を目的に、WordPress等を使ってオウンドメディアを運営するECサイトも増えてきました。その際、トップページなどにWordPressのRSSを表示させたいときってありますよね。

そんなときに役立つのが『Google Feed API』です。

非常に簡単に、RSSをjavascriptで取得し新着記事をトップページなどに表示させることができます。

ステップ1：head内の記述

記事を表示させたいページのhead内に以下のコードを記述します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/*
 * Read RSS Feed Plugin
 * via Google Feed Control 
 *============================*/  
google.load("feeds", "1");
var FA = new Array( //配列です。以下に、取得したいRSSフィードを書きます。
 "フィードのURL"
);
function initialize() {
 var feedsArr = new Array();
 var numEntr = 8; 
 var container = document.getElementById("feed");
 var cnt = FA.length;
 for (var k=0; k<FA.length; k++) {
  var feed = new google.feeds.Feed(FA[k]);
  feed.setNumEntries(numEntr);
  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); 
  feed.load(function(result) {
  if (!result.error) {
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var eimg = "";
    var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); //データを取得する拡張子を指定
    if(imgCheck){
     eimg += imgCheck[0]; //配列の1番目に格納されたデータを取得（つまり、1枚目の画像を取得）
    } else {
     eimg += ''; //画像が取得できなかった場合の代替画像のURLを指定
 }
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
 var ind = feedsArr.length;
 feedsArr[ind] = new Array();
 feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付でソート（並び替え）
 feedsArr[ind][1] = entry[attributes[1]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][5] = result.feed.title; // site title
 feedsArr[ind][6] = eimg; // thumbnail
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h4 = document.createElement("H4");
 var li = document.createElement("li");
 aE.href=aE.title=feedsArr[j][1]; // リンク
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] ); // サムネイル画像
 img_link.setAttribute("width", "150" ); 
 img_link.setAttribute("height", "150" ); 
 aE.appendChild(img_link); //img（画像）タグを出力
 h4.appendChild(document.createTextNode(feedsArr[j][4])); // 記事タイトル
 li.appendChild(aE);
 aE.appendChild(h4);
 container.appendChild(li);
 aE.setAttribute("class", "btn-img" ); 
 li.setAttribute("class", "grid-span6 grid-col list-holizontal" ); 
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);
</script>

ステップ2：HTMLの記述

ページ上のRSSを表示させたい場所に以下を記述します。

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

終わりに

以上で完了です。

サムネイル画像のサイズや、タイトルの記載方法など独自でアレンジしてご利用ください。