Does any body know how to embed Google reviews into a site? I know there are services but don’t want to charge my client a monthly fee for this. Ideas?
Just do a web search and you’ll find many ways to embed your google reviews.
Casey
i did i just see services not iframe etc
Try this - I use this as you can export reviews into different file types and they look good too.
Obviously it doesn’t auto update but may help complement what you are trying to do
Thanks but Im looking for a somehow to embed the stream of reviews You can do it on wordpress so I know it can be done
Did some digging myself and it is possible but it looks like it might take a third party plugin. Someone might know something better. It’s a shame Googe and some of the other big services make it so hard to share information.
Casey
WOW ! Thanks to @Pealco . for finding this gem! He is the best guy form getting help with code This is an amazing review widget works great with Blocs.
https://www.reviewsmaker.com/
4 Likes
Thank you @cableguy30 I just like to help, there is a page that I create to @cableguy30 with two solutions:
https://blocs.webtekpc.pt/cableguy30/
The first one the @cableguy30 shows from reviewsmaker but it is not responsive.
The second option is totally responsive.
There is the instructions for the second option, as the first is on their website:
OK, let’s go then:
- Create a file:
google-places.js
And inside that file copy/paste the following:
/* https://github.com/peledies/google-places */
(function($) {
$.googlePlaces = function(element, options) {
var defaults = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' //@cableguy here you can find placeID @: https://developers.google.com/places/place-id
, 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("<div id='map-plug'></div>"); // 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;
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 < plugin.settings.min_rating){
reviews.splice(i,1);
}
}
return reviews;
}
var renderReviews = function(reviews){
reviews = sort_by_date(reviews);
reviews = filter_minimum_rating(reviews);
var html = "";
var row_count = (plugin.settings.max_rows > 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+"<div class='review-item'><div class='review-meta'><span class='review-author'>"+reviews[i].author_name+"</span><span class='review-sep'>, </span><span class='review-date'>"+date+"</span></div>"+stars+"<p class='review-text'>"+reviews[i].text+"</p></div>"
};
$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 = "<div class='review-stars'><ul>";
// fill in gold stars
for (var i = 0; i < rating; i++) {
stars = stars+"<li><i class='star'></i></li>";
};
// fill in empty stars
if(rating < 5){
for (var i = 0; i < (5 - rating); i++) {
stars = stars+"<li><i class='star inactive'></i></li>";
};
}
stars = stars+"</ul></div>";
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);
In this file you just need to change the PlaceID for your/client business, in the code I mark the place you can get that PlaceID. (line 7)
- Create a bloc.
Inside that bloc create a div
Inside that Div create a html code
Inside that HTML code copy/paste the following:
html code for the html bric.js.zip (1.5 KB)
ATENTION: I create a js file just to not loose the format of the code or lines. Just enter the file copy the content and paste it in the html bric. And you have to change 2 things:
-
Google API key (line 5 I mark it for you)
-
placeID (again, yes
in line 9)
- Go to the definitions of the current page:
And in the Header File Attachments add the file that you created before in step one:
And Voila… there you have…
3 Likes
Thanks, I’ve been playing around with this for a couple of hours myself. I found what your talking about not being responsive. I started messing around with it and if I used a 7 column bloc it displays just one review and is responsive. I also added a direct link to write a review. I’ll have to look more about your fix. Thanks a lot for this.
Here’s what it looks like with one column.
Casey
3 Likes
Oh that version you are using is responsive When I published it everything was responsive. The first version was having issues. Pretty cool feature to put in the pocket for future websites.
I totally agree. I just wonder how long before big brother “google” does something for this not to work.
I assume this is a newer company/website as it has a lot still in beta. Also wondering if it will stay free.
Casey
Pealco provided some options for different views that require code. I ended up just using a code widget and used the code that is supplied, setting the column width to 7. This gives you one review showing at a time and no code needed in the head of the document.
Casey
Thanks for the great info. I’m trying to implement your code and am having trouble finding my Google API key. Any suggestions? Thanks! - Randy
I did see that link earlier, but didn’t understand what exactly they’re wanting me to do… (Select a product? And a project? Set up billing?) Does this API key cost money? Sorry, but don’t understand. 
You have to create a developer account, then they ask you to put a file in your website, so they know that you own the website, and then they give you the API and only works in that specific domain, normally I create a google account for each of my client. So they have their specific API Key.
Do you have to use your credit card to create accounts for each client? What is charged?
I never put any credit card, the only thing is I choose the map option.
Hey @casey1823, did you design the amyturley.com website?
It’s really great - I’ve been trying to create ‘cards’ like the ones you have under the HOW CAN I HELP button. My inspiration was the iPhone app store, like this - preferably rounded corners and with the very subtle shadow - but 3 or 4 cards wide on a desktop:
If you made the ‘cards’ on Amy’s site using Blocs I’d really appreciate being pointed to how you did it.
I’ve spent SO many hours trying to do just that, with 3 column blocs, and structure group 3 blocs, but cannot even get close!
Well, closer than making cards as images, but then of course I can’t add text on top of the image…
Ian