Obwohl die Pforten für Googles neues soziales Netzwerk Google + bisher nur für wenige Testteilnehmer geöffnet wurde, nimmt die +1 Schaltfläche schon richtig fahrt auf. Immer mehr Websites setzen den +1 Button bereits ein.
Wenngleich die SEOs über den Einfluss des Buttons hinsichtlich der Suchergebnisse nur spekulieren können und es auch noch fraglich ist ob Google + eine ernsthafte Konkurrenz zu facebook ist, so ist es insbesondere für Betreiber eines Online-Shops wichtig diese mögliche Trendwende nicht zu verschlafen.
Folgend zeige ich euch wie man den +1 Button, mit wenigen Zeilen Code, in die beiden Shopsystems xt:Commerce und xtcModified integriert.
Die Vorgehensweise ist für beide Systeme identisch.
Getestet habe ich es mit xt:Commerce 3.0.4 SP 2.1 sowie unter xtcModified 1.05, dabei sind keinerlei Probleme aufgetreten. Jedoch wie immer, wenn ihr Hand an euren Shop legt … vorher Backup erstellen.
Zuerst fügt ihr folgenden Code an das Ende der Datei “/templates/TEMPLATENAME/index.html” ein.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{php} echo "{ lang: '" .$_SESSION['language_code']. "' }"; {/php}
</script>
Im Grunde ist das Script-Tag ausreichend, jedoch wird der PHP-Code benötigt um die Benutzersprache aus der Session zu lesen, sodass der Shop-Besucher beim Mouseover (über den Button) einen Text mit Handlungsaufforderung in seiner Sprache angezeigt bekommt.
Gerade bei mehrsprachigen Shops ist das wichtig. Betreibt man einen Shop in lediglich einer Sprache kann man deren Sprachcode auch direkt angeben.
Im nächsten Schritt öffnet ihr die Datei “/templates/TEMPLATENAME/module/product_info/product_info_v1.html” und fügt folgenden Code an die Stelle ein an der der +1 Button erscheinen soll.
<g:plusone size="medium" count="true" href="{php} $url = 'http://' . $_SERVER["HTTP_HOST"].''.$_SERVER["REQUEST_URI"]; echo preg_replace('/(\/XTC.*)/','',$url); {/php}">
</g:plusone>
Über die Attribute size und count wird die Größe des Buttons sowie die Darstellung der gezählten Klicks gesteuert.
Mit dem href-Attribut wird festgelegt für welche Seite +1 gegeben werden soll. In unserem Fall für die jeweilige Produktseite.
Die Funktion preg_replace() ist für die Shops wichtig, welche die Session-ID nicht über Cookies sondern über GET-Variablen in der URL übergeben. Alle anderen Shops stören sich nicht daran.
Google stellt eine ausführliche Beschreibung der Tag-Parameter bereit.
Und schon sind wir fertig! Euer Ergebnis sollte ungefähr so aussehen:
+1 für die Kanarische Dattelpalme
Wer den +1 Button jetzt auch gleich in sein Tracking einbeziehen möchte, der findet bei Joost de Valk eine Möglichkeit den +1 Button mit Google Analytics zu verknüpfen.
Hi,
Vielen Dank für Deine Anleitung. Leider habe ich es bisher noch nicht hingekriegt es auf deutsch anzeigen zu lassen.
Noch eine Frage:
Müßte ich bei dem Code hier: php} $url = ‘http://’ . $_SERVER[
meine Internetseite angeben, oder geht das auch ohne?
Liebe Grüße
Harald
Hallo Harald,
Sieht doch schon gut aus in Deinem Shop! Die Internetseiten musst Du auch nicht weiter angeben, es funktioniert wie folgt:
$_SERVER["HTTP_HOST"] enthält den Host bzw. Domain in Deinem Fall missio-shop.org
$_SERVER["REQUEST_URI"] enthält die angeforderte URI bei z.B. /products/de/Israel-Palaestina/Figuren-Gruppen/Abendmahl.html
Das Problem an der Sprache ist, dass in deinem Shop der PHP-Code in der index.html nicht ausgeführt wird, woran das liegt kann ich leider nicht sagen.
Wenn für dich Deutsch ausreichend ist, dann ersetze den PHP-Code durch:
{ lang: 'de' }Schöne Grüße
Christian
Pingback: Der +1-Button – die SEO-Revolution
Hallo Christian,
wäre es nicht besser, wenn man den Code anstatt in der index.html in der general.js.php unterbringt?
Schöne Grüße,
Jan
Hallo Jan,
ich denke es ist Geschmackssache.
Wer Ordnung im System liebt und alle Scripte an zentraler Stelle halten möchte, der sollte wie von dir vorgeschlagen das Script in der general.js.php laden.
Ich jedoch lege Wert auf einen zügigen Seitenaufbau für den Besucher, daher binde ich das Script erst am Ende der Seite, sprich unten in der index.html, ein. Der +1 Button erscheint dann auch erst wenn das Script geladen ist. Was ich jedoch gerne in Kauf nehme, schließlich geht es in erster Linie um die Produkte und nicht um den +1 Button an sich.
Hallo Christian,
Wunderbar! Funktioniert ausgezeichnet! Riesige Danke!
Viele Grüße,
Vitalijs
Ich habe es jetzt mehrfach ausprobiert in einem xt:Commerce 3.0.4 SP 2.1 Shop! Im Quelltext wird dann zwar der Link angezeigt aber es erscheint kein Button!
Kann es an der Shopstat Erweiterung (für die SEO URLS) liegen die ich nutze. Bin ratlos….
Ein Link zu Deinem Shop wäre an der Stelle sehr hilfreich. Die Shopstat Erweiterung würde ich vorerst jedoch ausschließen.
Wird denn auch das JavaScript korrekt eingebunden?
Leider ist die Seite dann nicht mehr w3c kompatibel. Gibt es da vielleicht schon eine andere Lösung für?
Du hast wahrscheinlich u.a. folgenden Fehler: element “g:plusone” undefined
Entweder Du stellst den Doctype Deiner Website um oder die ignorierst diesen Fehler erst einmal, so wie ich
Wenn das (x)HTML ansonsten korrekt ist, solltest Du keine einbußen haben.