WEB構築・プログラミング

ワードプレス(WordPress)サイトにGoogleの口コミを埋め込む方法

Googleマップで表示される口コミをワードプレスサイトに埋め込む方法を、ご紹介します。

店舗型ビジネスの場合は特に、SEO対策と並んで重要視されるようになったMEO対策。

【誰でもできる!】MEO対策とは?おさえるべき4つのポイントホームページを作成したら、MEO対策をすることが重要になってきました。 MEOとは「Map Engine Optimization...

MEO対策と並行して、お考えになると良いですね。

ワードプレス(Wordpress)サイトにGoogleの口コミを埋め込む方法

以下、6ステップで進めていきます。

  1. Google Cloud Platform のアカウント作成する
  2. Places APIを有効化する
  3. APIキーを作成して、キー制限をする
  4. Google Maps Platform/Place IDs で<実店舗ID>を取得する
  5. プラグイン「Widget for Google Reviews」でショートコードを生成する
  6. ショートコードを任意の場所に設置する

1.Google Cloud Platform のアカウント作成する

まずは、Google Cloud Platform のアカウントを作成ください。

上記、右上の「無料で開始」ボタンを押してすすめてください。

Googleアカウントがあれば、すぐに登録できます。

2.Places APIを有効化する

Google Cloud Platform>APIとサービス>ライブラリ

と進めていくと下記のような画面になると思います。

一番右にある「Places API」をクリックすると、APIを「有効にする」ボタンがあるので、有効にしてください。

3.APIキーを作成して、キー制限をする

Google Cloud Platform>APIとサービス>認証情報

と進めていくと、下記のような画面になるかと思います。

上記画面の「+認証情報作成」をクリックすると、ウインドウが出ますので「APIキー」を選択してください。

するとAPIキーが作成されます。

続いて「APIキーを制限」のリンクを押してください。

画面が切り替わるので、任意のわかりやすい名前「google_review」など付けていただいて、下にスクロールすると下記のような画面になります。

キーを制限にチェックし、APIを選択できますので「Places API」を選び、保存すてば完了。

APIキーが生成されるので、こちらを上記のようにコピーして、どこかに控えておいてください。

4.Google Maps Platform/Place IDs で<実店舗ID>を取得する

Google Maps Platform > Place IDs

上記リンクのグーグルマッププラットフォームのPlace IDsで、口コミを掲載したい店舗の地図IDを取得します。

ここでは、仮に東京の「八王子駅」とします。

直接住所を入力しても出てこないことがあるので、検索する形の方が出てきやすいですね。

たとえば、「東京 八王子 駅」と入力するようにすると、候補が出るので「八王子駅」を選択します。

上記のプレイスIDをコピーして、控えておいてください。

5.プラグイン「Widget for Google Reviews」でショートコードを生成する

下記、「Widget for Google Reviews」というプラグインをインストールして、有効化します。

次に、上記プラグインの「Settting」編集画面に、③で生成したAPIキーをコピペします。

今度は、「Widgets」編集画面で、「Create Widget」ボタンを押して、新しいレビューを表示させるウィジェットを作ります。

画面右上の「CONECT GOOGLE」ボタンを押し、プレイスIDをコピペします。

言語は「Japanese」を選択。

そして、「Conect Google」を押せば完了。

6.ショートコードを任意の場所に設置する

あとは、上記で生成されたショートコードを、記事に挿入すれば表示されます。

画面右側のメニューでカンタンなデザイン調整ができますので、設置するサイトに合わせて、調整してください。

ただ、無料のサービスのため、限界はあります。

下記が、実際にショートコードを埋め込んでみた、八王子駅のGoogleレビュー。

八王子駅
3.7
Based on 666 reviews
powered by Google
順博中野順博中野

02:09 23 Jun 22
改札口を出ると北と南に行けますが幅広いとはいえないコンコースだと思います。

立派な駅になりました。東京都なのに、なんとなく地方の主要都市の雰囲気を感じさせてくれます。最近は改札前でいろんなイベントが開催されます。いいアイデアだと思います。

かたなし.かたなし.

