今回は上級者設定ではなくて、HTMLパーツを使って口コミを埋め込みます🤗
ただし、GoogleAPIキーとプレイスIDを事前に取得することが必要です。
目次
完成図
対応しているサイトデザイン※
すべて
※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。
事前準備
1. APIキーの取得
こちらのサイトを参考にAPIキーを取得し控えておいてください
▶︎「Google Maps の APIキー を取得する」
上記サイトの「APIキーの利用制限」の手順の中に、
「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。」という項目がありますが、そこに入れるURLの後ろに「*」を入れるようにしてください。
例：https://selfull-hack.com/*
2. プレイスIDの取得
1. 以下サイトにアクセスします
▶︎プレイス ID 取得サイト（Google Maps Platform）
2. 赤枠部分に院名を入れて自分の院を選択します
3. 赤枠部分のプレイスIDを控えておきます
セルフルのパーツとして入れる
手順1： HTML（YouTube等の埋め込み）パーツをページに追加。
以下コードをコピペする。
コピペが終わったら手順２も行ってくださいね🤗
<div class="g-reviews-wrap"><div class="g-reviews"></div></div>
<script>
$(function(){
const API_KEY = 'ここにAPIキー';
const PLACE_ID = 'ここにプレイスID';
const API_URL = 'https://maps.google.com/maps/api/js?key=' + API_KEY + '&libraries=places';
const LINK_URL = 'https://search.google.com/local/reviews?placeid=' + PLACE_ID;
$.getScript(API_URL, function() {
const service = new google.maps.places.PlacesService(document.createElement('div'));
const $reviews = $('.g-reviews');
service.getDetails({
placeId: PLACE_ID,
fields: ['name', 'rating', 'user_ratings_total', 'review']
}, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log(place)
$reviews.append('<div class="place-heading"><img class="g-icon" src="https://services.google.com/fh/files/misc/google_g_icon_download.png"><span class="place-name">' + place.name + '</span><br><span class="place-rating">' + place.rating + '</span><div class="review-stars"><span><span style="width:' + place.rating * 25 + 'px"></span></span></div><span class="review-count">' + place.user_ratings_total + ' 件のレビュー</span></div>');
$.each(place.reviews, function(){
let $review = $('<div class="review-wrap" style="background-image:url(' + this.profile_photo_url + ')" />');
$review.append('<div class="review-profile">' + this.author_name + '</div>');
$review.append('<div class="review-rate"><div class="review-stars review-stars-small"><span><span style="width:' + this.rating * 14 + 'px;"></span></span></div><span class="review-time-description">' + this.relative_time_description + '</span></div>');
$review.append('<div class="review-text">' + this.text + '</div>');
$reviews.append($review);
});
if (place.user_ratings_total > 5) $reviews.append('<a class="more-reviews" href="' + LINK_URL + '" target="_blank">クチコミをもっと見る</a>');
}
});
});
});
</script>
<style>
.g-reviews-wrap {
margin: 8px auto 32px;
}
.g-reviews {
max-height: 400px;
overflow: auto;
padding: min(24px, 4%);
line-height: 1.8;
letter-spacing: 0.1em;
font-feature-settings: "palt";
border-radius: 5px;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.g-reviews .g-icon {
display: block;
width: 64px;
height: 64px;
margin: 0 auto 16px;
}
.g-reviews .place-name {
font-size: 28px;
line-height: 1.4;
}
.g-reviews .place-rating {
display: inline;
font-size: 32px;
color: #70757a;
margin-right: 12px;
}
.g-reviews .review-stars {
display: inline-block;
margin-right: 8px;
position: relative;
top: 2px;
}
.g-reviews .review-stars span {
display: block;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.44 19'><polygon fill='%23dadce0' points='10,15.27 16.18,19 14.54,11.97 20,7.24 12.81,6.63 10,0 7.19,6.63 0,7.24 5.46,11.97 3.82,19'/></svg>");
}
.g-reviews .review-stars span span {
display: block;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.44 19'><polygon fill='%23fdd663' points='10,15.27 16.18,19 14.54,11.97 20,7.24 12.81,6.63 10,0 7.19,6.63 0,7.24 5.46,11.97 3.82,19'/></svg>");
}
.g-reviews .review-stars span, .g-reviews .review-stars span span {
background-size: 25px 22px;
height: 22px;
width: 123px;
background-repeat: repeat-x;
overflow: hidden;
position: relative;
filter: none;
}
.g-reviews .review-count {
display: inline-block;
color: #70757a;
font-size: 15px;
}
.g-reviews .review-wrap {
font-size: 13px;
border-top: 1px solid #ecedef;
padding: 28px 0 28px 47px;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: left 28px;
}
.g-reviews .review-profile {
padding-top: 6px;
line-height: 1;
font-weight: bold;
}
.g-reviews .review-stars-small {
top: 1px;
}
.g-reviews .review-stars-small span, .g-reviews .review-stars-small span span {
background-size: 14px 13px;
height: 13px;
width: 69px;
}
.g-reviews .review-time-description {
color: #70757a;
}
.g-reviews .review-text {
white-space: pre-wrap;
}
.g-reviews .more-reviews {
display: block;
width: fit-content;
margin: 8px auto 0;
font-size: 14px;
padding: 8px 16px;
border-radius: 100vh;
border: 1px solid #ccc;
text-decoration: none;
color: #333 !important;
}
.g-reviews .more-reviews:hover {
opacity: .7;
}
.g-reviews .more-reviews:active, .g-reviews .more-reviews:visited {
color: inherit;
}
.g-reviews .more-reviews:focus {
outline: none;
}
</style>手順２：5行目と6行目を修正
上記のコードの中の「ここにAPIキー」と書かれている部分に事前準備で取得したAPIキーを、
「ここにプレイスID」と書かれている部分に事前準備で取得したプレイスIDを書き換えます。
※書き換える場所の前にある「’」という記号や「’;」という記号が１つでも欠けてしまうと表示されなくなってしまうので、書き換えるときには注意してくださいね🤗
