Google +1 Button in xt:Commerce und xtcModified integrieren

google +1 Button
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 Button auf PalmenSamen.com

+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.

17 Responses to Google +1 Button in xt:Commerce und xtcModified integrieren

  1. 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

    • Christian says:

      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

  2. Pingback: Der +1-Button – die SEO-Revolution

  3. Jan says:

    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

    • Christian says:

      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.

  4. Vitalijs says:

    Hallo Christian,

    Wunderbar! Funktioniert ausgezeichnet! Riesige Danke!

    Viele Grüße,

    Vitalijs

  5. Thomas says:

    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….

    • Christian says:

      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?

  6. Jagd says:

    Leider ist die Seite dann nicht mehr w3c kompatibel. Gibt es da vielleicht schon eine andere Lösung für?

    • Christian says:

      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.

  7. Carlos says:

    Hi,

    das mit
    „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' }"
    

    funktioniert bei mir nicht. Ich benötige lediglich die deutsche Sprache. Was muss ich genau ändern und wie?

    {php} echo "{ lang: '" .$_SESSION['language_code']. "' }"; {/php}
    

    Wenn ich in lang: ‚de‘ eingebe, passiert nichts. Und weiterhin zeigt mir mein Programm bei obigen Script eine Fehlermeldung an (ob mit oder ohne Änderung der Sprache.

    Wäre für eine kurze Hilfe sehr dankbar.

    Weiterhin habe ich festgestellt, dass dein Button etwas kleiner geraten ist, als der von Google. Der ist etwas länger. Geht es, mit eine kleine Anpassung diesen etwas länger zu gestalten?

    Danke im Voraus.

    • Hallo Carlos,

      wenn Du nur deutsch für den Google +1 Button benötigst muss du folgenden Code an das Ende der Datei “/templates/TEMPLATENAME/index.html” einfügen:

      <script type='text/javascript' src='https://apis.google.com/js/plusone.js' >
      	{ lang: 'de'}
      </script>
      

      Die Größe des Google +1 Buttons wird durch das data-size Attribut im g:plusone-Tag angegeben. Mögliche Werte sind: tall und medium.
      Weitere Informationen findest Du direkt bei google: https://developers.google.com/+/plugins/+1button/.

  8. Carlos says:

    Sorry, eine Frage habe ich noch. Habe soeben festgestellt, dass wenn ich dein Script ohne www-Adresse eintrage (ist bei mir die Startseite), dann erscheinen die Likes bzw. Empfehlungen nur bei diese eine Seite. Also nur in der Eingangsseite steht z. B. 10. Wenn jemand weiterklickt auf anderen Seiten, steht dort nur 0 bzw. 1 oder 2 (davon abhängig wieviele genau auf diese Seite bereits geklickt haben. Ich hätte es aber gerne so, dass die Empfehlungen für die Domain gelten, und nicht für einzelne HTML-Seiten.

    Dafür habe ich den Script unter http// meine Domain eingetragen, leider gibt mir Google dann immer eine Fehlermeldung, wenn sich jemand einloggen möchte.

    Kann einer helfen? Danke im Voraus.

    Carlos

    • Wenn der Google +1 Button für die Hauptdomain gelten soll sieht das g:plusone-Tag wie folgt aus:

      <g:plusone size='medium' count='true' href='http://www.DEINE.DOMAIN'></g:plusone >
      

      Wobei die du das „www.“ auch weglassen kannst, sofern dein Shop nicht unter www erreichbar ist.

      • Carlos says:

        Hi Christian,

        deine Vorschläge haben teilweise geholfen.

        Wegen der Domain habe ich dein Vorschlag befolgt und es hat geholfen. Vielen Dank :-)

        Mit der Spracheinstellung leider nicht. Wenn ich das wie von dir vorgeschlagen mache, also so:

        { lang: ‚de‘}

        erhalte ich beim Aufruf der Domain folgende Fehlermeldung im Browser:

        Fatal error: Smarty error: [in blau/index.html line 60]: syntax error: unrecognized tag: lang: ‚de‘ (Smarty_Compiler.class.php, line 455) in /homepages/42/d13439880/htdocs/*********/includes/classes/Smarty_2.6.22/Smarty.class.php on line 1092

        und es werden keine Inhalte angezeigt.

        Zurzeit sieht der Script komplett so aus (ohne Spracheinstellung deutsch, also Dialogue sind dann in englisch):

        WO DER BUTTON ERSCHEINT STEHT FOLGENDES:
        <g:plusone size='medium' count='true' href='http://www.********.com&#039;

        GANZ UNTEN AUF DER SEITE; ALSO NACH

        {/if}
        STEHT FOLGENDES:

        So funktioniert es. Wenn ich da noch { lang: ‚de‘} einfüge, geht nichts mehr (wie oben erwähnt).

        Fehlt mir da noch was oder gibt es ein Plan B?

        Grüße,
        Carlos

  9. Bernd says:

    Ich bin gerade dabei einen Shop mit XT:C 4.1 zu erstellen und möchte einen/diesen Google +1 Button im Frontend auf der Produktseite einfügen. Funktioniert das mit dieser Anleitung auch? Bin ja sicher nicht der Einzige, der das verwirklichen will 😉

    sG Bernd

Hinterlasse einen Kommentar zu Carlos Antworten abbrechen

Please use your real name instead of you company name or keyword spam.