Google Rezensionen via Html-Platzhalter einbinden

denisdeuschl schrieb am 24.07.2018 um 19:38 Uhr

Hallo liebes Forum,

nach dem ich heute bereits mit Andre von MAGIX Tech-Sup. telefoniert und emails ausgetauscht habe, bin ich mit meinem Latein am Ende und wollte hier um Hilfe bitten.

Ich arbeite an einem Projekt das drei Site.Varianten hat. Desktop, Tablet, Mobil.

Ich will jeweils auf der Index.-site ein widget einbinden dass mir Google-Rezensionen anzeigt.
Ich verwende dafür den onlinedienst "reviewsonmywebsite.de

Hier der script-code:

<script type="text/javascript"> 
var review_token = 'DfyuxeSnd6XynUevkTvAbKu6GBrjqRubpYc6sVVEEvL3tfn9uu'; 
var review_target = 'review-container'; 
</script> 
<script src="https://reviewsonmywebsite.com/js/embed.js?v=4" type="text/javascript"></script> 
<div id="review-container"></div>

Jetzt das Problem:

Wenn ich diesen Code via Platzhalter-html in die seiten einbinde und dann das Projekt auf den Server
lade, zeigt er die Rezensionen immer nur in einer Index-Site an (z.B. in der Desktopversion, nicht aber
in der Mobile und Tablet-Version)

Auch andere Scripts mit anderem Code (z.B. Facebookrezensionen) funktioniert parallel zu oben
genanntem Code nicht!

Wenn man die Google-Scripts verwendet um einfach nur die Sterne-Ratings darzustellen, macht er
das auch nur jeweils auf einer Site, auf den anderen tauchen die Rezensionen einfach nicht auf.

Das Programm "reviewsonmywebsite.com" ist auf die max. Stufe upgegraded und erlaubt mehrere
Widgets gleichzeitig zu verwenden.

Andre von MAGIX schlug vor es mit <iframe> </iframe> zu versuchen. das erschliesst sich mir aber
nicht.

Es muss doch funktionieren, dass ich auf mehreren Seiten innerhalb eines Projekts meine Rezensionen,
bzw. über den Platzhalter einen HTML-Script (in meinem Fall der code für die Rezensionen) einbetten
kann.

Vielen Dank im Voraus

Viele Grüße
Denis

Kommentare

marboe schrieb am 25.07.2018 um 06:55 Uhr

Hallo Denis,

ich nutze reviewsonmywebsite nicht, und würde das auch niemals tun - habe also keinen Account dort.
Liest man sich deine Angaben durch, wird das Problem aber dennoch klar.

1. Der WD nutzt selbst javascript-Dateien. Dass es bei zusätzlich eingefügtem Code zu Problemen kommen kann, ist nicht ausgeschlossen.

2. Das Problem, dass nur eine der Varianten das erwünschte Ergebnis anzeigt, ist schon desöfteren hier im Forum vorgekommen. Problem: Wenn du den Code wie vom Hersteller angegeben einbindest, wird er nur auf einer Variante richtig angezeigt, weil die Verbindung fehlt zu den anderen Varianten. Der Browser muss ja wissen, welche Variante nun gerade aufgerufen wird.
Oft hilft hier, eine eindeutige ID zu vergeben. So hätte jede Variante eine einzigartige Bezeichnung.

Und genau hier würde ich auch ansetzen:
Folgender Codeteil taucht bei dir auf: "<div id="review-container"></div>"
Es ist einen Versuch wert, hier eine eigene ID pro Variante zu vergeben. Natürlich müsste in der Konsequenz dann in jeder Variante der angepasste Code eingefügt werden; ein "Teilen mit Varianten" oder ein "Copy&Paste" kommt hier nicht in Betracht.

In der Umsetzung würde ich durchaus auch mit einem IFrame arbeiten.
-> Rechteck zeichnen in der Größe des Threads, der entstehen soll. Dem Rechteck einen Namen geben (=ID).
-> in den Body des Rechtsecks den entsprechend ID-angepassten Code pro Variante.

IFrame-Codes gibt es in Hülle und Fülle. Im Netz oder auch hier im Forum.
Beispielsweise:

<iframe src="https://www.domain.de/test.html" style="border:0px #FFFFFF none;" name="dieID" scrolling="no" frameborder="0" align=aus marginheight="0px" marginwidth="0px" height="100%" width="100%"></iframe>

