【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Google Feed APIでECサイトにブログのRSSを表示する方法

Google Feed APIでECサイトにブログのRSSを表示する方法

最近では、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>

終わりに

以上で完了です。

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+