googlereviewmultiple
// Add Shortcode
function custom_shortcode() {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Review Embed in HTML website</title>
<style>
#map-plug {
display:none;
}
#google-reviews {
display:flex;
flex-wrap:wrap;
/*display: grid;
grid-template-columns: repeat( auto-fit, minmax(320px, 1fr));
*/
}
.review-item {
border:solid 1px rgba(190,190,190,.35);
margin:0 auto;
padding:1em;
flex: 1 1 20%;
}
@media ( max-width:1200px) {
.review-item {
flex: 1 1 40%;
}
}
@media ( max-width:450px) {
.review-item {
flex: 1 1 90%;
}
}
.review-meta, .review-stars {
text-align:center;
font-size:115%;
}
.review-author {
text-transform: capitalize;
font-weight:bold;
}
.review-date {
opacity:.6;
display:block;
}
.review-text {
line-height:1.55;
text-align:left;
max-width:32em;
margin:auto;
}
.review-stars ul {
display: inline-block;
list-style: none !important;
margin:0;
padding:0;
}
.review-stars ul li {
float: left;
list-style: none !important;
margin-right: 1px;
line-height:1;
}
.review-stars ul li i {
color: #E4B248;
font-size: 1.4em;
font-style:normal;
}
.review-stars ul li i.inactive {
color: #c6c6c6;
}
.star:after {
content: "2605";
}
</style>
</head>
<div id="google-reviews"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script> (function($) {
$.googlePlaces = function(element, options) {
var defaults = {
placeId: 'ChIJO4ekJf_uDzkRFQJlQ18nE3c' // placeId provided by google api documentation
, 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);</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBnQ0WlS-upkuh0SE9bjSIa6fQ7VvW_gZg&signed_in=true&libraries=places"></script>
<script>
jQuery(document).ready(function( $ ) {
$("#google-reviews").googlePlaces({
placeId: 'ChIJO3ABrv7uDzkR2cm0AOWzJms' //Find placeID @: https://developers.google.com/places/place-id
, render: ['reviews']
, min_rating: 3
, max_rows:4
});
});
</script>
</body>
</html>
}
add_shortcode( '', 'custom_shortcode' );
sam sharma