Scripte würde ich allerdings auslagern. Die haben in einem Iframe meines bescheidenen Wissens nix zu suchen. Diesen Codeteil könnte man also in den Aufruf der Website packen; also in den Head der Website (nicht Seite).
Mehr Input kann ich dir an der Stelle leider nicht geben - aber es gibt ja noch viele Helfer hier. Da kommt sicher noch was...😊 Unser Fachmann hier im Forum für solche Fragen ist BeRo.


Und es bleibt die Frage, warum du den Besuchern deiner Seite das antust. Sorry, kann ich mir nicht verkneifen. Wenn ich deine Seite besuche, dann möchte ich genau diese besuchen und nicht, dass im Hintergrund mit Google und FB telefoniert wird bis die Leitungen bersten. Und reviewsonmywebsite liest sicher auch genau mit ... Hmm, aber das ist Geschmacksache 😉
Gruß marboe

denisdeuschl schrieb am 25.07.2018 um 12:32 Uhr

Hallo Marboe,

vielen Dank für Deine Hilfestellung. Ich werde der Sache auf den Grund gehen und mich an Deiner beschriebenen Möglichkeit versuchen.

Bleibt mir die Antwort zu geben: Ich finde es schon sehr sinnvoll Google- u. Facebookrezzensionen (und nur diese) auf einer Website einzubinden. Das zeigt den Kunden an wie zufrieden andere mit "der" jeweiligen Leistung sind.

Sollte es nach Eurem Kenntnisstand andere Möglichkeiten geben (ich finde keine) Googlerezzensionen auf der eigenen Homepage einzubauen (und so dass es auf allen Seiten angezeigt wird) wäre ich Euch sehr dankbar für wertvolle Tips!

Vielen Dank... sollte ich eine Lösung finden, werde ich Sie hier kundtun... wer weiss ob es nicht auch jemand anderes wissen will...

Viele Grüße
Denis

BeRo schrieb am 25.07.2018 um 13:07 Uhr

[...] Andre von MAGIX schlug vor es mit <iframe> </iframe> zu versuchen. [...]

Genau das ist der Weg... 😉

Wie @marboe schon erklärt hat, funktioniert auf identischen Seiten der Varianten kein Scriptcode, der z. B. Objekte steuert, die via ID identifiziert werden. Die ID für ein Objekt ist immer ein Unikat, sie kann nicht 2 verschiedenen Objekten zugewiesen werden. Das ist der Grund, warum das Script entweder auf der mobilen Variante- oder auf der Desktop Variante funktioniert.

Du könntest den Platzhaltern auf den unterschiedlichen Seiten zwar eine abweichende ID zuweisen, wirst aber in Deinem Fall damit keinen Erfolg haben, weil für das Funktionieren des lokalen Scripts ein externes Script benötigt wird, in dem die lokal angelegten Variablen verarbeitet werden. Da die Variablen einen genau definierte Namen haben müssen, darfst Du die nicht ändern, weil ansonsten die externe angelegten Funktionen keine Werte mehr bekommen... 😫

Was bleibt ist die Lösung, die Dir @André schon angedeutet hat, also der Einsatz eines iframes.

Mit iframe Codes werden normalerweise externe Seiten- oder Dateien eingebunden und das ist auch die Lösung für Dich:

  • Erstelle in Deinem Projekt eine neue, völlig leere Seite, in der Größe des benötigten Platzhalters, sagen wir 600 x 290 px.
  • Füge einen Platzhalter (Rechteck) in derselben Größe ein und kopiere den kompletten HTML- / Scriptcode in den HTML Body des Platzhalters.
  • Füge auf jeder Seite der Varianten, auf denen die Reviews zu sehen sein sollen, einen weiteren Platzhalter in der Größe (oder größer) ein und schreibe jeweils in den HTML Body den u. a. iframe Code:
    <iframe src="./review.htm" width="100%" height="100%" frameborder="0" scrolling="auto" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>
  • Exportiere die Site lokal und schau Dir in der Voransicht das Ergebnis an.
    Jetzt sollten die Reviews auf allen entsprechenden Seiten der Varianten zu sehen sein.
    Die online Demo findest Du hier.
    Wenn Du die Demo mit einem Desktop Browser öffnest, musst Du nach einer Änderung der Fensterbreite ggf. ein Refresh der Seite durchführen (Funktionstaste "F5"), damit die Reviews korrekt in die Platzhalter eingebaut werden.

  • Fertig 😀

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

denisdeuschl schrieb am 26.07.2018 um 18:00 Uhr

Hallo BeRo,

super lieben Dank für Deine Hilfe. Es hat auf Anhieb funktioniert und war mir sofort schlüssig.
Schade dass ich da selbst nicht drauf kam. Aber manchmal sieht man vor lauter Bäumen
keinen Wald mehr. Vielen Dank!!!