Reviews are a great way to show potential customers that your business is awesome and that people love what you’re doing. Let’s say you have a bunch of them on Google and you want to show those on your website. Well, using the Google Maps API and Google Places, you can and it’s really simple to do!
**One thing of note is that currently, Google will only allow you to show a maximum of five.
There’s a Few Things You Will Need
Before diving into the code, there are several things that you will need:
- An API key in order to use Google Maps. You can get one here.
- A Places ID for your business (or your client’s business). You can get that here.
- Google Places script that will help pull in the Google Reviews. You can get that here.
Once you have these things, you can start implementing the code to display the reviews. First, you need to queue up the scripts files that will be needed. Put the following code in the <head> section of your website:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/google-places.js "></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=[API_KEY]"></script>
Where it says, [API_KEY], replace with the API key you generated from above.
The Code
Now, you are ready for the javascript function that will pull the reviews in and render them in the specified <div> Add this script to your main scripts file or to the <head> section of your website:
<script>
jQuery(document).ready(function() {
$("#google-reviews").googlePlaces({
placeId: '[PLACES_ID]',
render: ['reviews'],
min_rating: 5,
max_rows: 0
});
});
</script>
Let’s talk about a few things here. First, replace [PLACES_ID] with the Places ID you got from above. The min_rating is the minimum rating that you want shown on your website. For example, if you want to show only 3 star and above reviews, then you would set min_rating to 3. The max_rows parameter allows you choose how many reviews you want to show (up to 5). Setting it to 0 will default to showing as many as it can.
Lastly, you need a <div> to which these reviews will be rendered. Add this <div> where you would like your reviews to display:
<div id="google-reviews"></div>
You will most likely want to include some CSS to pretty them up (like I did above). Here is a quick CSS file that will help with that, or you can style from scratch.
Thank you for your code. I was trying all day to do this. How i found out there is limitation of 5 reviews for free users, if you pay, google will give you more result.
Someone ask here about language, there is possibility to get lang from object ( language: “en” ), but probably you cant get just that language because google send you latest 5 reviews.
You can check my preview in Codepen https://codepen.io/Soullighter/pen/qBddvdx?editors=1011
Open console and you will see object values
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!
Hi Robert, thanks for this great tutorial.
Is it possible to add a max length of lines per review to the code?
Hey Luis. Not that I’m aware of. I admit, it’s nice to be able to have reviews on your website, but the functionality is limited.
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
Unfortunately, I’m not aware of a way for this to include anything but English reviews.
Hey robert. Thank you for your great article. I followed your instructions as well as i could but i could not seem to get this to work on my test website (https://sdds.superhi.com/). Could you please take a look? Thank you!
Hello. Couple of things. Looks as though you have you APY key wrapped in brackets. It doesn’t need to be. Also, your google places file can’t be found.
Thank you very much for your article.
Just have a question : how can I order the review by date (most recent first) and not by relevant?
I’m not aware of a way to reorder them, unfortunately.
Hi, i’m having always the same error TypeError: $(…).googlePlaces is not a function, could you have a look please?
https://www.elettraitalia.srl/it/
Thanks in ADVANCE
Hello Marco. I copied your code locally and it works just fine. I would try replacing the “$” with “jQuery” and see if that does the trick. If not, then you may have another conflict somewhere, but it looks like you implemented the code correctly.
Thanks Robert! Much appreciated there as I was actually able to clean up the errors on the file path as you mentioned. Now, I notice there is a deferred exception alert now, is this preventing the display?
Hmmm, looks like there may be an issue with your API key. You may need to create new one or make sure your API project still exists with Google. There’s a link in the post to get an API key.
Hi,
I added the scripts to my header, updated the API, Place IDs and even applied the CSS but still having issues getting this to display.
Anything advice here? https://www.mymarijuanacards.com/
Hey, Techkube. I checked your website and notice a couple of Javascript errors. One of them is that it can’t find your google places file. You may want to check and make sure you are calling that file correctly in order for the reviews to work.
i have 35 reviews in google but i getting 5 number of reviews in website front end. i need to show all reviews.
Unfortunately, the API only allows you to pull in 5 reviews…
Seems like brilliant solution, yet it does not work for me. Can we see a website where it works please?
Thx Robert. Just don’t want to use JQuery. Any JS scripts would need to be in an iframe below the fold, so I’m looking into using the Google Places API and parsing the JSON response. But I’m not a “real” programmer, so wish me luck. Thanks for this post, set me off in the right direction.
Can’t we do this without JQuery? Building an AMP HTML site and wanted to post reviews.
I’m not aware of a way to pull this off using AMP, but that doesn’t mean there isn’t a way.
Thanks for the article!
Really good idea. You should include some screenshots to show how it looks like after implementing.