Bewertungen sind eine großartige Möglichkeit, potenziellen Kunden zu zeigen, dass Ihr Unternehmen großartig ist und dass die Leute Ihre Arbeit lieben. Angenommen, Sie haben einige Bewertungen davon bei Google und möchten diese auf Ihrer Website anzeigen. Mit der Google Maps-API und Google Places können Sie das und das ist ganz einfach!
So sieht es aus Google Bewertungen: in Webseite integriert oder als iframe eingebaut, z.B. für WordPress
Sie können sogar vorgeben, das nur 4**** oder 5***** Sterne Bewertungen angezeigt werden!
Von der iframe-Datei können Sie mit Strg+U, können Sie nach dem Aufruf, sich den kompletten Quelltext anzeigen lassen. Hinweis, die in der Datei angegebene API Key, funktioniert auf anderen Seiten nicht! Also nicht einfach kopieren und bei sich Testen.
Erstellen Sie auf Ihrer Hompage Online ein Verzeichniss (rating)
Download google-bewertungen.zip (Inhalt icon.svg, google-places.js) - gehöhrt (ungepackt!) in das Verzeichniss rating
Die leitet alle zugriffe auf das Verzeichniss www.example.com/rating/ direkt weiter auf die Google Bewertungsseite
<?php
header('HTTP/1.1 200 OK');
header('X-Robots-Tag: none');
$urlredirect = 'https://search.google.com/local/writereview?placeid=Place-ID';
header("Location: " . $urlredirect);
?>
Fügen Sie den folgenden Code in den Abschnitt <head> Ihrer Website ein:
<HTML>
<HEAD>
<TITLE>Google Bewertungen von IHR FIRMENNAME anzeigen</TITLE>
<style type="text/css">
.review-stars ul {display: inline-block;list-style: none;}
.review-stars ul li {float: left;margin-right: 5px;}
.review-stars ul li i {color: #E4B248;font-size: 12px;}
.review-stars ul li i.inactive {color: #c6c6c6;}
.star:after {content: "\2605";}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="google-places.js" id="rendered-js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=API_KEY"></script>
<link rel="copyright" title="© Detlev Molitor" href="https://molitor-eu.de/" />
</HEAD>
<BODY>
<h3><div id="schema">IHR FIRMENNAME</div></h3> <!-- Anzeigen Firmenname und Anzahl Bewertungen -->
<br><br>
<div id="google-reviews"></div> <!-- Anzeigen der Bewertungen -->
<p align="center"><a href="https://search.google.com/local/reviews?placeid=Place-ID" rel="noopener" target="_blank">Alle Rezensionen, auf Google anzeigen</a>
<a href="https://search.google.com/local/writereview?placeid=Place-ID" rel="noopener" target="_blank">Jetzt bei Google bewerten</a></p>
</BODY>
</HTML>
Ersetzen Sie dort, wo API_KEY, Place-ID steht, durch die Schlüssel-Nummern die Sie bei Google generiert haben und IHR FIRMENNAME mit Ihren Daten/Angaben.
Ersetzen Sie in der Datei zweimal (Zeile 10 und Zeile 383) die Place-ID durch die Place-ID, die Sie auf „Google PlaceID & CID Finder“ erhalten haben.
Die min_rating (Zeile 385) ist die Mindestbewertung, die auf Ihrer Website angezeigt werden soll. Wenn Sie beispielsweise nur Bewertungen mit 3 Sternen und mehr anzeigen möchten, setzen Sie min_rating auf 3.
Mit dem Parameter max_rows (Zeile 386) können Sie auswählen, wie viele Bewertungen Sie anzeigen möchten (bis zu 5). Wenn Sie den Wert auf 0 setzen, werden standardmäßig so viele wie möglich angezeigt.
Datenschutz Zeile 16: shorten_names: true, : Soll der Name des Bewerters gekürzt werden dann true, soll dieser komplett angezeigt werden dann false eintragen
/* Dokumentation :: https://molitor-eu.de/google-bewertungen-html.php#main */
/* Quellcode :: https://github.com/peledies/google-places */
/* Modifiziert :: Detlev Molitor */
(function ($) {
var namespace = 'googlePlaces';
$.googlePlaces = function (element, options) {
var defaults = {
placeId: 'Place-ID' // placeId provided by google api documentation
, render: ['reviews', 'name'],
min_rating: 0,
max_rows: 0,
map_plug_id: 'map-plug',
rotateTime: true,
shorten_names: false,
schema: {
displayElement: '#schema',
type: 'Store',
beforeText: 'Google-Nutzer haben ',
middleText: 'basierend auf',
afterText: 'Bewertungen',
image: null,
priceRange: null },
address: {
displayElement: "#google-address" },
phone: {
displayElement: "#google-phone" },
staticMap: {
displayElement: "#google-static-map",
width: 512,
height: 512,
zoom: 17,
type: "roadmap" },
hours: {
displayElement: "#google-hours" } };
var plugin = this;
plugin.settings = {};
var $element = $(element),
element = element;
plugin.init = function () {
plugin.settings = $.extend({}, defaults, options);
plugin.settings.schema = $.extend({}, defaults.schema, options.schema);
$element.html("<div id='" + plugin.settings.map_plug_id + "'></div>"); // create a plug for google to load data into
initialize_place(function (place) {
plugin.place_data = place;
// Trigger event before render
$element.trigger('beforeRender.' + namespace);
if (plugin.settings.render.indexOf('rating') > -1) {
renderRating(plugin.place_data.rating);
}
// render specified sections
if (plugin.settings.render.indexOf('reviews') > -1) {
renderReviews(plugin.place_data.reviews);
if (!!plugin.settings.rotateTime) {
initRotation();
}
}
if (plugin.settings.render.indexOf('address') > -1) {
renderAddress(
capture_element(plugin.settings.address.displayElement),
plugin.place_data.adr_address);
}
if (plugin.settings.render.indexOf('phone') > -1) {
renderPhone(
capture_element(plugin.settings.phone.displayElement),
plugin.place_data.formatted_phone_number);
}
if (plugin.settings.render.indexOf('staticMap') > -1) {
renderStaticMap(
capture_element(plugin.settings.staticMap.displayElement),
plugin.place_data.formatted_address);
}
if (plugin.settings.render.indexOf('hours') > -1) {
renderHours(
capture_element(plugin.settings.hours.displayElement),
plugin.place_data.opening_hours);
}
// render schema markup
addSchemaMarkup(
capture_element(plugin.settings.schema.displayElement),
plugin.place_data);
// Trigger event after render
$element.trigger('afterRender.' + namespace);
});
};
var capture_element = function (element) {
if (element instanceof jQuery) {
return element;
} else if (typeof element == 'string') {
try {
var ele = $(element);
if (ele.length) {
return ele;
} else {
throw 'Element [' + element + '] couldnt be found in the DOM. Skipping ' + element + ' markup generation.';
}
} catch (e) {
console.warn(e);
}
}
};
var initialize_place = function (c) {
var map = new google.maps.Map(document.getElementById(plugin.settings.map_plug_id));
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 renderRating = function (rating) {
var html = "";
var star = renderAverageStars(rating);
html = "<div class='average-rating'><h4>" + star + "</h4></div>";
$element.append(html);
};
var shorten_name = function (name) {
if (name.split(" ").length > 1) {
var xname = "";
xname = name.split(" ");
return xname[0] + " " + xname[1][0] + ".";
}
};
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);
if (plugin.settings.shorten_names == true) {
var name = shorten_name(reviews[i].author_name);
} else {
var name = reviews[i].author_name + "</span><span class='review-sep'>, </span>";
};
var avatar = reviews[i].profile_photo_url;
html = html + "<div class='review-item'><div class='review-meta'><img src='" + avatar + "' width='60' /><span class='review-author'>" + name + "<span class='review-date'>" + date + "</span></div>" + stars + "<p class='review-text'>" + reviews[i].text + "<hr size=1 noshade></p></div>";
};
$element.append(html);
console.log(reviews);
};
var renderHours = function (element, data) {
if (element instanceof jQuery) {
var html = "<ul>";
data.weekday_text.forEach(function (day) {
html += "<li>" + day + "</li>";
});
html += "</ul>";
element.append(html);
}
};
var renderStaticMap = function (element, data) {
if (element instanceof jQuery) {
var map = plugin.settings.staticMap;
element.append(
"<img src='https://maps.googleapis.com/maps/api/staticmap" +
"?size=" + map.width + "x" + map.height +
"&zoom=" + map.zoom +
"&maptype=" + map.type +
"&markers=size:large%7Ccolor:red%7C" + data + "'>" +
"</img>");
}
};
var renderAddress = function (element, data) {
if (element instanceof jQuery) {
element.append(data);
}
};
var renderPhone = function (element, data) {
if (element instanceof jQuery) {
element.append(data);
}
};
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 renderAverageStars = function (rating) {
var stars = "<div class='review-stars'><ul><li><i>" + rating + "&nbsp;</i></li>";
var activeStars = parseInt(rating);
var inactiveStars = 5 - activeStars;
var width = (rating - activeStars) * 100 + '%';
// fill in gold stars
for (var i = 0; i < activeStars; i++) {
stars += "<li><i class='star'></i></li>";
};
// fill in empty stars
if (inactiveStars > 0) {
for (var i = 0; i < inactiveStars; i++) {
if (i === 0) {
stars += "<li style='position: relative;'><i class='star inactive'></i><i class='star' style='position: absolute;top: 0;left: 0;overflow: hidden;width: " + width + "'></i></li>";
} else {
stars += "<li><i class='star inactive'></i></li>";
}
};
}
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;
};
var addSchemaMarkup = function (element, placeData) {
if (element instanceof jQuery) {
var schema = plugin.settings.schema;
var schemaMarkup = '<span itemscope="" itemtype="http://schema.org/' + schema.type + '">';
if (schema.image !== null) {
schemaMarkup += generateSchemaItemMarkup('image', schema.image);
} else {
console.warn('Image is required for some schema types. Visit https://search.google.com/structured-data/testing-tool to test your schema output.');
}
if (schema.priceRange !== null) {
schemaMarkup += generateSchemaItemMarkup('priceRange', schema.priceRange);
}
schemaMarkup += generateSchemaItemMarkup('url', location.origin);
schemaMarkup += generateSchemaItemMarkup('telephone', plugin.place_data.formatted_phone_number);
schemaMarkup += generateSchemaAddressMarkup();
schemaMarkup += generateSchemaRatingMarkup(placeData, schema);
schemaMarkup += '</span>';
element.append(schemaMarkup);
}
};
var generateSchemaAddressMarkup = function () {
var $address = $('<div />', {
itemprop: "address",
itemscope: '',
itemtype: "http://schema.org/PostalAddress" }).
css('display', 'none');
$address.append(plugin.place_data.adr_address);
$address.children('.street-address').attr('itemprop', 'streetAddress');
$address.children('.locality').attr('itemprop', 'addressLocality');
$address.children('.region').attr('itemprop', 'addressRegion');
$address.children('.postal-code').attr('itemprop', 'postalCode');
$address.children('.country-name').attr('itemprop', 'addressCountry');
return $address[0].outerHTML;
};
var generateSchemaRatingMarkup = function (placeData, schema) {
var reviews = placeData.reviews;
var lastIndex = reviews.length - 1;
var reviewPointTotal = 0;
for (var i = lastIndex; i >= 0; i--) {
reviewPointTotal += reviews[i].rating;
};
var averageReview = reviewPointTotal / reviews.length;
return schema.beforeText + ' <span itemprop="name">' + placeData.name + '</span> ' +
'<span itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">' +
'<span itemprop="ratingValue">' + averageReview.toFixed(2) + '</span>/<span itemprop="bestRating">5</span> ' +
schema.middleText + ' <span itemprop="ratingCount">' + reviews.length + '</span> ' +
schema.afterText +
'</span>';
};
var generateSchemaItemMarkup = function (name, value) {
return '<meta itemprop="' + name + '" content="' + value + '">';
};
plugin.init();
};
$.fn.googlePlaces = function (options) {
return this.each(function () {
if (undefined == $(this).data(namespace)) {
var plugin = new $.googlePlaces(this, options);
$(this).data(namespace, plugin);
}
});
};
})(jQuery);
jQuery(document).ready(function () {
$("#google-reviews").googlePlaces({
placeId: 'Place-ID', //molitor-eu.de/tools/google-placeid_cid-finder.php
render: ['reviews', 'name'],
min_rating: 5,
max_rows: 0 });
});
API (Application Programming Interface) was ist das überhaupt? Im Grunde nichts anderes als eine Softwarelizenz zum Nutzen von Onlinetools. Eine Preisliste für die Google Maps Plattform findet man unter cloud.google.com/maps-platform/pricing/sheet/
Keine Panik, Ihre Google Street View Tour als iframe aus Google Maps generiert, auch bei der Darstellung auf Ihrer Webseite, Facebook und Co bleiben in der Regel kostenfrei.
Sie benötigen eine Kredit- oder Debitkarte, auch wenn von dort kein Geld abgebucht wird!
Rufen Sie developers.google.com/maps/documentation/javascript/get-api-key, um Ihren Schlüssel zu generieren.
Erstellen Sie ein neues Projekt oder verwenden Sie ein bestehendes Projekt, wenn Sie schon eins angelegt haben.
Erstellen Sie ein Rechnungskonto.
Klicken Sie auf „Weiter“, um APIs zu aktivieren
Wenn Sie auf Ihrem API-Schlüssel ein Warnsymbol sehen, wählen Sie bitte im linken Menü das Menü Anmeldeinformationen und klicken Sie dann auf den Namen Ihres API-Schlüssels.
Fragen an den Google Support können auch bei X (twitter) gestellt werden. Hast Du eine Frage zu Google Produkten, Google Experten können dir vielleicht weiterhelfen! Nutze einfach den folgenden Hashtag. #gHelp #API #google-places
Sie haben keine Zeit. Kein Problem, wir erstellen Ihnen kurzfristig Ihre Dateien, welche Sie nur noch per FTP auf Ihren Server laden müssen. Angepasst mit Ihren Daten. Innerhalb von 3-5 Werktagen.
War das hilfreich für dich? Was habt ihr vermisst? Habe ich etwas vergessen? Braucht Ihr Hilfe? Lass es mich in den Kommentaren wissen!
Leider dürfen wir Ihnen nicht alles anzeigen, Sie haben nicht alle Cookies akzeptiert! Neuauswahl Cookies
Dieser Text, z.B. Rabattcode, wird nur in der App (Android/iPhone) angezeigt! //CSS
Wir freuen uns über jede Nachricht und jeden neuen Kontakt. Selbst dann wenn sie noch gar nicht genau wissen, was wir für sie tun können und Sie einfach nur das Gefühl haben, dass wir für Sie interessant werden könnten. Wir freuen uns auf ein persönliches Gespräch mit Ihnen.
Bitte nutzen Sie für Ihren Beratungswunsch möglichst das Kontaktformular, da wir im Kundenauftrag sehr viel unterwegs sind und nicht immer sofort telefonisch erreichbar sind.
Bitte geben Sie keine sensiblen Daten wie Kreditkarteninformationen, Kranken- oder Steuerunterlagen oder Sozialversicherungsnummern an.
Ihr Feedback hilft…
Warum Sie Online Bewerten sollten!
follow me/us on the social media channels