01:20 26 May 22
星ひとつも付けたくないです。駅員さんの対応と態度が悪すぎてとても気分が悪くなりました。人の話を最後まで聞かず、高圧的な態度。分からないから聞いているのに「ここではそんなことはできない」と説明もせず説教されました。なんなら怒鳴られました。こちらが丁寧に話しかけているのにも関わらずなんなのでしょうか?お給料を貰っている方の仕事とは思えません。私情をわたしにぶつけないでください。とても不愉快です。

ゆりあゆりあ

14:45 17 Apr 22
八王子駅は所用があり行きましたが、学生、若い年代の人が大変多いのに驚きました。それとは関係ないと思いたいですが、マナーが大変悪く嫌な思いをしました。下記の事。都心の駅でもやはりマナーの悪い人はいますが…帰り電車に乗るとき、たまたまだったのかもしれないが、先頭で並んでいたのに後ろにいた60代くらいの年配女性が人を押しのけて電車に乗車していくのは非常に不愉快でした。ターミナル駅で乗り換える人が多いせいか人にぶつかるのも平気で駆け足で前からこられたり非常に危険で危ない!利用したくないと感じた駅。

AyumiAyumi

22:43 03 Apr 22
八王子駅!第一印象は、テレビでの気象情報を思い出します。首都圏の中でも、飛び抜け寒い!雪が降ると、必ずここから中継が始まります。八王子駅からのアクセスは、中央本線で、新宿そして甲州方面へ。横浜線では横浜方面に行くことが出来ます。京王線は、京王八王子まで、歩かなければならないので、ちょっと不便です。特に雨の日には。八王子駅北口から、各方面にバスが出ています。初めて行った時は、どこから乗ればいいのかわからず、途方に暮れましたが、案内板を見ればよくわかります。私は、甲州旅行の時、八王子駅をよく利用しました。子供を連れて、スーパーあずさによく乗りました。また、いつか乗ってみたいと思います。

花鳥風月katyouhuugetu花鳥風月katyouhuugetu

00:21 14 Mar 22
今回のダイヤ改正で八高線から横浜線(快速)の接続はとても悪くなりました。相模原以降の利用者の事は全く考えていない。20分も毎回待たされるの時間の無駄。

たまゆうたまゆう

15:06 09 Mar 22
指定席券売機の買い方は、簡単で買えますよ(^_-)-☆よって、急遽、特急に乗りたいとしても直前にも急いで購入することができます!また、この日の八王子ですが、横浜線⇒中央本線に乗換の際、横須賀線&総武快速線の車両「廃車回送」が突然、4番線に入って来ました。そんな訳でその廃車回送列車を追い掛けに向かうため、特急あずさ25号に乗るため、特急券を購入します。

林雅彦林雅彦

06:42 18 Feb 22
東京都八王子市にあるJR中央線、横浜線、八高線の駅です。東京都西部の多摩地区で最も人口の多い八王子市の中心となる駅です。JR中央線では、豊田駅と西八王子駅の間にあります。八高線は、群馬県高崎市まで直通する電車はありません。横浜線で横浜と結ばれています。横浜線は、もともとは長野県で生産された生糸を横浜港に運ぶための短絡路としてつくられた路線です。京王線の八王子駅は、少し離れたところにあり、新宿駅までならこちらのほうが安く行けます。

天田一平天田一平

18:52 23 Oct 21
全体的にホームや連絡通路が狭い。在来線の間に貨物線や引込線があり、横浜線だけが極端に南側に寄っていて中央線上り列車や八高線ホームから横浜線への乗り換えは間に合わない場合がある。他にも引込線が複数あり北口から南口へは遠い道程 (200m以上) となっている。

js_loader

ABOUT ME
HICO(ぞろ屋)
バーテンダー➡料理人➡シニアソムリエ➡飲食店運営➡トップセールス・マーケター➡WEB制作/ECサイト運営/WEBライティング。 幅広い経験とスキルを活かしデザイナーやエンジニアでは作れない持続性のある戦略的サイト構築が得意。実はコンテスト受賞経験もあるシニアソムリエとしての顔も持つ。
人生のアフターコロナ対策、お決まりですか?

コロナショックにより、人の暮らしから考え方、働き方は大きく変わるのでしょう。

どうなるのか?というよりも、どう生きたいのか?

たいせつな人たちと楽しく人生を送る為に必要な資産と、生き方を、ない頭で頑張って考えてます。あなたのお役に立てれば幸いです!

 

この記事も読んでみませんか?