Site icon Yoga Webdesign

Google-Bewertungen auf der Website einbinden

Google Bewertungen

Was sind Google-Bewertungen?

Google-Bewertungen sind Beurteilungen, die Google-Nutzer auf Google für dich bzw. dein Yogastudio abgegeben haben. Diese bestehen aus einer Sternebewertung (1 – 5 Sterne) und optional auch einem Beurteilungstext. Da so gut wie jeder Smartphonenutzer (Android) auch einen  Google-Account hat, sind diese Bewertungen sehr verbreitet. 

Wie kann man Google-Bewertungen erhalten?

Um bei Google bewertet werden zu können, sollte man sein Yogastudio bei Google registrieren. Das Ganze ist kostenlos und erhöht mit Sicherheit auch deine Reichweite. Nähere Informationen dazu wird es in einem späteren Artikel geben. Bis dahin könnt ihr euch aber schon bspw. über folgenden Link informieren: Google My Business

Google-Bewertungen auf der eigenen Website einbinden

Wenn du ein paar Bewertungen gesammelt hast und diese auf deiner Website einbinden möchtest, hast du verschiedene Möglichkeiten. Ich werde eine davon vorstellen und genau erklären, wie die Einbindung funktioniert. Dies ist leider nicht ganz einfach, aber mit etwas Geduld kommt man ins Ziel 😉

Datenschutz

Es gibt diverse WordPress-Plugins, die die Daten in Echtzeit von Google abrufen. Oftmals werden dabei aber die Daten der BesucherInnen an Google übertragen. In meiner Anleitung zeige ich einen Weg auf, wie die Bewertungen DSGVO-konform – also Datenschutz-freundlich – eingebunden werden können. Das Ganze funktioniert so, dass das Plugin die Bewertungen in einem festgelegten Intervall (stündlich, täglich, wöchentlich, etc.) von Google abruft und diese dann in einer eigenen Datenbank auf deiner Webspace speichert. So werden beim Aufruf deiner Website die Daten aus deiner Datenbank geladen und nicht direkt von Google abgerufen.

Anleitung zum Einbinden der Google-Bewertungen

Google Bewertung - Beispiel

Auf dem Beispielbild siehst du, wie das Ganze auf deiner Website aussehen könnte. Es gibt natürlich auch andere Möglichkeiten, bspw. mit Anzeige der Bewertungstexte.

Nun aber zum Vorgehen:

Plugin installieren

Ich habe mich für das kostenlose Plugin Reviews and Rating – Google My Business entschieden. Es ist einfach einzurichten, bietet etliche verschiedene Designs an und übermittelt die IP-Adresse der Websitebesucher nicht an fremde Server.

Installiere das Plugin ganz normal in WordPress. Rufe anschließend die Einstellungsseite unter “Einstellungen” -> “Reviews and Rating – Google My Business” auf. Diese benötigst du später.

Bei Google registrieren

Wenn du noch keinen Google-Account hast, lege diesen kostenfrei an: Google-Konto einrichten

Projekt anlegen

Rufe die Entwicklerkonsole auf: Entwicklerkonsole

Klicke dann oben links auf das Navigationsmenü und klicke auf “Abrechnung”.

Hier musst du ein Abrechnungskonto erstellen. Das ist kostenlos, zur Verifizierung musst du aber deine Bankkartendaten hinterlegen. 

Wenn du damit durch bist, gehe wieder in die Entwicklerkonsole und klicke auf den Button “Projekt erstellen”.

Hier musst du nichts weiter eintragen, sondern brauchst nur auf den Button “Erstellen” klicken.

Sicherheitsschlüssel anlegen

Klicke wieder oben links auf das Navigationsmenü und wähle den Punkt “Marketplace” aus. Suche dort nach “Places API”:

 

Klicke auf das Ergebnis und anschließend auf den Button “Aktivieren”.

Wähle dann im Navigationsmenü oben links den Punkt “APIs & Dienste” -> “Anmeldedaten” aus.

Klicke auf den Button “Anmeldedaten erstellen” -> “API-Schlüssel”.

Es öffnet sich ein Popup. Klicke dort auf “Schlüssel einschränken”:

Klicke unter dem Bereich “Anwendungsbeschränkungen” auf den Punkt “IP-Adressen (Webserver, Cronjobs usw.)”.

Es öffnet sich der Bereich”Anfragen von diesen Server-IP-Adressen annehmen” klicke dort auf den Button “Hinzufügen” und trage die IP-Adresse ein, die dir auf deiner Website unter den Plugineinstellungen angegeben wird.

