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.
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.
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…
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
Other Helpful Resources
If you liked this article, check out some of my other articles…
Be Awesome and Share This…
If you found this helpful, give us a shout-out on Facebook or Twitter.
Text Article
323 Comments
Hello,
I think, the solution doesn’t work anymore? It worked, but now it suddenly doesnt anymore. Can u confirm that?
Many Thanks
Patrick
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.
can we get slide google review? possible?
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…..
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.
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!
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?
Hi Octavio,
I’m not sure what the problem would be, based on what you’ve told me. Were you ever able to find a solution?
No, I can’t. Can I contact you by email? Thanks
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.
Sorry for the late reply. Unfortunately, I couldn’t find anything about selecting languages in the the original plugin documentation: https://github.com/peledies/google-places.
But I did find this about Google’s API: https://developers.google.com/places/web-service/search
You can experiment and see if you can find a way to incorporate into the plugin.
I was searching for the same requirement today, i.e. specifying the language that I want the reviews to display in… and after a good hour of research, I found it 🙂
It is as simple as specifying a “language=xx” argument when calling the Maps API. Here is an example for German (language code: de) – please note, that I removed the script tag on purpose to due a security warning I got when sending it including the script tag:
src=”https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIza…..Q4&libraries=places&language=de”
*Documentation Links*
The parameter is mentioned here:
Google Developers > Places API > Place Details (https://developers.google.com/places/web-service/details)
The list of supported language codes (https://developers.google.com/maps/faq#languagesupport)
Hope that helps! 🙂
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.
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.
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?
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?
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.
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
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.
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.
Is there any way to make this show more reviews?
Hello, I did exactly all the steps but it’s not working? Do you have any idea why?
CSS is not working on my squarespace site, any help?!
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.
I’m glad it was helpful for you. Yes, feel free to clone it.
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!
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.hello,
any way to show reviews also written in english?
because this code shows only english reviews!
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++) {
There is a problem with the posted comment
Change to
if keyA less keyB return 1;
if keyA greater keyB return -1;
Seems this stopped working… I even checked your site and it no longer displays
Thanks
Steve
Same issue for me. I was so happy but it is all gone now! Anyone found a fix? 🙁
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.
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.
Thanks to your comment i figured out to make it work on my site!! Thanks a lot!!!
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
});
});
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!
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
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
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
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
Thanks a million for this article.
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
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!
Go to the Google API dashboard and search “Places” and “Maps”. Enable both APIs.
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
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??
Effective article to me. And its working perfectly for me. Thanks man for sharing this kind of helpful article. Appreciated.
is it free or chargeable
It is completely free!!! …..I have used this for my website. Check out at: https://www.itsconcepts.com
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?
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
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!
Hi Alie,
I can see the problem. Some CSS code on your website is overriding the normal CSS of the stars. Try adding this to your CSS to fix it…
#google-reviews .review-stars li {float: left;
}
Thank you very much! You’ve solved it 🙂
Where I should copy and paste ? when I pasted, the same script was visible on the website. Can i put as an html
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.
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?
Excellent article. However the linking process doesn’t work for me. Thanks for sharing.
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?
Hi Chris,
I just sent you an email with some thoughts and questions.
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
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.
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!
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.
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?
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. 🙁
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?
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!!!
Totally saved my day man. Thanks for the update
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?
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?
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!
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.
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.
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?
I need reviews which has comments only. Is there any filter to achieve it ?
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 ?
yes..
Worked great. Just had to comment out the jquery used in my current template, thanks!!!
Great article, very easy to follow.
Thank you sooooooo much.
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
Hi David,
Google doesn’t let you submit Google Reviews from your website. However, you can link to the Google results page, where people can leave a review.
Here’s an example… https://search.google.com/local/writereview?placeid=ChIJIXceQBxRO4gRvbBpEaJDq_Y
You can read about it here: https://www.launch2success.com/guide/find-any-google-id/
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!
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?
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
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
Hi Aeldan,
The Google API only allows you to display 5 reviews. It automatically picks what it considers to be the most “relevant” reviews.
where do you place the code on wordpress?
Not working. This code is out of date?
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).
yes my API is active and Place ID is correct how i can show you my code?
Unfortunately not working with my Jimdo Website.
I added the code but nothing is appearing? Can anyone help me?
Have you changed the two src links (like https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js) to your own website?
I had uploaded both the .js and the .css files, but hadn’t changed the links. Once I did that, worked like a charm!
Just wanted to says thanks. This worked perfectly
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”.
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
====
The workaround that I did was to limit the review text to 6 rows as suggested here: https://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css?answertab=votes#tab-top
Many thanks for your response, Atikah.
Did you add a “…read more” facility? ie a way for vieweres to see the rest of the review? A button?
Regards,
Doug
====
We don’t have a “read more” incorporated at the moment. So the 6 rows is kind of like an excerpt. We provide a single link (at the Review block title) for customers to go to our Google Business Page.
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?
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
I am also getting this error any idea what to do to fix?
Hello sir,
i got review but that review is your website http://www.eznettools.com/ but i want my website reviews on my site
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.
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?
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.
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
Firefox reports that ray is undefined in the sort_by_date function
And… they’re back up
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!
It worked perfectly. Thanks for taking the time to put this together.
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?
I’m using the larger script: https://rawgit.com/peledies/google-places/master/google-places.js
I get this error with that new file:
dropbox.com/s/mgsjqwwdqbzrktw/Screenshot%202018-03-05%2022.44.55.jpg
“namespace is not defined”
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!)
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.
Same result here with wordpress. I have my own API key and i have place ID right but still doesn’t show up anything.
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.
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).
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…
You can use this code : https://raw.githubusercontent.com/one3appstudio/google_reviews/master/google-reviews-for-website.js for the javascript.
It removes the comma and also gives you the profile picture of the reviewer.
This isn’t working for me, any suggestions? just displays blank, put https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js back in and it works… Ideas? Thanks!
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
That’s great, Ravi. What was the mod?
Here’s the code : https://raw.githubusercontent.com/one3appstudio/google_reviews/master/google-reviews-for-website.js for the javascript. You can check with the author’s javascript. There’s only one single line modified.
Cheers!
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.
Im using WIX as well, I got my API Code, FINALLY got the API enabled, and my Place ID. Still nadda.
Did you ever get yours to work?
Returning error SignedInNotSupported, the signed_in parameter has been deprecated. Any chance you could update the guide for implementing oauth2?
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?
What does it look like? I’m wondering if your CSS is loading properly…
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
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.
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
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??
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.
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!
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!
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!
See https://intensie.nl/google_reviews in Chrome
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.
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?
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.
Hi, is it possible to show the reviewer photos?
i figured it by my self:
use this: reviews[i].profile_photo_url
thank you for this great script
I’m glad you were able to figure it out! 🙂
Please tell me how to make the call
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
Edit: I figured it how. I had only enable google maps API but I also had to enable google places API in order for them to show up.
Your comment saved me a ton of headaches! I had to do the same. Cheers!
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.
Hi Jeff,
It doesn’t have to be authenticated to the domain (unless you set it up that way, on your API key).
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
No luck with the script (unfortunately)
Activated the API and placed in the right place.
Tested on several browsers and just get blank screen.
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.
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
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
Hi,
Is there any way that I can display more than 5 reviews. Currently, I am able to show only 5 reviews.
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.
How does it choose the “most relevant” reviews. Is it possible to just have it show the 5 most “recent” reviews?
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.
https://cdn.rawgit.com/stevenmonson/googleReviews/6e8f0d79/google-places.js
your place IS is there! I can only display your place!
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 ?
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! 🙂
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!
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.
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?!
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?
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.
Thanks for responding, that makes more sense,
Thank you!
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?
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.
Thank you. I was looking for hours!
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.
Did you activate your API key? That step can be easy to forget.
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?
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?
Hi,
I just went onto http://www.eznettools.com/ and the reviews are not showing up for me. I am on chrome on a mac if that help. I have taken a screen grab, I can send it to you if you like?
Sarah
Hi Sarah,
Good catch. This is fixed now on http://www.eznettools.com/. I recently switched the API and hadn’t gotten around to updating it on your homepage.
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?
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.
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
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).
I tried it but its not working!
.review-meta:before { content: url(‘http://edit-your-own-img-path.png’);
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
Howdy,
Taking a moment to ask if anyone has any thoughts regarding this issue? Thanks in advance.
Best,
Justin
Hello Justin,
Were you able to integrate this into your Squarespace site? I’m having one hell of a time getting anything to work on mine pertaining to these reviews.
Any luck with Squarespace yet?
Cheers
I’ve been able to make it work on Squarespace, but not being able to make CSS work!!
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…
Hi Erwin,
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.
You can read more about that here…
https://issuetracker.google.com/issues/35821903
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.
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?
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 🙂
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.
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!
Have you activated your API key?
I’m not sure, how would I activate it?
Never mind, I managed to activate it following your instructions, but nothing still displays on my website?
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.
Hi Jason,
Did you activate the API key? There are some instruction above on how to do that.
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
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.
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
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!
Hi Jay O.
Thanks for the tip. I’ll add it to the article.
Thanks for the helpful article! Now our site also has testimonials, for example: https://go-to.rest/place/город-ужгород/
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
**edited website address
I’m getting the same error. Did you ever find a solution?
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
Hi Caroline, I don’t think it’s because it’s a shopify site. Did you get your own API key?
yes I did, I have tried absolutely everything
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.
The biggest difference is you don’t need WordPress for this solution. For those that are, I’m sure that plugin probably works too.
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.
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
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?
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.
Im getting the same nothing, using my own codes too, i use WIX as a website tool. actually i get 404 error too
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?
It just shows as a blank section.
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.
Can confirm this issue as well, using both my API and place ID, it only displays a blank section. Tried all possible fixes with no result, which is a shame; this would have been very useful.
Wow, I got it working again!
I got my own API Key, and replaced mine with yours in the script, and its back to working.
I’m so glad it got it working again. Its really convenient for my website.
Thank you for your help and all of your hard work!
http://www.SouthStrandApplianceService.com/testimonials
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!
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”
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!
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.
Just what i was looking for, Works a treat 🙂
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).
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.
It´s so easy!
In google-places.js add this code , it shows the Profile Image.
What is the code to share the profile image?
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.
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);Thanks, I’ve updated the code.
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…
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.
FYI
I changed the row number setting in the code but still not able to see all the reviews.
It shows only 5.
This is actually a limitation of Google’s API. They only allow up to 5 reviews to be pulled.
This was one of the most helpful instructions I’ve seen on the web. Thanks a bunch!!
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.
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.
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 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?
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.
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/
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).
Thanks I’ll look into that now!
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?
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
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.
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?
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">
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!
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
…sorry, I’ve just sorted it – turns out Safari requires a few css tweaks for Flex to work. If you want to see what I’ve done, see my slightly tweaked css file at https://www.irisoptical.co.uk/css/google-places.css
(I’ve added a few new lines with respect to Flex)
Very cool. I love the way that you’ve done this. It’s there to be seen by those who want to read the reviews, but doesn’t dominate the page.
Very cool.
Doug
====
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 🙂
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.
I followed the directions but it still appears blank
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”
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>
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.
Hi Andrew,
It looks like you did it right. In fact it’s working (part of the time). However, I’ve had so many people using this code that we’re exceeding the API quota.
I recommend getting your own API key and it should start working for you.
Here’s a link to get you started… https://developers.google.com/places/web-service/get-api-key
Many thanks – working now. Thanks again 🙂
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.
You’re welcome! I’m glad I was able to help! Sorry the spam filter wouldn’t let you post the link.
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.
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).
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?
I might be able to help. What’s the URL of the page you’re working on?
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.
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.
This is no longer true. We are exceeding our API quota. I strongly recommend getting your own API key at this point.
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.
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?
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.
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.
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).
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.
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!
I’m glad you were able to figure it out! 🙂
Jack, could you explain further how you removed the bullet character? I’m having the same issue on a client’s site.
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;}
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
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;}
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.
I took a look at your screenshot (http://southwindsorbarbershop.com/googleplacesscreengrab.jpg). It’s hard to tell without looking at the actual source code…
However, I see from your follow up comment that you already figured it out. I’m glad you were able to solved it!
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!
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
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.
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?
It will pull from your most recent reviews.
Actually, my reviews are not showing the most recent. It’s showing ones from a year ago and I’ve had reviews within the last few months.
You’re right about that. I’ve been looking into it, and it may be a limitation of the Google API itself.
Here’s the reference… https://github.com/peledies/google-places/issues/6
I’ll see if I can find anything more about this.
Hi,
Thanks for the great tutorial!
I’m experiencing the same issue as Dawn mentioned.
Any news on how to get the most recent ones?
Regards,
Rob
If anyone knows of the way to add that awesome “See all Google Reviews” button to this script, I would love you forever
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.
Wow, great work to something I couldn’t find a solution anywhere for. Spot on1
Thanks Brian! Let us know what other things you need help with.
Thank You! I never would have been able to figure out that coding by myself.
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).
Can you add the script that includes the “See all google Reviews” button? That would be huge!!!
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!