Why I Wrote This

I wrote this article because I couldn’t find anything that solves this problem.  Namely: an easy way to show your Google reviews on your website, without getting a content penalty from Google.

I’ll explain how I solved this problem, and provide simple step-by-step instructions so you can do the same.  If you’re not interested in the back-story, skip ahead to A Simple Guide To Displaying Google Reviews On Any Web Page.

example of Google Reviews Code as seen on EZ-NetTools.com

Code pulls customer reviews from Google

It Used To Be Easy…

There once was a time when you could easily embed a Google review on your website.

But those days are gone.

Fantasy Novel: Badgerblood Awakening book standing on stone floor.

Looking For An Exciting Fantasy Adventure?

Meet your newest fandom.

Currently, if you type in “embed google reviews” or “display google reviews on my website” you’ll find a host of outdated articles, with solutions that simply don’t work anymore.

I was asked to find a way to display Google reviews on a client’s website. I started looking for a solution and it quickly became apparent that… there weren’t any great solutions out there.

Sure, there are a couple of WordPress plugins which may work (assuming you’re using WordPress).  Surely, there must be a solution for displaying google reviews on a simple website?  Somewhere you can copy some code and be up and running in a few minutes, right?

The Current Best Solution

I found a Google Places jQuery Plugin by Jason Long.  It did what I needed (display Google Reviews in a simple format).

However, there were some issues…

Getting the plugin to work took some trial and error.  The demo file I downloaded didn’t seem to work, initially.  Still, after spending some time debugging the HTML files on his website I successfully had a working version of my own, which I placed on the requested landing page.

Making It Reproducible

My co-worker also asked if we could add it to a dozen other landing pages.  But in order to make this easy to reproduce, I needed to condense the code into it’s simplest form. So I decided to write a simple guide.

Here’s why I wrote this…

After spending hours searching the internet for a good solution, I realizing there was a need that wasn’t being filled.  Plenty of people wanted to display Google reviews on their website, but no one had great answers. Most of the articles outlined the out-of-date solution or said “just link to the google search”.

So I decided to share my solution, and present it in the simplest way possible, so regular people could place reviews on their website too.

A Simple Guide To Displaying Google Reviews On Any Web Page

Let’s get down to business…

Here’s a working example of what we’re making.  For simplicity sake, this example only shows 2 reviews, but the code can display up to 5.

google reviews should appear here.

Step 1. Copy This Code.

First, copy the following code…

<div id="google-reviews"></div>

<link rel="stylesheet" href="https://cdn.rawgit.com/stevenmonson/googleReviews/master/google-places.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenmonson/googleReviews@6e8f0d794393ec657dab69eb1421f3a60add23ef/google-places.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDeivU57j-macv2fXXgbhKGM6cqMLmnAFI&signed_in=true&libraries=places"></script>

<script>
jQuery(document).ready(function( $ ) {
   $("#google-reviews").googlePlaces({
        placeId: 'ChIJp2QxV_sJVFMR1DEp1x_16F8' //Find placeID @: https://developers.google.com/places/place-id
      , render: ['reviews']
      , min_rating: 4
      , max_rows:4
   });
});
</script>

If you copy and paste this code onto your website, you’ll get reviews for EZ-NetTools.

See the text above that’s highlighted in red?  That’s our Place ID.  If you want to get reviews for your own company, you need to replace it with your own Place ID.  Here’s how…

Step 2. Find Your Google Place ID

You can find your place ID by searching in the box below or going to https://developers.google.com/places/place-id

Type your business in the box.  Choose your business from the resulting drop-down.  Then replace the ID in the code with your own ID.  Once you do that, your reviews should appear.

That’s all you need to get it working!

Can’t find your Google Places ID?  Read This Article.

Want to improve your SEO? Learn the secrets with this free website marketing checklist.

Adding a Link to All Reviews (Optional)

The widget can only show up to 5 reviews (which is a limit of the Google API).  So to make it easy for visitors to read the rest of your reviews,  add a button like this…

See All Our Google Reviews

You can style the link any way you want.  The important thing is to get the correct link (which is slightly tricky, but not too hard once you know how to do it).  I recommend reading How To Add a Link to Your Google Reviews on Your Website so you’re sure to do it right.

Changing the Way It Looks

For those of you that know how to write your own CSS code,  you can replace the supplied CSS file with your own (or download and alter the existing CSS file).

If you don’t know CSS but need to display it differently,  I might be willing to design a custom theme for you.  If you’re interested, let me know in the comments…

Troubleshooting

If it doesn’t work, first make certain that you correctly copied and pasted the Place ID.  This is a common error.

Still having trouble?

The code I provided includes a link to jQuery.  However, if your website already has jQuery on the page (like most WordPress sites, for example) try removing the following line from the code…

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Update Oct 31, 2017.  After you get your API key, you must ACTIVATE the key.