Unter dem Punkt “API-Einschränkungen” musst du dann “Schlüssel einschränken” aktivieren und “Places API” auswählen.

Dann auf “Speichern” klicken.

Anschließend musst du den Schlüssel, der dir angezeigt wird, kopieren und in WordPress unter den Einstellungen des Plugins hinterlegen:

Google Place-ID ermitteln

Damit das Plugin weiß, von welchem Unternehmen die Bewertungen eingebunden werden sollen, benötigst du noch die Place-ID. Dafür auf der Seite Google Place ID Finder die Adresse deines Studios eingeben und die ermittelte Place-ID kopieren und auf der Einstellungsseite des Plugins (siehe Screenshot oben) eingeben.

Shortcode einbinden

Jetzt kannst du dir einen Shortcode aussuchen und bspw. in Elementor über das Shortcode-Element einbinden.

Die Übersicht der möglichen Shortcodes findest du hier:

Shortcode-Übersicht (Tipp: Oben sind mehrere Bereiche, z.B. “Bubbles, outlined” – diese Buttons führen zu unterschiedlichen Beispielen)

Im Plugin selbst habe ich dann keine weiteren Einstellungen vorgenommen.

Beispiel 1 (mit Farbhintergrund)

Um diese Anzeige bei dir auf der Seite einzubauen, benötigst du folgenden Shortcode:

[reviews_rating theme="badge tiny narrow" class="fill stripe contrast" place_id="ChIJeRbAZb31pUcRIWcHFGgAfPM" name="Bewertungen" summary="name, rating, stars" html_tags="h3" limit=0 reviews_link="Bewertungen anzeigen" write_review_link="Eine Bewertung schreiben"]

Die place_id musst du natürlich durch deine eigene Place-ID ersetzen. Mit Elementor habe ich dann noch den folgenden CSS-Code direkt am Element hinterlegt:

.google-business-reviews-rating.stripe.contrast > *:nth-child(2n-1) {
background-color: #B23C33;
}

.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type="button"], input[type="submit"], input[type="reset"] {
border-color: #b23c33;
background-color: #54595F;
white-space: pre;
line-height: 3;
}

.google-business-reviews-rating.stripe.badge.tiny > *:last-child {
padding-top: 20px;
}

Beispiel 2 (transparenter Hintergrund)

Mit diesem Code kannst du eine Box einfügen, die transparent mit einem leichten dunklen Ton ist. So hebt sie sich etwas vom Hintergrund ab, fügt sich aber charmant in das Gesamtbild ein.

Für dieses Beispiel benötigst du ebenfalls den Shortcode aus dem ersten Beispiel.

Damit die folgenden CSS-Einstellungen sich nicht auf deine gesamte Seite auswirken, sondern nur auf den Shortcode, musst du eine CSS-Klasse hinterlegen. In Elementor geht das ganz einfach über die Erweiterten Shortcode-Einstellungen. Hinterlege dort “reviewboxa”:

Anschließend kannst du folgenden CSS-Code für den Shortcode hinterlegen:

.google-business-reviews-rating.stripe.contrast > *:nth-child(2n-1) {
background-color: hsla(0, 0%, 0%, 0.1);
}
.google-business-reviews-rating.fill {
background-color: rgba(255, 255, 255, 0.1);
}

.menu-toggle, button, .ast-button, .ast-custom-button, .button, input#submit, input[type=”button”], input[type=”submit”], input[type=”reset”] {
background-color: rgba(0,0,0,0.05);
white-space: pre;
line-height: 3;
}

.google-business-reviews-rating.stripe.badge.tiny > *:last-child {
padding-top: 20px;
}

.reviewboxa a {
color: #ffffff;
padding: 8px;
font-size: 16px;
}

.reviewboxa a:hover {
background-color: #93C500);
}

Möchtest du zusätzlich noch die Schriftart anpassen, füge nnoch folgenden CSS-Code hinzu und ändere den Namen “Karla” auf den Namen deiner verwendeten Schriftart:

.google-business-reviews-rating.stripe.badge.tiny > *:first-child {
font-family: 'Karla';
}

.reviewboxa a {
font-family: 'Karla';
}

Einfachere Möglichkeiten?

Kennst du eine einfachere Möglichkeit, um Google-Bewertungen DSGVO-konform auf einer WordPress-Seite einzubinden? Dann schreibe gern einen Kommentar 😉

Exit mobile version