Update Oct 31, 2017.  I’ve notice a number of people have trouble were having trouble.  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.]

Update: June 29, 2017.  I’ve had so many people use this code that we’re now exceeding the quota for the API key.  If you’re having trouble, you can get your own API key here… 

Updated: May 23, 2017.  Code now works properly on HTTPS websites, loads faster, and less likely to cause conflicts with other javascripts.


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.

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.rawgit.com/stevenmonson/googleReviews/6e8f0d79/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.

 

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.

140 Comments
  • 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!

  • 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).

  • 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

    • Justin says:

      Howdy,
      Taking a moment to ask if anyone has any thoughts regarding this issue? Thanks in advance.
      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).

    • Administrator says:

      I know the Google API put’s a limit of 5, so as far as I’m aware, there’s no way to display more than that.

      As for displaying the user photo, I’m not certain, but if you’re interested in figuring it out, you could read Google’s API documentation.

  • 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.

  • 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?

  • Hi,

    Great solution! I have used it for some time on my company’s website but it’s no longer working – coming up blank. So what I did is got my own API key as suggested but after reinserting the code and clearing the caches it’s still blank. Is there a way you can take a look and let me know? My website is in Bulgarian language so it will be best if you take a look at what’s going on on this screen capture I did – youtube dot com/watch?v=7_7XQaEX6Rk

    • Administrator says:

      Hi Georgi,
      It’s hard to say for certain. But here’s a few things to check…
      Make sure you activated the Google Places API.
      Make sure you copied the entire API key (didn’t leave out any letters).

      • Hi,

        Thank you for your reply! I have taken a screenshot of the chrome console with the errors in it. Can you please take a look?

        prnt(dot)sc/g1a9d5

        Thank you in advance!

        • 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.

  • 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!

  • 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 *