To activate your key: Go to the Google API Console Dashboard (https://console.developers.google.com/apis/dashboard) and select from left menu “Library”, then “Google Maps JavaScript API”.  Then at the top, click “Enable this API”. Credit to Jay O. for pointing this out. Thanks!

Disclaimer

Normally you’d have to get your own Google API key and assemble the pieces together up yourself. However, that can be somewhat complicated and I wanted to make this as easy as possible.

So I’m allowing all of you to use my API key.

However, if I find people are abusing it, I may restrict access to it and force people to get their own API key.

Update: June 29, 2017.  I’ve had so many people use this code that we’re now exceeding the quota for the API key.  From this point forward, I strongly recommend getting your own API key.

Here’s the link… https://developers.google.com/places/web-service/get-api-key

Be Awesome and Share This…

If you found this helpful,  give us a shout-out on Facebook or Twitter.

323 Comments
  • Patrick H says:

    Hello,

    I think, the solution doesn’t work anymore? It worked, but now it suddenly doesnt anymore. Can u confirm that?

    Many Thanks
    Patrick

    • Administrator says:

      Hi Patrick,
      I believe the code should still work, but you have to get your own Google API Key and Google now requires a credit card to get started, which makes it a much less appealing solution than when I first wrote the article.

  • hendranata says:

    can we get slide google review? possible?

  • Leon says:

    I also implemented the code (https://rt-eureka.nl/referenties) and yes, the reviews are shown. But never the most recent one. I don’t see any issue, but I assume it is because of library conflicts. Any idea is welcome…..

    • Administrator says:

      Hi Leon,

      The Google API pulls reviews it considers “most relevant” rather than most recent. Unfortunately, I don’t know of any way to make it pull up the most recent reviews.

    • Ashish Acharya says:

      have you found any way to display most recent review??

  • Thank you so much for the great description. We are using your script since several years. What we have noticed recently is that the script is not displaying the most recent reviews. At the moment we have two more recent reviews to the one that is displayed first on https://oiba.ch/. Do you have any idea what might be causing this? Thanks a lot for your help!

  • Octavio says:

    First of all, I want to thank you for the plugin, but after two years of using it on my website suddenly it has stopped to show the reviews, and no errors appears on the console.
    I don’t know what happens because I have my own API key and I put the billing information, also I haven´t modified anything on my web.
    Can It be a plugin issue or is a problem of my hosting? Can you help me, please?

  • Christian says:

    Thank you very much for this How To, it worked like a charme after inserting my own api key and places id. the reviews the script reads from google ARE IN ENGLISH, is there e way to tell the script to target a specific language? In my case i need to prefer the German reviews for my place. Thank you very much for you answer.

  • Bailey says:

    Hello – I have this working in my local environment with several other Place ID’s but this one will not work: ChIJwf2vXaYhMYgRH5h9MG_Jt-c

    Could it be because of the dash? I’m stumped.

    • Administrator says:

      Your ID appears to be correct. If I put in in this link https://search.google.com/local/reviews?placeid=ChIJwf2vXaYhMYgRH5h9MG_Jt-c your business reviews come right up. So the dash isn’t the problem.

      The local environment could be the issue, or honestly, any one of a hundred things. Best best advice is to try and eliminate variables. Try it on a live server. Try using just one place ID at a time. etc.

      • Beck Bailey says:

        Thanks for the reply. I have gone through the process you suggested, live server, testing different IDs. This is the only ID that doesn’t work. I even tried another script to pull reviews with the API and had the same result with this particular place ID only. Any advice?

        The other thing that I notice about this particular place (ID: ChIJwf2vXaYhMYgRH5h9MG_Jt-c) is the name of the business in Google is very complex, multiple ampersands, etc. Could that cause an issue?

        • Beck says:

          I figured out why the reviews wouldn’t display for this Google PID, there is no address assigned in the Google My Business profile. Is there any way around this without having to assign an address?

          • Administrator says:

            As far as I know, you have to have and address to use Google My Business, but you don’t have to display the address to the public.

  • Felipe says:

    Dear:
    I have tried to apply the fix but I am getting this error: ApiNotActivatedMapError. My API is enabled but still I am not able to make it work. Also it was asking me some billing credentials which I did not wanted to enter. As a second solution for those wants to achieve the reviews on their site you can visit this site:

    https://blog.cws.net/yelp-vs.-google-reviews-where-to-spend-your-efforts

    It works for me in February 2020, this is my website with my results:

    https://www.centroalianza.cl/galeria

    Regards,
    Felipe

  • Dee Lee says:

    I’ve been happily using your code for some time now, thank you. Unfortunately I have an issue I was hoping you could chime in about. The code isn’t currently working on all the pages I use it on (about 5 total). I haven’t changed any code, the reviews just don’t show up. They worked for months prior. The only other note is that when they were working, sometimes they wouldn’t load. It seemed random. For some stretch of time they wouldn’t load and then after that they would begin loading again without issue. I made no changes to the code along the way. Thanks in advance.

    • Administrator says:

      Hi Dee,

      You’ll need to get your own API key (see instructions in the article above). Google has made some changes, and requires you to input a credit card number now.

  • Lyndon says:

    Is there any way to make this show more reviews?

  • nour abu khajil says:

    Hello, I did exactly all the steps but it’s not working? Do you have any idea why?

  • Mau says:

    CSS is not working on my squarespace site, any help?!

  • Chuck says:

    Thanks ! Amazing tool, it worked fine (Oct 2, 2019), after I enabled Places API in google console. Exactly what I wanted, easy, integrating code.

    Is it OK to clone your google-places.js and css to our own platform, so we dont have to rely on your cdn.

  • Lauren4c says:

    Hey there! So thanks for the quick code grab, but I’ve got an issue on implementation. Sometimes it works, and sometimes it stalls the loading of my homepage (where the code is dropped in). It’s on a WordPress Site (so I’m not calling jQuery), but I’m worried that things are loading in the correct order and that’s why I’m getting the following error only SOME of the time (error in browser console):

    VM3919 google-places.js:34 Uncaught ReferenceError: google is not defined
    at initialize_place (VM3919 google-places.js:34)
    at $.googlePlaces.plugin.init (VM3919 google-places.js:21)
    at new $.googlePlaces (VM3919 google-places.js:154)
    at HTMLDivElement. (VM3919 google-places.js:160)
    at Function.each (VM3909 jquery.js:2)
    at a.fn.init.each (VM3909 jquery.js:2)
    at a.fn.init.$.fn.googlePlaces (VM3919 google-places.js:158)
    at HTMLDocument. ((index):643)
    at i (VM3909 jquery.js:2)
    at Object.fireWith [as resolveWith] (VM3909 jquery.js:2)

    Code is live in https://covebikeski.com
    I haven’t tinkered with your JS file other than placing it in my theme files and swapping out the placeId for my own.

    Any ideas?? Thanks!

    • Administrator says:

      You might try putting the scripts in the footer (or the header) of your page. Then simply put the <div id="google-reviews"></div> where you want the review.

  • antonis says:

    hello,

    any way to show reviews also written in english?
    because this code shows only english reviews!

  • antonis says:

    thanks for this!!
    i have successfully implemented this in my website, but it shows only english reviews.

    is there any way to show reviews written in greek?

    thanks

  • Hello, I found a little bug in your script: The newest entry will not displayed (because it is starting at the second entry).

    I found a solution:

    In the sort_by_date function:

    change:
    if(keyA keyB) return 1;

    to

    if(keyA keyB) return -1;

    In the renderReviews function:

    change

    for (var i = row_count; i >= 0; i–) {

    to

    for (var i = 0; i <= row_count; i++) {

  • Steve says:

    Seems this stopped working… I even checked your site and it no longer displays

    Thanks
    Steve

    • chris says:

      Same issue for me. I was so happy but it is all gone now! Anyone found a fix? 🙁

      • Administrator says:

        Google now requires a credit card to use their API keys. For this reason I have opted to stop using it on our own website. Since I originally allowed others to use the Key, we didn’t want to opt-in to the API changes (and possibly get charged for other people’s use).

        The code should still work, but you have to get your own key and add a credit card to the account.

  • Gaurav Sharma says:

    This is Very Help Full Tutorial I like the way to tell each thing.

    But There is something i want to tell you that. I try to enable “Google Maps JavaScript API” I does not work. I have to ENABLE “PLACE API” to work properly. I think this might be due to google seperate the place API from MAP.

    After that it works Fine.
    Thanks for the article.

  • Ben says:

    Hello everyone, for anyone looking to put multiple calls to seperate locations within a single document it won’t work using the code above because it’s calling the google-reviews div more than once which isn’t possible in html.

    Change this:

    jQuery(document).ready(function( $ ) {
    $(“#google-reviews”).googlePlaces({
    placeId: ‘PlaceID’
    , render: [‘reviews’]
    , min_rating: 0
    , max_rows:3
    });
    });

    To this (for every new call):

    jQuery(document).ready(function( $ ) {
    $(“#something-else”).googlePlaces({
    placeId: ‘PlaceID’
    , render: [‘reviews’]
    , min_rating: 0
    , max_rows:3
    });
    });

  • morissa says:

    Hello, thank you! But how we can make reviews more short with a link “read more…”? When reviews are different in length it became visually not aesthetic. Thanks!

  • saroj says:

    Hi, Thank you for This is the great article it working fine for me. I am one problem I want to show the review on the multiple places ie “placeId” will be more the one. Is there any way to do this and also I want to show the image of the

  • Joshua White says:

    Thank you just what I was looking for. Worked out how to display thumbnail images of users by adding this code

    reviews[i].profile_photo_url

    Example can be found at
    http://midlandcleaning.co.uk

  • Tanmoy Kundu says:

    It’s literally saved lots of time. It’s working perfectly. Thank you!

  • Thank you so much – was very helpful for me.
    (not yet online but already works offline on my Joomla! Website.)
    Is there any possibility to show total rating and counts too for the tool I use now looks very poor and does not show total counts…
    Best regards
    Oliver

  • Johann says:

    Awesome guide !
    I’ve been using your code successfully, but I’m having a real hard time finding out how to get the average global rating… Do you have any pointers ?
    Thanks

  • Ange says:

    Thanks a million for this article.

  • Michael says:

    Great article! I was able to get this to work using the code, just remember that enabling both the maps and places APIs is a must!

    The only trouble I am having is that my page shows the 5 reviews and then repeats them. Can someone please point out to me where in the js code I can fix this? I just want each review to show once, and I am fine with the limit of 5.

    Example: https://www.effortlessmobileauto.com/testimonials/testimonials.html#contact

  • Matt W says:

    Thanks for posting this. I’m having a little trouble getting it to work on my site. Steps taken so far: Created my own API, obtained my Place ID. Within the script you provided I substituted my Place ID and API. Then I inserted the widget/html into a field in my website. It does not appear that it worked.

    Any suggestions you may have would be very appreciated!

    • Michael says:

      Go to the Google API dashboard and search “Places” and “Maps”. Enable both APIs.

      • matt w says:

        Thank you again Michael, I enabled the Places and maps on the API dash. My script seems to be altered (I’m using Firefox), I manually adjusted the script a few different times. The last time I removed that line of script with the …Cloudfare..

        Unfortunately it doesn’t seem to be working for me

  • Sneha says:

    Thanks Steven,
    Nowdays google started to charge on API call.
    How to reduce API call ???
    I was thinking to call API once a day or After new review submitted.
    And store review on local database and display review from Local Database.
    Can you guide me??

  • Mh says:

    Effective article to me. And its working perfectly for me. Thanks man for sharing this kind of helpful article. Appreciated.

  • Thank you for this script. I added some custom CSS to make it match my site (https://mrwebsitedesigner.com)
    I was wondering if it was possible to include the photos/thumbnails of the users who left the review?

    • Johann says:

      You’d have to replace the javascript file by your own.
      Modify the code by adding in the html var :

      and styling the img in the css

    • Johann says:

      Forgot to format the code, sorry, here it is :


      Place it near the author_name

  • I love it! Great way to show the Google Reviews on my website. Although, is it possible that the review stars are shown horizontal (like in your example) instead of vertical? Check my website:
    https://www.massagewerkfriesland.nl/

    I can’t figure it out.

    Hope you can help me!

  • Where I should copy and paste ? when I pasted, the same script was visible on the website. Can i put as an html

  • Alex says:

    As is, the instructions above will not work. To make it work, not only do you need to enable the Google Maps JavaScript API, but also the Places API for Web.
    Also download the google-places.js to your server and change the placeId on line 7 to your unique placeId.

  • Daniel says:

    Hello!
    I don’t get it to work. 🙁
    I tried everything and did everything from the manual.. but it just won’t appear on the website.
    I use WordPress with Betheme Theme and Gutenberg Editor: http://www.danielrakus.de

    How do I get this to work?

  • Nikon Nik says:

    Excellent article. However the linking process doesn’t work for me. Thanks for sharing.

  • chris says:

    This has been a really usefull post Thank you so much

    I have been trying to get additional functionality to it though (but I am not able to do script and coding).

    I can see that the avatar can be pulled in with some additional request codes (as seen in some WordPress widgets), I can not seem to make a carrousel of the reviews (I can not write css). and I realise that the aggregate reviews could be pulled in also and they displayed with some schema mark up (again beyond me but I can see it in other peoples work).

    Also in case you are not aware https://cdn.rawgit.com on the home page says it is closing down, so the scripts will not work once that happens .

    Do you do commissioned work for writing such things?

  • Ramesh K says:

    Have updated as per the guidelines, but could not able to display reviews from Google.
    https://www.chennaimedipoint.com/reviews.html

    Kindly check the above link

    • Administrator says:

      Unfortunately, you need to have the Google-My-Business card show up on the right side of a Google search. You won’t be able to find it from Google Maps.

  • Sunitha T says:

    Hey,

    Thanks for your useful Info.
    I got a question. Can I get aggregate ratings of my website from Google.

    By the way Great work!

  • wayne hooper says:

    Thank you!

    Great article and it was really easy to follow to get the reviews showing up. One question though. Is it possible to sort the reviews by most recent rather than most relevant. Or this this down to the API and not possible.

  • TGoedde says:

    Is this still being moderated? I’m not seeing any thread answers for months. I’ve tried the code, changed the location on the .js to be local on our server. I do not know the new path for the googleReviews/google-places.js script. Might no longer be there. I’ve used our Google API and placeID. I get nothing to show at all. Blank page. Could the author maybe look into his code and see what might be deprecated as of today?

    • Peggy Newsom says:

      I’m having the same sort of problem. All my docs from Google API said I needed to direct through My Business to pull the data. I still tried the code with my key and place id. After uploading the page, I saw the review information beautifully (must have my key and place id correct!), but one of the reviews went well beyond the page. I added overflow:scroll to the styling, uploaded again and now it’s remained blank after several attempts to troubleshoot it. 🙁

    • Peggy Newsom says:

      I left a reply yesterday, but I can’t find it now. My reviews displayed once using desktop yesterday and then stayed blank after many attempts to revive them. They displayed for me again this morning, but are gone again. I’ve still yet to see them on my mobile page. Is there a clue in that they’ve displayed once each day so far?

    • Peggy Newsom says:

      My problem of only having the ability to view the reviews on my page one time each day is resolved! Google is trying to migrate everyone to order review data from the My Business API, so that’s where I had created my project to get my key. I referenced my allotted quotas and it showed I was only allowed 1 viewing per day for the Maps API, which is where this code is directed. I created a new project based on the Maps API, added the Places API to it, then created new credentials for it. After replacing the old key with the new one, the issue was corrected with a new unlimited quota. Yay!

      This code is so awesome! Much thanks to the developer!!!

  • John says:

    Hi there. Nice article. ill embed the reviews from google bussiness, in my site asap. (i hope this is still valid and can be done)
    id like to ask, after i do that, if i can also add schema for aggregate rating, in my homepage. (my site is about a service i provide, and the best place to add it, is my homepage where is all the info about it.). will that be ok you think?

  • Sunitha says:

    Hey Hi,
    It’s working very well. But I need average of all the customer ratings. Will it be possible? If yes may I know how can I acheive it?

  • Jeremy says:

    Hi,

    Great article! It works shows up great on my website! I had a quick question. Is there a way to get the 4 most recent reviews on the page every time? The code does not seem to update the 4 most recent and just posts the ones that were the most recent when I added the code.

    Thanks!

  • admin yws says:

    hi is there a custom css to make the layout more up to date. i have everything working thanks for the code. just the layout i wanted to change.

    • Administrator says:

      Yes you can add your own CSS. I purposely made the styling pretty simple with that possibility in mind. So styling to your liking shouldn’t be hard if you’re familiar with CSS.

  • Eitan says:

    Hi, great work, thanks for this.

    Is there a way to add reviews for more than one location?
    We have 4 branches each with their own places page / ID.

    I’ve tried using the same API key, creating new ones, even tested using the same location twice but I can’t seem to get 2 lots of reviews on the same page.

    Have I missed something?

  • Bhaskar Dhone says:

    I need reviews which has comments only. Is there any filter to achieve it ?

  • Raj says:

    I understand that google now requires a credit card to activate the maps API key. My question is that we are only going to be displaying the reviews and not any maps – so will we still get charged by google for using the API ?

  • Bradford says:

    Worked great. Just had to comment out the jquery used in my current template, thanks!!!

  • Peter says:

    Great article, very easy to follow.

  • Ed Barnat says:

    Thank you sooooooo much.

  • David Kim says:

    Would it be possible to create a form of sorts for submitting Google Mr Business / Places reviews from third-party sites or apps?

    I.e. Let customers submit Google reviews directly from your pae

  • Cliff says:

    Unfortunately, I cannot get the code to work on Shopify.

    I’m using the code with my activated API key and Places ID.

    Here’s how it renders on my Reviews page: https://fatheadcycles.com/pages/reviews

    Interestingly, 5 minutes ago – as I was writing this it showed some basic text from the Google reviews on the above referenced page and now I just checked and the page is completely blank so I’m not sure what happened.

    Obviously, something is wrong, ha. AND, disregard the /pages/ in the URL – I know, I know – it’s terrible but you can’t remove it from the URL structure in Shopify.

    Please help!

  • Fabrizio says:

    Hi, the script have some problem. When in the page there is a maps from google maps there are some conflict and the review are not show.
    Can you fix this problem?

  • Rishi says:

    Hi Steve,

    Thank you for doing this! Is there a way to implement this feed into a Wix website?

    I’m trying to get our reviews about our suture removal kits live on the site and I seem to be only able to find static solutions.

    Thanks!
    Rishi

  • Aeldan says:

    Hi Creator,

    Thanks for this Great script.. i’m using it in my company website (wordpress) http://www.cheekymonkeys.com/
    I only have one concern.. I am only able to display maximum of 4.
    My settings are like this:
    min_rating: 4
    max_rows: 6
    We have more than 50+ reviews on our page

    • Administrator says:

      Hi Aeldan,
      The Google API only allows you to display 5 reviews. It automatically picks what it considers to be the most “relevant” reviews.

  • Fabrizio says:

    Not working. This code is out of date?

    • Administrator says:

      No, the code isn’t out of date. However, it can be easy to overlook vital steps, sometimes. For example, you have to activate your API key (which isn’t automatic).

  • XEQTER says:

    Unfortunately not working with my Jimdo Website.
    I added the code but nothing is appearing? Can anyone help me?

  • Rich Roberts says:

    Just wanted to says thanks. This worked perfectly

  • Bas says:

    Great article & method. Is it possible to change the fact that the reviews are now being retrieved by “most relevant”? I want to change it to “most recent”.

  • Doug Watt says:

    Thank you , Steven. This is a great tutorial. I am working through it now and have it displaying on a “test” page on a site. I’m still playing with a few suggestions that have been made by others in these comments, eg how to include the reviewer’s pic.

    The one thing that I can’t find in anyone’s comments, is a neat solution to the problem of lengthy reviews. Can you suggest a way to shorten the text and add a “Read More…” line?

    Many thanks,

    Doug
    ====

  • AS says:

    Hello!

    Script is wonderful. But there are some difficulties for non-english speaking users.
    Is there any ideas how to add to the script google automatic translation of reviews, similar to the one that is implemented in maps.google.com?

  • Gene says:

    I’m getting the following error, anyone else having problem with it?
    Uncaught TypeError: Cannot read property ‘sort’ of undefined
    at sort_by_date (google-places.js:138)
    at renderReviews (google-places.js:166)
    at google-places.js:62
    at google-places.js:132
    at places_impl.js:19
    at places_impl.js:17
    at places_impl.js:9
    at common.js:54
    at common.js:15
    at common.js:54

  • Ankit Maliya says:

    Hello sir,

    i got review but that review is your website http://www.eznettools.com/ but i want my website reviews on my site

    • Administrator says:

      Hi Ankit,
      You need to change the place ID to your company’s place ID. If you need help, the article explains how to do this.

  • Edvins says:

    Hi! Thank You for the solution!
    I do it as written, get an own API key. Its work approx 1h after that don’t show anything. Some idea what can be wrong? ( http://www.millerline.co.uk/feedback ).

  • I’ve noticed that the code as published for me is displaying reviews but not updating them since March 11th I have my own activated api key. Is there something that has changed?

    • Administrator says:

      The Google API doesn’t necessarily show the most recent reviews. It shows what it considers the “most relevant” reviews. So you won’t always see it change, even if you’ve received more reviews recently.

  • Josh Crow says:

    Hey,

    Just a heads up, I think something might be wrong,

    This code was working earlier today, however, it just went down for me on multiple sites.

    I’m investigating what might be the issue if its on my end, google chrome reports: Uncaught TypeError: Cannot read property ‘sort’ of undefined

  • Hello, thanks for your tutorial !

    For information, you can find your place ID by searching on going to : my-business/content/faq#associate_locations_using_placeid_1

    It seems that your system has not been running for a few minutes while before it worked fine, is this normal?

    Thanks on advance.

  • Has anybody else been noticing the reviewer names recently stopped being displayed – now just says “a google user” for everyone’s review? Other than that, this has worked great for me – reviews display beautifully and update automatically. Thanks so much for creating this!

  • Mar says:

    It worked perfectly. Thanks for taking the time to put this together.

  • Sean says:

    Got reviews working. Want to get hours, address, map, website to work and found sample code on the plugin’s website yet I can’t get them to show for a valid business ID that definitely has the data.

    Using: , render: [‘reviews’,’staticMap’,’hours’,’address’,’phone’]

    Any experience with this other stuff?

  • Serena Burks says:

    Hello,

    I was really excited to find this article because I’ve been fighting to get Google reviews on my client’s website for a month. I copied the code, swapped out the Place ID and API key, and I’m not getting anything to show. Using Squarespace for this client as it’s what she started with, I’m guessing it has to do with them as opposed to this code, but any ideas? I’m beyond frustrated! Thank you! (The site given with my comment is my own, not the one I’m working on!)

    • Hector says:

      I tried it today and got the same result. I even tried the original code to see if I did something wrong. I’m using WordPress.

      • brigitte says:

        Same result here with wordpress. I have my own API key and i have place ID right but still doesn’t show up anything.

        • Administrator says:

          I know the code works in WordPress, but you can’t just stick the whole thing in the middle of a post. I recommend using a plugin that let’s you add head-code to your page. Put everything except the first line in the head-code. Then put the “div” tag (the first line) in your page where you want the reviews to show up.

          Also, WordPress already has jQuery loaded by default, so consider removing the line that calls the jQuery script.

    • Administrator says:

      I haven’t used Squarespace, but I know that some systems will sometimes malform code. Often, these types of editors have a specific way you’re supposed to enter HTML code (if you don’t want it to be reformatted).

  • Lindy says:

    THANK YOU for posting this – so helpful and I’ve put it in action on my Reviews page here:
    http://www.modernprints.co.uk/pages/reviews
    The only thing I can’t work out how to do is remove the comma after the reviewers name…

  • Ravi Sinha says:

    Thanks for your post!. I used it on my website and also incorporated the profile pictures of the people(modified your javascript by 1 line!). You can see it live at my website . http://www.one3appstudio.com

  • I found that I needed to Enable the “Google Places API Web Service” to get this working.

  • I followed all of the directions as far as deleting the line of code, the API key and the my places ID. I use WIX and I chose to add HTML code. I pasted the edited code into the box and I get nothing. It is blank. I’m not sure what I am doing wrong.

  • mike says:

    Returning error SignedInNotSupported, the signed_in parameter has been deprecated. Any chance you could update the guide for implementing oauth2?

  • Dan says:

    Okay so the code technically works but how it is presented is awful. I wanted a way to get the look and feel of google reviews on my website. Is there anything you can suggest to improve how this is presented?

  • Dennis Douma says:

    Dear script creator,
    Hi, after fighting Joomla to stop removing code inside articles, I have got the reviews to work. Unfortunately they are showing at the top of my page, above the header section instead of embedded in the article. I still notice that Joomla is removing the reference to the stylesheet although I doubt that is the issue.
    Can anyone advice on how to stop this from happening?
    Best Regards

    • NixieRae says:

      It’s probably late… but for you, or anyone else reading this. For Joomla we just used a Custom HTML module and it worked very simply. No code stripped, since it is a box made just for code. Insert it into any position.

  • Gino says:

    Just checked on browser – 3 errors:
    1. js:99 You have included the Google Maps API multiple times on this page. This may cause unexpected errors. – I do not have any others – just this code on this page
    2. Google Maps API error: MissingKeyMapError – I removed one from map from completely different page – so now it’s showing that I’m missing one
    3. Google Maps API warning: NoApiKeys – same as above
    I think the first error is strange and I cannot explain it – checked the entire site and have no plugins for reviews plus removed API key from maps page

    Could you please help?
    Thanks

  • Lyndon B says:

    I can’t get this code to work at all. I’m on a Drupal site and have the code adjusted to work with my API and place ID. I get an error on the console like this
    “google-places.js:53 Uncaught TypeError: Cannot read property ‘sort’ of undefined
    at sort_by_date (google-places.js:53)
    at renderReviews (google-places.js:74)
    at google-places.js:28
    at google-places.js:47
    at places_impl.js:16
    at places_impl.js:14
    at Zm. (places_impl.js:7)
    at common.js:54
    at nn.f (common.js:14)
    at Zm.j (common.js:54)”
    This is like the only code out there that I can find that comes close to what we want to do. Any help??

  • Mike Schaler says:

    Trying to use the google reviews embed on a godaddy website builder. I can see the reviews populate the home page in the site builder but when I publish them there are no reviews. I embeded the reviews at the bottom of the page just above the footer.

  • Amanda says:

    Hello, thank you for sharing this amazing code!

    It works perfectly. However, I noticed that it is showing a date on the right side of the comments session. Here’s a printscreen https://screenshots.firefox.com/ps0rH0gemnRCFEi2/snowbirdvacation.com

    I was wondering if there’s any way to take it off.

    Thank you!

  • kenny says:

    Hi, your code works great! I can see the reviews fine….however, it doesn’t seem to update when I get new reviews…I’d like to show off the most recent reviews…any help would be appreciated!

  • shamsher says:

    Hey Please help me. I am not able to get my site reviews using this script.
    My Place id: ChIJG52QT2FxhlQRkR54MDSZr3c

  • Hi,
    I activated both ‘Google Places API Web Service’ and ‘Google Maps JavaScript API’, but in the dashboard the latter seems not requested….
    No javascript errors are shown, except ‘rays = undefined’.

    Looking with console at plugin.place_data, I see all data, that I can expect, except there is no ‘reviews’ field.
    There should be at least one review (which I created myself).
    Could it be, that my own reviews are not ‘relevant’? And that that’s why I’m not getting any reviews back?

    For the rest, it looks like a great tool! So I hope to get it up and running!
    Thanks!

  • Hana says:

    Your working example doesn’t seem to be working, I’ve also tried with my own Place ID and API key (activated). Can you shed some light on how I can get this to work? Thanks.

  • Gus says:

    Hello, I have concluded this endeavor with a series of multiple failed attempts. I use website-editor.net and had to use a different place finder site to locate my business beings that it has a hidden address and rather encircles an area. Each attempt at posting your code with my place id and key ends in nearly ruining my website, it shows nothing and if I hit refresh it’s stuck in an endless loading loop. I have to spam the refresh and stop loading option to find a sweet spot where I can choose a settings cog and revert to a previous back-up. What’s the deal?

    • Administrator says:

      I’m not sure why you’d be experiencing something like that. Nothing in the code should be able to break your entire website… unless maybe, you put the script tag in the header and didn’t close the script tag. Then your website would assume the entire page is part of a script, and not render anything.

  • Hendrat says:

    Hi, is it possible to show the reviewer photos?

  • Chris says:

    Great Tutorial!! I can see the reviews show up in DW when i’m testing live but once I push it to my server and check my website on my phone nothing is showing up.

    Any idea on what is going on?

    Thanks,
    CP

  • Jeff says:

    I’ve followed your tutorial and enabled both the maps and places api’s but it’s still showing up blank. Do the api’s need to be authenticated to the domain for this work?
    Also I looked at the code in the inspector and I see the structure is there but there’s no data being pulled in.

    • Administrator says:

      Hi Jeff,
      It doesn’t have to be authenticated to the domain (unless you set it up that way, on your API key).

  • Ken Davies says:

    Hi. I can’t seem to get this to work. I want to place on wordpress page within Visual Composer. I have changed the code to get my own places ID and a new API key. When I place in RAW HTML block inside VC it won’t save and the same if I try it in a text block. Not sure what to try next

  • John says:

    No luck with the script (unfortunately)
    Activated the API and placed in the right place.
    Tested on several browsers and just get blank screen.

    • John says:

      Did more research. I checked the ellisdental.com as a reference site.

      The reviews for Ellis Dental do not display on a Mac with any browser, but are displayed on an iphone and on a Windows platform.

  • Varshan says:

    Excellent guide, thank you for sharing.

    I am trying to add the reviewers image too but with my limited js knowledge wasnt able to, while using fetch/httprequest to get the json containing url for the image been resticted with cross domain request issue.

    Any pointers would be appreciated

  • Varshan says:

    Thank you for the excellent code all works fine. Wanted to display reviewers image where available but was unable to with my limited Js knowledge tried fetching within your code using google + api but learnt of cross domain restrictions. Any pointers would be appreciated

    Thanks
    Guru

  • Sumit says:

    Hi,

    Is there any way that I can display more than 5 reviews. Currently, I am able to show only 5 reviews.

    • Administrator says:

      Hi Sumit,
      No, the limit is 5 reviews. This is a limitation set by the Google API. It shows the 5 most relevant reviews that you have.

      • Ben says:

        How does it choose the “most relevant” reviews. Is it possible to just have it show the 5 most “recent” reviews?

      • Sumit says:

        Is there any way to see “Most Recent” reviews instead of “Most helpful”.

  • You Rock! Simple cut/paste, find my google places ID, request/activate my API key, and Viola! I’m using Clickfunnels as my page builder, and after I changed one setting (needs to be “3rd Party Embed Codes” vs “Regular HTML/JS” in the Custom Javascript / HTML settings) it worked perfectly! Up and running in 10 minutes thanks to all your research, coding, and instructions.

    Thanks so much for the simple, detailed instructions, AND the updates as things change.

  • MARIO says:

    https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js

    your place IS is there! I can only display your place!

  • MrWebmaster says:

    I was able to make it work on the fly. No wthe question is, how do we put these reviews in a slider? with controls? is there a code that I can follow ?

    • Heather says:

      This was something I was looking for as well.
      We’re you able to ever figure out a way to make the reviews in a slide with controls?

      Thanks in advance! 🙂

  • Philippe says:

    Hello,
    I’m posting this message because I tried to add the code to my site on the homepage with your code and nothing showed up.
    Then I tried the code with my API key and place_id, same result.
    I’m using joomla and easyscript to place the script in a module position.
    I have only 2 reviews, 1 of them is 1 week old. The API was activated couple hours ago.
    I tried with and without calling the jquery.min.js file.
    Any hep would be much apreciated!

    • Administrator says:

      Hi Phillipe,
      I’d recommend experimenting with the on Code Pen. Here’s a working example of the code that you can play with: https://codepen.io/stevenmonson/pen/EmXOaw

      The code should work on most platforms, but if any of you are concerned that your platforms (like joomla, or Shopify, etc.) are the reason the code isn’t working, try experimenting with the code on codepen.io to see if you can get it working there.

      • Gino says:

        Hi Administrator,
        I followed your instructions, however still getting empty page:
        1. Activated API
        2. Got ID
        3. Using your example with html you provided in https://codepen.io/stevenmonson/pen/EmXOaw

        Getting nothing – blank screen – except the “Need to find your place ID? ”
        Using Macbook/chrome/WP but tried on windows – same
        Could you please help?!

  • Josh Crow says:

    First, I’ve been using this on my site for months and I love it, thank you for sharing it with all of us,

    I have recently began getting an error “SignedInNotSupported” with a google search revealing that “The signed_in parameter has been deprecated and is not supported on the version of the Google Maps JavaScript API you are using.”

    I only started looking for errors because my reviews haven’t updated since October 31st, I’ve received 3 5-star reviews in that time. Those 3 reviews are short (30 words or less)

    So do you think the error is preventing the script from updating the reviews as they come in?

    • Administrator says:

      Hi Josh,
      Probably not. The Google API works shows what it considers the “most relevant” reviews, not necessarily the “most recent” ones.

      It won’t change every time you get a new review, but it will change from time to time, as the algorithm decides one review is more helpful than another.

  • alessandro ferro says:

    hi thanks for this great article. I embed the code in the home page of my site, the code shows the reviews but not the stars?
    can you help me?

    • Administrator says:

      It’s hard to see without seeing it…

      If the stars aren’t showing up but everything else look correct, there could be some kind of character encoding issue with your website.

      If the text is plain (doesn’t show up in boxes like the example) then there’s probably an issue with the CSS not loading.

  • Robin Eyre says:

    Thank you. I was looking for hours!

  • Shane Dunn says:

    Hi Steven,

    Thank you for the very detailed guide. For some reason no matter where I place the code I can’t get anything to appear. I’ve tried to get this working on a couple of my clients sites using Magento & WordPress. This is also using your code exactly as posted above and with our own API Key Place ID.

  • sarah says:

    Hi,
    This solution is exactly what I need, but I cannot get the code to work. I have also noticed that on all the example websites mentioned in the comments where the reviews should be working, they are not working there either. Has something gone wrong with the code?

    • Administrator says:

      Hi Sarah,
      I’m not seeing any problems at the moment. Not sure if there were any issues yesterday, but the example is working perfectly from what I can see.

      Can you currently see the example above?

  • Robbert says:

    It took me some time, because of some conflict wiht a Google map, but in the end it worked briliantly. At least with the place-id from the example.
    Now I replaced it with the place-id of a client, but I do not see the review on the website. This company, that just opened, has so far one review that it got yesterday. Do I have to be a bit more patient or change the script in case of fewer reviews than 4?

    • Administrator says:

      Hi Robbert,
      Yes, if they just got their first review yesterday (and it’s working with the example place ID) I’d say to just wait a little.

  • Djamel says:

    Thank you for this very good job.

    I customized css to add a very small google logo above each review.
    It looks more official in my opinion. for those interested, add this code in the css file.
    .review-meta:before { content: url(‘http://edit-your-own-img-path.png’); display:block;}.

    I downloaded the js file to host directly. Do you think it’s a good idea or is itbetter to call your js on your server ? Thanks

    • Administrator says:

      Sounds good. I have no problem with people modifying the code to suit their needs. It doesn’t really matter if you host the js file yourself or use the link I supplied (as long as it works).

    • nour Graphic says:

      I tried it but its not working!
      .review-meta:before { content: url(‘http://edit-your-own-img-path.png’);

  • Justin Ellis says:

    Hello,
    Thank you so much for taking the time to research and post this integration with Google. A very powerful tool indeed! I activated my API key, updated my code to include the key as well as my location ID and inserted it into my site (via SquareSpace). I am seeing the reviews however it appears to be inconsistent. Sometimes they appear in Chrome but not in Safari. I am not quite sure what is causing this. In fact, they do not appear outside of the browser that I am using to edit the page.

    Any help would be greatly appreciated. I would be happy to share the URL to the page. https://www.ellisdental.com/testimonials/

    Best,
    Justin

  • Erwin says:

    Hi Steven,
    It works like a charm, however, with more then 5 reviews on google places, it does not show the most recent ones, is there a way to get the 5 latest reviews?
    I have the impression that the code gets the reviews, google gives 5 reviews and then the code sorts them by date, but it are not the latest reviews…

  • I tried this but did not work.

    I have replace the API and Place ID. Also, I have activated the API.

    Please help me out for the same.

  • Adrian says:

    This is fantastic! THANK YOU!
    Can Google read the content in the reviews to impact search engine results, or will the reviews appear as an image without any text to Google?

  • Kylie says:

    Hi I added this and got it to work after activating the API. Thanks, however…
    What I would like to do is be able to see 5 across, at present I can only get 5 over 3 rows. Additionally the font used is rather unnatractive, can you please advise how I can code in a cleaner font type? I tried a couple of things to no avail. Thanks in advance 🙂

    • Administrator says:

      By design, the boxes will be next to each other (as long as there is enough room). If yours is on 3 rows it means the parent container isn’t wide enough to display them side-by-side.
      The presentation is really just a matter of CSS styling. Anyone familiar with CSS should be able to modify it (as I’ve kept the base CSS pretty clean and minimal).
      If it looks like there ought to be enough room, then something else in your layout is probably to blame, and you may want to have someone look at it with you.

  • Jen says:

    Hi,
    I’m having real trouble with this as I am not any good at computer coding. I changed the green text to our own API key and the red text to our own place ID but still the website page is blank. Where am I going wrong?
    Any help would be great,
    Thanks!

  • Jason says:

    I’m doing something wrong. The javascript console is telling me that .googlePlaces is not a function. Am I doing something wrong? I have the api key and everything in the code.

    • Administrator says:

      Hi Jason,
      Did you activate the API key? There are some instruction above on how to do that.

  • Derek says:

    Hey!

    So the reviews left are quite long, which ends up making the reviews area very long when scrolling the page. Is there a way to make each review box scrollable?

    Appreciate the help!

    Derek

    • Administrator says:

      Yes it’s possible. Using CSS code you can put a max-height on the boxes, and tell them to scroll when the content is longer.
      Try adding this to your CSS file…
      .review-item {
      max-height:14em;
      overflow:auto;
      }

      You can adjust the max-height to better suite your needs.

      • Justin says:

        Hi,

        I’m wondering where I’m able to add that code to my CSS file?
        Can I insert it in the code lines you provided?

        I’m on Webflow.

        Thanks for your help

        Justin

  • Richard says:

    Thank you for writing this article! Very helpful and useful. I noticed that a lot of people could not get it to work and I think if you edit your article and tell people to Enable the Google Maps JavaScript API it will solve most of the problems people are having. Go to the Google API Console Dashboard and (https://console.developers.google.com/apis/dashboard) select from left menu “Library”, then “Google Maps JavaScript API”, then at the top “Enable this API”. Credit to Jay O. Thanks!

  • Dmitry Shapoval says:

    Thanks for the helpful article! Now our site also has testimonials, for example: https://go-to.rest/place/город-ужгород/

  • Steve says:

    Hi Chris,
    I created a test page with nothing else on it but this. I have my own API key, but I’m getting a blank page. I don’t know if this is related but I’m also seeing an error in my Javascript console.
    TypeError: ray is undefined[Learn More] google-places.js:53:11

  • caroline says:

    Hello
    I have tried everything with no success and I can not even get yours to work on the site, Is it because its a shopify site??
    I want to keep trying, because would love this option, think its great!
    It might not be possible, can you please put me out of my misery on this
    Thanks
    Caroline

  • Marcel says:

    Hi, thank you for all the good work. Nevertheless I don’t understand why you don’t use this plugin: https://wordpress.org/plugins/widget-google-reviews/

    I installed and activated it today and sofar it works fine. What’s the difference with the solution you’re suggesting?

    Thanks for your reply.

    • Administrator says:

      The biggest difference is you don’t need WordPress for this solution. For those that are, I’m sure that plugin probably works too.

      • Marcel says:

        Thanks for the explanation. Do you know if google gives penalties to those who embed reviews on their website? I’ve read about that but doubt it myself. People leave reviews to be read and businesses show of reviews because we all know the reasons. I’m just curious about your point of view.

  • Hi Steven,
    I read what you wrote but i don’t understand where I have to copy the code. I am not a pro with site, I am from Italy and I am using Divi from Elegant themes.
    Could you just tell me where should I copy the code?
    Thanks a lot

  • Is there a way to embed a specific review? I’ve been adding reviews from various sites to my “Testimonials” page, and providing a link back to the actual review (so people know I didn’t make it up).

    The way my WordPress site was developed, I need to be able to “Add New” under the “Testimonials” section, and I specify the individual review.

  • WR says:

    Thank you for this.
    Convincing my clients to ask their customers for a Google Review upon delivery of their goods was the hard part. Now (of course) the reviews are starting to come-in and they are thrilled. They learned (in most cases) their customers were happy to submit one. The real trick is to try to get them to do it before they walk out the door.

    Being able to show some of these reviews on their website lead to even more smiles and happier customers for me. Your directions for implementing your script was letter perfect and super easy which is not often the case.

    My first use: http://www.sewneau.com/reviews/

    Thanks again

  • Galina Ivanova says:

    Hi,
    It was great topic, but I still have a question. I have a site with a number of different places and I want to show Google reviews for every place, for example: a shop for toys and reviews only for that shop, under it I have a pub and reviews only for that pub. I hope it has become clear.
    Can you help me?

  • Kuldeep says:

    I would like to use it for abolsitsolutions.com/about-company/testimonials/ it is word press website if i insert code it shows nothing. i am using my own api key and place id but it is not working can you help me.

  • Jason says:

    I plugged this into my website a few months ago and used my business API, and it worked great. I looked at my website for the first time in a few weeks and it has stopped working. I didn’t change anything. What happened?

    • Jason says:

      It just shows as a blank section.

    • Administrator says:

      Due to the overwhelming popularity of this plugin, we are regularly exceeding the quota imposed by Google for this API key. You’ll need to get your own API key, going forward. There’s an explanation at the top of this article to point you in the right direction.

  • Hi guys,

    I really dont get it, cause the code used to work in the beginning and now it stopped working. Can anyone help me out? Its a wordpress-site and i removed the jquery already, as well I added my own api-key.. Console says: ApiNotActivatedMapError but i dont know what to do….

    Cheers!

  • Jay O says:

    If you are getting “SignedInNotSupported” error in the browser console, then remove the “&signed_in=true” from the script URL.

    If you using your own API key, but are getting “ApiNotActivatedMapError” error in the browser console, then in the Google API Console Dashboard (https://console.developers.google.com/apis/dashboard), select from left menu “Library”, then “Google Maps JavaScript API”, then at the top “Enable this API”

    • Richard says:

      Thanks Jay O! I could not figure out why it wasn’t working. It was because the “Google Maps JavaScript API” was not enabled! I followed your instructions and enabled it and VOILA! It works! Thank you!

  • Sinan K says:

    Hi, I appreciate all the time taken to set up this tutorial, it seems like a lot of people have this set up and working, i’d like to know if there is any clarifications that you can give to the WordPress users. I’m sure i’m not that only one, but I have very limited knowledge with wordpress, and it would be great to have a walk through ? I tried the instructions given, and got my own API key and Places ID, copied the text and replaced the Green and the Red text with my own credentials, but still got nothing once i updated the site. Any help would be greatly appreciated. thank you again for all the work that already went into this.

  • Darren says:

    Just what i was looking for, Works a treat 🙂

  • Christian says:

    I’m curious if there is a way to pull more of the meta such as the user’s mini photo / icon and if possible to use this in a carousel to show all reviews but limit to 3 at a time and scroll to get more (I’m guessing not with this one as it’s limit is 5).

  • And the linked CSS file is not valid CSS as it contains // commented code. Which is fine in SCSS or LESS but not in CSS.

    • Administrator says:

      Thanks for the catch. That’s fixed now. Though it wouldn’t have caused any actual problems with the code working (a point I make mainly for the non-coder who are reading this).

  • The code at https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js contains some errors. I’ve corrected them below. Errors were: missing semicolons, wrong semicolons, wrong end of line in object literal.

    (function($) {
    
        $.googlePlaces = function(element, options) {
    
            var defaults = {
                  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
                  render: ['reviews'],
                  min_rating: 0,
                  max_rows: 0,
                  rotateTime: false
            };
    
            var plugin = this;
    
            plugin.settings = {};
    
            var $element = $(element),
                 element = element;
    
            plugin.init = function() {
              plugin.settings = $.extend({}, defaults, options);
              $element.html(""); // create a plug for google to load data into
              initialize_place(function(place){
                plugin.place_data = place;
                // render specified sections
                if(plugin.settings.render.indexOf('reviews') > -1){
                  renderReviews(plugin.place_data.reviews);
                  if(!!plugin.settings.rotateTime) {
                      initRotation();
                  }
                }
              });
            };
    
            var initialize_place = function(c){
              var map = new google.maps.Map(document.getElementById('map-plug'));
    
              var request = {
                placeId: plugin.settings.placeId
              };
    
              var service = new google.maps.places.PlacesService(map);
    
              service.getDetails(request, function(place, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                  c(place);
                }
              });
            };
    
            var sort_by_date = function(ray) {
              ray.sort(function(a, b){
                var keyA = new Date(a.time),
                keyB = new Date(b.time);
                // Compare the 2 dates
                if(keyA  keyB) return 1;
                return 0;
              });
              return ray;
            };
    
            var filter_minimum_rating = function(reviews){
              for (var i = reviews.length -1; i >= 0; i--) {
                if(reviews[i].rating  0)? plugin.settings.max_rows - 1 : reviews.length - 1;
              // make sure the row_count is not greater than available records
              row_count = (row_count > reviews.length-1)? reviews.length -1 : row_count;
              for (var i = row_count; i >= 0; i--) {
                var stars = renderStars(reviews[i].rating);
                var date = convertTime(reviews[i].time);
                html = html+""+reviews[i].author_name+", "+date+""+stars+""+reviews[i].text+"";
              }
              $element.append(html);
            };
    
            var initRotation = function() {
                var $reviewEls = $element.children('.review-item');
                var currentIdx = $reviewEls.length > 0 ? 0 : false;
                $reviewEls.hide();
                if(currentIdx !== false) {
                    $($reviewEls[currentIdx]).show();
                    setInterval(function(){
                        if(++currentIdx >= $reviewEls.length) {
                            currentIdx = 0;
                        }
                        $reviewEls.hide();
                        $($reviewEls[currentIdx]).fadeIn('slow');
                    }, plugin.settings.rotateTime);
                }
            };
    
            var renderStars = function(rating){
              var stars = "";
    
              // fill in gold stars
              for (var i = 0; i < rating; i++) {
                stars = stars+"";
              }
    
              // fill in empty stars
              if(rating < 5){
                for (var i = 0; i < (5 - rating); i++) {
                  stars = stars+"";
                }
              }
              stars = stars+"";
              return stars;
            };
    
            var convertTime = function(UNIX_timestamp){
              var a = new Date(UNIX_timestamp * 1000);
              var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
              var time = months[a.getMonth()] + ' ' + a.getDate() + ', ' + a.getFullYear();
              return time;
            };
    
            plugin.init();
    
        };
    
        $.fn.googlePlaces = function(options) {
    
            return this.each(function() {
                if (undefined == $(this).data('googlePlaces')) {
                    var plugin = new $.googlePlaces(this, options);
                    $(this).data('googlePlaces', plugin);
                }
            });
    
        };
    
    })(jQuery);

  • Jason says:

    Great Script! It worked great, and I also added the “see all our google reviews” and the “leave a review” buttons on my website aswell. Just so you know, I use/used Sitebuilder.com to build my site, which was really convenient to use. The only part I am kinda unhappy about (but in no way complaining) is that there is 1 really long review that makes my testimonial page kinda look weird. I had to make the html element really big in order for all the reviews to show up.
    You can look at it here:
    SouthStrandApplianceService.com/testimonials

  • Just get a blank page.. Activated API and double checked ID… Even created a seperate page just for this but nothing…

  • Russ says:

    Well, couldn’t get it to work. Got a key. Not sure how to activate it. Didn’t see a place for activating on the API website. Created a blank page and inserted your code with my id & key. still nothing.

  • Yakup Trana says:

    FYI
    I changed the row number setting in the code but still not able to see all the reviews.
    It shows only 5.

    • Administrator says:

      This is actually a limitation of Google’s API. They only allow up to 5 reviews to be pulled.

  • Yakup Trana says:

    This was one of the most helpful instructions I’ve seen on the web. Thanks a bunch!!

  • lucie says:

    Hello

    I can’t get our Google Reviews to dsplay properly, would someone be able to help? I have created our own API too and it’s still not making a difference.

  • Administrator says:

    It’s hard to tell for certain from the screenshot, but you might be having some kind of conflict with another script on the page. Try isolating the script alone on a page and see if it works.

    If it does, than you’ll need to figure out which script is causing the conflict by slowing introducing new elements until it breaks.

    If it doesn’t, try working on it in isolation to see if you can get it working.

  • Jeff Penner says:

    Hello. Thanks for this. Got it working after a bit of tinkering. Don’t know if this has been covered, but is it possible to make the reviews displayed random in the jquery file and still be 4+ stars?

  • Dany says:

    Hi I cant get this to work on a wordpress website, I have updated the place ID and the API Key, I also tried using the code the way you have it and only updating the API key and not the place ID but still does not work.

    I am pasting the code in a row/content area on the page I would like for it to display using Visual Composer and adding a text block/html code.

    Am I supposed add anything to the server or something like some people have posted?

    • Administrator says:

      Hi Dany,
      You don’t need to add anything to your server.

      Did you activate your API key? Someone else had that problem.

      It’s impossible to say, for sure, without seeing the actual page.

  • Dominic Hawes-Fairley says:

    great code and it worked just fine. Then I decided to heed your warning and get my own API key, but I can’t get it to work with my API key. I cut and pasted it from Google into the right place, but it’s just coming up blank?

    Any ideas?

    http://www.amsys.co.uk/about/amsys-poland-street/

    • Administrator says:

      I looked at your web page and opened up the developer console. It showed a couple of errors…
      “You have included the Google Maps API multiple times on this page. This may cause unexpected errors.”
      and…
      “Google Maps API error: ApiNotActivatedMapError “https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error”

      This suggest that you didn’t activate your Google Places API. Also, you may have put the same code multiple times on the same page (which you shouldn’t do).

      • Dom says:

        Thanks I’ll look into that now!

      • Dom Hawes-Fairley says:

        So, I’ve obviously got some stray api code in one of my header files- thanks for finding that for me 🙂

        I think I must have done something wrong with setting up my key as the same code/page works perfectly with your key, even with the other API code. Hmmmm scratchy head.

        Thanks anyway. Dom

  • Hi, thanks, it works well in my store , which is hosted on shopify. However the Tiles on the top , that lead to different collection pages, stop working. But when I comment out the code the tiles work again to show the dropdown. any leads?

  • Cameron says:

    Awesome code! Thanks! I am having some problems with it. It works, but very randomly. I did try using my own API Key, but that seems to not work either. Any ideas?

    The page I’m doing it on is:
    https://www.wittpm.com/testimonials

    • Administrator says:

      Is it not working at all with your own API key? Or just some of the time?
      If it’s not working at all, you may have pasted it incorrectly. If you remove the “&” at the end or leave out one of the letters, it will not work.

  • Jonny Akamu says:

    Hello I think I got it to work. But it’s just text. How do I get it too look like the one you have?

    • Administrator says:

      Hi Jonny,

      Most likely your CSS stylesheet isn’t loading. Make sure you have this line included in your code…

      <link rel="stylesheet" href="https://cdn.rawgit.com/stevenmonson/googleReviews/master/google-places.css">

  • Mark says:

    Hi there,
    This is great, thank you very much!

    I’ve managed to get everything working apart from the schema data.
    I tried to use , schema: {
    displayElement: ‘#schema’ // optional, will use “#schema” by default
    , beforeText: ‘Googlers rated’
    , middleText: ‘based on’
    , afterText: ‘awesome reviewers.’
    , type: ‘Hostel’
    }
    but to no avail!
    Do you know of any way to make this work?

    Cheers!

  • Garry says:

    Hi there,

    Great work, thank you – though layout is out in Safari on my iMac! Elsewhere I’m correctly getting 5 reviews in a row, though on Safari I get 5 rows of 1 (as if I’m viewing on a phone). I’ve tried on multiple Macs in Safari and get same result. I’ve tried and failed to tweak your css so any chance you could take a look please?

    Ta,
    Garry

  • Mike says:

    Hello,

    I cannot get this to work. I place the code in my wordpress page and update the API with my own as well as the google place ID….and my page is still blank.

    A little help please and thank you 🙂

    • Administrator says:

      Hi Mike,
      I had the API key highlighted in green earlier but I made an update the other day and forgot to change the color.

      Take a look above and see the green text. That’s the API key. Replace that part with your own and the code should work.

      Let me know if you have any questions.

  • Karissa says:

    Love your code! However, I’ve been affected by the API Key overload, too. I created my own key, but still can’t get it work. Could you verify which part of your code I am to replace with my own key? I think it’s just the part below, but I’m not certain. “AIzaSyC2fMEMuEPYcktMmZei-LVTqfRE1_NMyqQ”

    • Administrator says:

      Hi Karissa,

      I’ve highlighted the API key in green (above). Take a look and replace the green text with your API Key.

      In your case, it will look like this…

      <script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyC2fMEMuEPYcktMmZei-LVTqfRE1_NMyqQ&signed_in=true&libraries=places”></script>

  • Andrew says:

    This is just what I want, thank you. But I cant get it to work 🙁 We have 90+ google reviews that we’d like to show off. Our address is nosh.co.nz … I tried to install it here: nosh.co.nz/testimonials/

    Appreciate any help you can provide.

  • Marty Shue says:

    Hi Steven,

    Thanks for the great tutorial. We took your information and added it to some of our concepts and came up with this [link removed] (our reviews page). Thanks for pointing us in the right direction on how to get the reviews from Google. Your solution really is the ONLY correct one out there.

    Couldn’t include the link as your filter kept saying it was spam. Well, it is not.

    • Administrator says:

      You’re welcome! I’m glad I was able to help! Sorry the spam filter wouldn’t let you post the link.

  • Jeremie says:

    Hello,

    I see that on the script there is a rotateTime argument.
    How do you use it? Is the functionnality available?
    Thanks for your replay.

    • Administrator says:

      Hi Jeremie,
      The “rotateTime” argument allows you to play the reviews one at a time like a slideshow. I haven’t demonstrated it because having reviews switch out like that isn’t very user-friendly. It either makes people sit too long, or lack sufficient time to read everything. It’s better to show them all at once so people can read at their own pace.
      That said, if you’re interested in seeing how it works, take a look at this link… https://codepen.io/stevenmonson/pen/rwmwPO
      (the number following “rotateTime” is how many milliseconds each slide should be shown).

  • Jaclyn Morse says:

    Hello! Thank you so much for posting this article – there are so many other pages out there with incorrect information, this was tremendously helpful. I was able to add your code to my site, using my own Google API Key, however the reviews are not displaying the Name & the Date for the review. Unfortunately I am not familiar with CSS – any chance you can help?

  • Jack says:

    I visited my website today and noticed the reviews had disappeared. On a hunch, I signed up for, and implemented my own Google API key and the reviews reappeared.

    So, it seems your API key may have reached its quota – I guess you have a lot of satisfied people who’ve seen your code.

    • Administrator says:

      I have seen a steady increase in API Traffic, but I should be well within our quota limits.

      All the same, I’m glad that switching the API worked for you. Using your own API is probably the best way to go, anyway.

      I’d like to encourage more people to do that, especially if they have a high-traffic websites.

      • Administrator says:

        This is no longer true. We are exceeding our API quota. I strongly recommend getting your own API key at this point.

    • Administrator says:

      Hi Jack, It appears that yes, we are in fact exceeding our API quota. Google originally said the quota was 100 requests / 100 seconds which we were within, but apparently there is also another quota of 1000 requests per day (which they didn’t mention in the documentation I read).

      We are currently exceeding that 1000 requests per day quota. So I strongly recommend all users to get their own API where possible.

  • Audra says:

    Hi just wondering if you’d be able to assist me? I’ve copied and pasted your code with my own place code and it’s just coming up blank! Ive created my own API but am unsure of where to add it – would this fix the issue?

    • Administrator says:

      Hi Audra,

      If you want to use your own API key you need to update the part of the code highlighted in green (I just highlighted it above to make it easier for you to see). Replace that part with your own API key.

      However if it’s not working, double check your Place ID. I suspect it’s the more likely culprit. See if my default code works on your site. If it does, it’s probably the PlaceID that’s incorrect.

  • Jack says:

    Steve,

    I noticed that the list of reviews chosen for display by your program matches the partial list initially displayed on the Google Reviews page. However, on the Google Reviews website, when “All Reviews” is requested, there are additional reviews shown that are newer than those that appear with your code.

    Does your code only read from the list of “preferred” reviews initially displayed by Google, or do you have access to the entire list of reviews? If the latter, why wouldn’t it be showing the most recent ones (which fit the filter criteria).

    Out of curiosity, I went to your own Google Reviews for EZNet Tools. I noticed the same behavior. The reviews shown above are not necessarily the most recent ones appearing for your website.

    • Administrator says:

      Hi Jack,

      Unfortunately this is a limitation of the Google API.

      I’ve been doing some research and it appears that the Google API automatically sorts the reviews by “most helpful” rather than “most recent”. So far, Google hasn’t given us any option to change that.

      There is an issue tracker on the topic here…
      https://issuetracker.google.com/issues/35821903

      You’re welcome to go there and add your 2 cents. Maybe if enough people ask, Google will do something (or maybe not, but it couldn’t hurt).

      • Jack says:

        Thanks for that reply. Now that you’ve explained their logic, I actually don’t see any problem with that. Showing the “most helpful” reviews may be a way to prevent fan-boys and trolls from skewing the results.

  • Jack says:

    Steven,

    Just a followup from my previous comment. I looked at the source code for the javascript on your website and found the reason for the additional character. You have rendered the stars as an HTML list and used an “li” tag as a wrapper for each star. The unexpected character was my “bullet” character for lists. I modified my CSS to use no bullet character when displaying a list inside your code. I should now be able to upload your code onto my website.

    Thank you!

    • Administrator says:

      I’m glad you were able to figure it out! 🙂

    • Dustin Ranem says:

      Jack, could you explain further how you removed the bullet character? I’m having the same issue on a client’s site.

      • Administrator says:

        It occurred to me that you probably have some CSS on your client’s site that’s overriding the default behavior of the stars. Add this to your stylesheet and it should fix the problem.

        .review-stars ul, .review-stars ul li {list-style: none !important;}

    • onif says:

      Hi Jack and Steve,

      May I know the code to resolve this issue of other characters (bullet/dot) appearing behind the stars?

      I’m new to this css and html coding stuff.

      Thanks,

      Josefino

      • Administrator says:

        Hi Josefino,
        The supplied CSS code shouldn’t be showing any bullets. However, I’ll share with you the CSS that I’m using. Try adding the following to your CSS Stylesheet…

        .review-stars ul, .review-stars ul li {list-style: none !important;}

  • Jack says:

    Steven,

    Thank you for an absolutely excellent solution for embedding Google + Reviews. I needed to also download the CSS file and incorporate it into the website to make the display work ALMOST perfectly.

    I am having one small issue… When displaying the stars, there is an additional character being rendered to the left of each star, and I cannot figure out what is causing it. Until this is resolved, I won’t be uploading the finished code onto the website, however, I have taken a screen grab of the “preview screen” and stored it on the website so you can see what I’m talking about. It’s at southwindsorbarbershop[dot]com and the file is called googleplacesscreengrab[dot]jpg.

    Thank you again for this awesome work, and for any assistance you can provide.

  • Jeff D says:

    This is excellent and the guide is very clear. Thank you for sharing your code!

    If I had any requests, it would be to use jQuery to make reviews expandable/collapsible. Some people write lengthy messages, and it’s hard to design around unknown sized elements.

    I’ve been trying to incorporate a jQuery shorten plugin (http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/) but can’t get it to modify the review text. I’ve made the adjustments to select the right elements (class & element type) but the “more” links don’t appear.

    If you reply, please email me if you wouldn’t mind. Thanks!

    • Doug Watt says:

      Jeff, Did you ever get this “shortened text” idea to work? I have trawling through all of the comments to see whether anyone else has tried to do it.

      This is a great post that Steven has put together, but I’d love to be able to shorten some of the reviews and have a “Read More…” feature.

      Doug
      ====

  • Hi – This is an awesome tool – thank you.
    I am trying to get it to display more than 2 reviews (I prefer 4 if possible in columns across the width of the page.

    Can you recommend how to achieve this? I tried increasing the “max_rows:4” to 5 but this did not change anything.

    Thank you !

    • I have discovered the issue – it is now displaying 4 🙂
      However, it is producing a 2*2 grid rather than 4 columns….

      Is there anyway to get it into 4 columns?

      Thank you so much!
      Toby

      • Administrator says:

        Hi Toby,
        The reason you’re getting a 2×2 grid has to do with the size of your container (or possibly the size of your screen). By default it only shows all 4 in a row if there is plenty of room to do so.
        However, you can override this behavior if you’re familiar with writing CSS code.

  • Matt H. says:

    This is great! One question…does it embed the 5 most recent reviews and constantly update as new reviews are generated, or do you specifically choose which reviews you want to embed?

  • Chris Miller says:

    If anyone knows of the way to add that awesome “See all Google Reviews” button to this script, I would love you forever

  • Jared H. says:

    Thank you for the very simple and easy to follow guide for this complicated problem. I have wondered how I can get this feature on my website and you made my life 100X easier.

  • Brian says:

    Wow, great work to something I couldn’t find a solution anywhere for. Spot on1

  • Nicole says:

    Thank You! I never would have been able to figure out that coding by myself.

  • Administrator says:

    You can adjust the minimum required stars by changing the “min_rating” value. By default it’s set to 4.

    You can also adjust the amount of reviews it displays by adjusting the “max_rows” value. (However, you can’t show more than 5 due to a limitation in the Google Reviews API).

    • Chris Miller says:

      Can you add the script that includes the “See all google Reviews” button? That would be huge!!!

      • Administrator says:

        Hi Chris, I’ll have to look into that, and see if it’s part of the API.
        In the mean time, I know of a way you can do it yourself…
        1. Search for your company on Google (don’t use Chrome, because it won’t work correctly. Use Firefox or Edge.)
        2. Find your card (on the right side of the search results page).
        3. Click “View All Google Reviews”
        4. Copy the URL in the address bar.
        5. Paste the URL as a link on your website.

        There’s an example of this on our company website.. http://www.eznettools.com/

        Hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *