お客様の声レビューを自社HPに追加する簡単な方法【更新ラク】

Amazon、Yahooショッピング、楽天、Googleマイビジネス、BASE、STORESとか色んなモールにお客様の声があるけど、それを自社HPにも貼り付けたいな。なんか簡単な方法ないかな。

そんな疑問にお答えします。

本記事の内容

お客様の声（レビュー）をGoogleスプレッドシートを利用して管理する方法がわかる
管理したものがHPに即反映されるコードがわかる

サイト運営をしていると、各楽天・Amazon・YahooショッピングのモールやGoogleマイビジネスや食べログのプラットフォームに、レビューが溜まっていくことがありますよね。また自社サイトには、意外と書くことがなくなってくるのもあります。そんなときは、お客様レビューを自社サイトにどんどん追加していきましょう。

今回の提案は、他のサイトに溜まっているレビューを、自社サイトに移転させていこうということです。

どのような形になるか、早速サンプル見てください。①Googleスプレッドシートにレビューを移動させていきます。
1. Googleスプレッドシートでのレビュー内容管理画面

>>>お客様レビューのスプレッドシートはこちら
上記で登録されている内容は、下記のデザインでサイトに表示されます。
2. サイトでの表示イメージ

楽天で肉のお店を開いている感じです。↓↓↓

お客様レビューをスプレッドシートで管理する仕組み

改めてこうしてサイトへ表示する仕組みを解説します。
①まず、レビューをスプレッドシートに書き写します。
②次に、スプレッドシートを外部から読みだせるAPI化します。
③jQueryを利用して②のAPIを読み出してレビューを表示します。

実際に表示するまでの手順

1. JavaScriptのコードをアップロード
>>>ここからコードダウンロードしてください

jQuery(function($){   
    function return_data(){
    var result = $.ajax({
        type: 'GET',
        url: 'https://script.google.com/macros/s/AKfycbwLFkPi5j7J1Nr82KLHRAr50EzTypGzr-dQ6UHg0YIe13JQoaQ/exec?action=nullpo',
        datatype: 'jsonp',
        jsonp: 'callback',
        async: false        
    }).responseText;
    return result;
    }
    var result_sozai = return_data();
    var result = $.parseJSON(result_sozai);
    //console.log(typeof result);
    
    var str = '';
    for (var i=1; i<result["response"].length; i++){  
    var child = '<div class="box11"><div class="row">'+
    '<div class="col-sm-3">'+
    '<img src="'+result["response"][i][3]+'">'+
    '</div>'+
    '<div class="col-sm-9">'+  
    '<h4>'+ result["response"][i][1] +'</h4>'+
    '<p><span class="box-price">'+ result["response"][i][2] +'</span>　<span class="box-tax">税込、送料込</span></p>'+
    '<p>評価：<span class="box-review">'+ result["response"][i][10] +'</span></p>'+
    '<p>'+ result["response"][i][5] +'様<span class="box-other">（'+result["response"][i][8]+result["response"][i][9]+'・'+result["response"][i][6]+'・'+result["response"][i][7]+'）　'+result["response"][i][0].substr(0,10)+'</span></p>'+
    '<p>'+result["response"][i][11]+'</p><br>'+
    '<a href="'+result["response"][i][4]+'">>>>商品詳細ページへ</a>'+
    '</div>'+
    '</div>'+        
    '</div>';
    str += child;
    }
    $('.box11-parent').html(str);
});

jQuery(function($){

function return_data(){

var result = $.ajax({

type: 'GET',

url: 'https://script.google.com/macros/s/AKfycbwLFkPi5j7J1Nr82KLHRAr50EzTypGzr-dQ6UHg0YIe13JQoaQ/exec?action=nullpo',

datatype: 'jsonp',

jsonp: 'callback',

async: false

}).responseText;

return result;

}

var result_sozai = return_data();

var result = $.parseJSON(result_sozai);

//console.log(typeof result);

var str = '';

for (var i=1; i<result["response"].length; i++){

var child = '<div class="box11"><div class="row">'+

'<div class="col-sm-3">'+

'<img src="'+result["response"][i][3]+'">'+

'</div>'+

'<div class="col-sm-9">'+

'<h4>'+ result["response"][i][1] +'</h4>'+

'<p><span class="box-price">'+ result["response"][i][2] +'</span>　<span class="box-tax">税込、送料込</span></p>'+

'<p>評価：<span class="box-review">'+ result["response"][i][10] +'</span></p>'+

'<p>'+ result["response"][i][5] +'様<span class="box-other">（'+result["response"][i][8]+result["response"][i][9]+'・'+result["response"][i][6]+'・'+result["response"][i][7]+'）　'+result["response"][i][0].substr(0,10)+'</span></p>'+

'<p>'+result["response"][i][11]+'</p><br>'+

'<a href="'+result["response"][i][4]+'">>>>商品詳細ページへ</a>'+

'</div>'+

'</div>';

str += child;

}

$('.box11-parent').html(str);

});

2. htmlを投稿
下記のhtmlをコピーして、適当な「~.html」ファイルを作ってください。WordPressの方は、下記のコードをコピーして、新規投稿に貼り付けてレビューでみると表示されるはずです。
※29行目のscript読み出し部分だけ、1でアップしたJavaScriptのURLへ変更してください。

<style>
.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}
.box-price {
    font-size: 130%;
    color: red;
}
.box-tax {
    font-size: 80%;
}
.box-review {
    color: yellow;
}
.box-other{
    font-size: 80%;
}
</style>
<div class="box11-parent"></div>  
<script src="https://indent.site/blog/wp-content/uploads/2018/12/review.js"></script>

<style>

.box11{

padding: 0.5em 1em;

margin: 2em 0;

color: #5d627b;

background: white;

border-top: solid 5px #5d627b;

box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);

}

.box11 p {

margin: 0;

padding: 0;

}

.box-price {

font-size: 130%;

color: red;

}

.box-tax {

font-size: 80%;

}

.box-review {

color: yellow;

}

.box-other{

font-size: 80%;

}

</style>

ZoomやChatworkでファイル共有している方へ

リモートワークが一般的になってきた今「誰が」「どこで」「何を」ファイル共有しているのかしっかりと把握する必要があります。easyDBを利用すればセキュリティ上で安全なファイル共有をクラウド上で行えるだけでなく、ファイルのバージョン管理等も簡単にできます。

>>>リモートワーク時代の安全なファイル共有「easyDB」はこちら

この記事のURLとタイトルをコピー

お客様の声レビューを自社HPに追加する簡単な方法【更新ラク】

お客様レビューをスプレッドシートで管理する仕組み

実際に表示するまでの手順

ZoomやChatworkでファイル共有している方へ

この記事に関連する記事