Googleマップで表示される口コミをワードプレスサイトに埋め込む方法を、ご紹介します。
店舗型ビジネスの場合は特に、SEO対策と並んで重要視されるようになったMEO対策。
あわせて読みたい 【誰でもできる!】MEO対策とは?おさえるべき4つのポイント ホームページを作成したら、MEO対策をすることが重要になってきました。 MEOとは「Map Engine Optimization」の略で、つまり、Googleマップの検索で上位表示されるよう… MEO対策と並行して、お考えになると良いですね。
目次
ワードプレス(Wordpress)サイトにGoogleの口コミを埋め込む方法
以下、6ステップで進めていきます。
- Google Cloud Platform のアカウント作成する
- Places APIを有効化する
- APIキーを作成して、キー制限をする
- Google Maps Platform/Place IDs で<実店舗ID>を取得する
- プラグイン「Widget for Google Reviews」でショートコードを生成する
- ショートコードを任意の場所に設置する
1.Google Cloud Platform のアカウント作成する
まずは、Google Cloud Platform のアカウントを作成ください。
上記、右上の「無料で開始」ボタンを押してすすめてください。Googleアカウントがあれば、すぐに登録できます。
![Google Cloud プラットフォーム画面](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
こちらがGoogleクラウドのメイン画面。(※2024年4月現在)
バージョンアップされている場合、画面が異なる場合があります。
2.Places APIを有効化する
Google Cloud Platformのダッシュボードを開きます。
![Google Cloud Platformのダッシュボード](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
「APIとサービス」>「ライブラリ」と進めていくと下記のような画面になると思います。
![Google Cloud Platformの「Place API」](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
「Places API」をクリックすると、APIを「有効にする」ボタンがあるので、有効にしてください。
![「Places API」を有効にする](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
3.APIキーを作成して、キー制限をする
「Places API」を有効にすると、APIキーを発行できるようになります。
![Google Cloud Platform>APIとサービス>鍵と認証情報](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
上記画面のように「APIとサービス」>「鍵と認証情報」と進めていくと、下記のような画面になるかと思います。
上記画面の「+認証情報作成」をクリックすると、ウインドウが出ますので「APIキー」を選択してください。
するとAPIキーが作成されます。なお、この時点でコピーして控えておかなくても大丈夫です。続いて「APIキーを編集」のリンクをクリックします。
画面が切り替わるので、任意のわかりやすい名前「google_review」など付けていただいて、下にスクロールすると下記のような画面になります。
キーを制限にチェックし、APIを選択できますので「Places API」を選び、保存すれば完了。
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
「鍵を表示します」をクリックすると、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」編集画面に、STEP3で生成したAPIキーをコピペします。
今度は、「Widgets」編集画面で、「Create Widget」ボタンを押して、新しいレビューを表示させるウィジェットを作ります。
画面右上の「CONECT GOOGLE」ボタンを押し、STEP4で生成したプレイスIDをコピペします。言語は「Japanese」を選択。そして、「Conect Google」を押せば完了です。
6.ショートコードを任意の場所に設置する
あとは、上記で生成されたショートコードを、記事に挿入すれば表示されます。
画面右側のメニューでカンタンなデザイン調整ができますので、設置するサイトに合わせて、調整してください。下記が実際に、上記のショートコードを埋め込んだ時の事例です。
八高線ホーム向かいが中央線東京方面行ですので乗り換えに便利です。
駅員さんや清掃員の方は、色々な気苦労に元で我々、利用者の為に業務に従事されてるが残念な事に、一部の心無い利用者がコンビニで購入したであろうゴミを、駅構内のあちこちに残置、遺棄しているのを日々散見する。又、トイレの使用状況が劣悪であり信じられません。そもそも八王子人って、一般的なモラルやマナーに欠如しているのでしょうか?恐らく一部の残念な人の所業でしょうが、その為に八王子人全体として見られてしまうのです、本当に残念です。
許棋翔15:56 17 Aug 24
横浜線、八高線、中央線が利用できます!あずさとかいじは全ての電車が止まります!発車メロディーは夕焼け小焼けが使われていますが、ホームによってはあまり鳴らないこともあります!北口は主に西東京バス、南口は京王バスが中心に運行されています!京王八王子駅は北口から徒歩で行けます!
JR中央線と横浜線の接続駅ですが、徒歩圏内には京王線の京王八王子駅もあります。この2駅でこの地域の中心的な地区となっているようだ。駅のホームは上り、下り側で少しずれた構造になっているが、連絡通路でうまくつながっている。主要な関連施設はすべて階上の改札階にあるものの、横浜線ホームには立ち食いそばもある。
横浜線終点の八王子駅て特急あずさを待ってる時に入ってきた貨物列車の先頭をパチリ📸桃鉄を思い出す光景でした🍑今年の暑さは異常で八王子駅で降りて、凄い暑さにびっくりしました😖
A M10:22 12 Aug 24
暑くて湿気でジメジメしていた日、駅に着いてトイレに行ったら冷房ガンガンかかってて救われた。駅周りの人口密度も多すぎず少なすぎず。しかし引っ越した先のマンションの親子の騒音が酷いので住んでいられず、なんとなく八王子からは早々に引っ越すことに決めました。結局どんなに街を調べようが、「最終的な住み心地を左右するのは近隣の住人」という事を学んだかなぁ。
しほ09:06 08 Aug 24
八王子駅は、多摩地域の主要な駅で、ショッピングや飲食施設が充実しています。駅構内は広く、使いやすいですが、通勤ラッシュ時には混雑することがあります。周辺には商店街やアウトレットモールもあり、便利な場所です。また、多摩地域の観光拠点としても利用されています。
降りた瞬間物凄く治安が悪いのが分かる。路上喫煙のマナーが悪すぎるし、駅にもごみが散乱していた。
健06:18 29 Jul 24
この駅周辺は本当に素敵な風景ですね。ここまで来たのは、この辺にあるエコタウンをチェックするためです。しかし、それでもこのエリアは本当に美しくて静かです。
c s02:17 27 Jul 24
お池13:15 20 Jul 24
JR東日本の駅で中央線・横浜線・八高線に所属する横浜線は終点、八高線は起点といういわゆるジャンクションの駅島式ホーム3面6線を有する地上駅ホーム間に側線があり跨線橋が結構な長さでつながっている橋上駅舎を持つ東京都唯一の中核市であり多摩地域最大の人口を擁する八王子市の中心駅首都圏にありながらかつての国鉄の大きな駅を彷彿させる駅の北側はペデストリアンデッキが色々な方向に伸びていて小倉駅などを思わせるけど人の流れが違いさすが首都圏と思わせる
みかん03:55 10 Jul 24
横浜線は相変わらず混みすぎてうんざりする 22:00過ぎても混んでる時が結構ある 特に金曜の夜は酷い どいつもこいつも連日遅くまで飲んだくれてるのか? 夕勤の帰りにはキツイわ 出来れば乗りたくないホームドア設置工事してた時期は立ってる警備員?が目障りだった ドア閉まりますとか大声出してるけど要らねえ セルフ車掌か 町田駅のホームドア設置工事してた時期に居たのも ガン飛ばしたり 前出過ぎだとか絡んできた 他の施設に行っても思うけど やっぱり警備員なんか他では使い物にならない痛い奴がやる仕事なんだな 育ちの悪さが立ち振る舞いで分かるぞ 他人に注意して己れが偉いと勘違い
K K10:49 21 Jun 24
八王子駅にはJR中央線、中央本線、横浜線、八高線が乗り入れています。特急は、中央線の特急かいじと特急あずさです。*特急かいじ、特急あずさは、東京駅、新宿駅、立川駅、八王子駅、高尾駅、甲府駅、松本駅などを経由して長野駅まで運行しています。上り八王子駅から新宿駅までの最短時間は約46分です。下り八王子駅から長野駅までの最短時間は2時間30分です。バスは西東京バス、京王バスなど多数の路線が発着しています。江戸時代、甲州街道の宿場町として栄えた八王子は、1889年に甲武鉄道(現JR中央線)が開通し、交通の要衝として発展しました。駅舎は度重なる改築を経て、現在の駅ビル「セレオ八王子」となりました。
八王子駅に降り立ってやっと気が付いた…どこの街に行っても同じチェーン店が立ち並んでいるこの街にも同じチェーン店が並んでいる自分の住む街と同じチェーン店を見ると安心するのか???
H M09:58 02 Jun 24
八王子駅は、中央線(快速・特急)、八高線、横浜線が乗り入れるターミナル駅です。神田駅から中央線特快に乗り(神田駅から八王子駅まで約50分)、北口側にある「八王子市夢美術館」を訪れる際に利用させていただきました。ターミナル駅で特急も停車する駅なので、駅内も駅周辺も人の量が凄く😱💦、とても賑わっていて活気を感じました❗️何か催し物をしていたのか、ユーロードという歩行者専用道路は人で溢れかえっていました😅💦
駅も大きくて、隣にはビックカメラもありとても便利です。
どこにでもある不味い蕎麦屋とキオスクがある以外、何も無い。
JR八高線、横浜線、中央線の主要接続拠点。駅の外にある京王線へのアクセスは、標識に従ってください。門の外にはたくさんのショップ、カフェ、レストランがあります。普段はとても混んでいますので、気をつけて通勤してください。
駅は広い、駅の前は色々な場所があります、食やとか、カラオケとか、良い駅です
駅も大きいですが、駅ビルセレオを中心に駅前はとても大きな都市です。約500m徒歩5~6分離れたところに、京王線八王子駅もあります。駅の中には山梨の信玄餅のお店などもあり、雰囲気も東京中心部よりも東京西部から山梨県の雰囲気も感じさせます。多摩地域最大の人口を擁する八王子市の中心駅であり多摩地域にあるターミナル駅の一つだけあって、東京から山梨方面へを結ぶ「中央線」、神奈川県横浜方面から八王子へと結ぶ「横浜線」、埼玉県川越から八王子を結ぶ「八高線」が乗入れし、「かいじ」「あずさ」「富士回遊」「はちおうじ」などの特急列車も全て停車する。大学も創価大学、中央大学、東京都立大学、工学院大学等があり学園都市としての駅の役割も果たしています。改札中にはお蕎麦屋さんやお土産コンビニも、改札を出れば駅ビルセレオ、地下には駐車場や駐輪場も完備され、国道20号から駅までは地下道で結ばれている為、雨でも濡れないでアクセスすることが出来とても便利です。
羽村の自動車工場に出張時に乗り換えで利用しました。関西人の私でも知っている有名な駅です。乗り換えに使っただけですが、買い物など便利そうで、住みやすそうです。
大07:38 15 Feb 24
乗降客の多さと比較すると、中央線下りホームの狭さが気になります。改札口へ向かう階段エスカレーターも混み合います。暁町の萩生田光一宅や、裏金男が生稲晃子を連れてった子安町の統一教会施設の最寄駅です。
多方面への乗り換えに優れた駅です東京や新宿からも快速や特別快速で一本で観光地の松本や上諏訪までも特急使えば1本です、ちなみに近くには京王八王子駅があり他鉄道会社ですが新宿までは申し分ないくらいの利便性の良さでたまにゲリラ的な事に遭遇して長野総合車両センターへの廃車車両の輸送とか西武車両の輸送とか東急車両の輸送等があり、撮り鉄がいる時はかなりのレアな車両が通ると見ても良いかと
3路線(中央本線、八高線、横浜線)4方面が乗り入れ、中央本線の西(山梨)方面から来る列車の終点になることも多い運転上の要衝だけあって構内は広大です。京王電鉄の八王子駅とは少し離れています。(徒歩5分程度)
![js_loader](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
ただ、無料のサービスのため、限界はあります。今後、サービス提供が廃止になる可能性もあるので、その際はご了承ください。
まとめ
この記事では、ワードプレスサイトにGoogleマップの口コミを埋め込むための詳細な手順をご紹介しました。店舗型ビジネスにとって重要なSEO対策とMEO対策を強化するための一環として、口コミの可視化は非常に効果的です。
この方法を利用すれば、ユーザーに対して信頼性を高め、より具体的な情報提供が可能になります。ぜひご参考ください。