Facebook Share
Eine Anbindung an soziale Netzwerke gehört mittlerweile für die meisten Webshops und Internetseiten zum Standard.
Aus gutem Grund, denn nahezu jeder Internetnutzer ist Mitglied in einen Social Network und nutzt dieses, neben der Pflege von Kontakten, auch um sich von ausgewählten Anbietern automatisch über Neuigkeiten informieren zu lassen.
Nach einen Like, Follow oder +1 auf der Seite bzw. Fanpage des Shops bekommt der Kunde alle Neuigkeiten und Nachrichten direkt auf seiner Facebook, Twitter oder Google+ Startseite präsentiert und bleibt stets auf dem Laufenden.
Nichts liegt somit näher, als den eigenen Kunden oder Interessierten Besucher auch über neue WordPress-Blogbeiträge in den sozialen Netzwerken zu informieren.
Blogbeiträge in sozialen Netzwerken veröffentlichen
Webseiten können in sozialen Netzwerken geteilt werden. Dies kann jederzeit händisch erfolgen, indem zB. ein Sharebutton (wie unter diesem Beitrag zu finden) betätigt wird.
Ein automatisches Teilen bzw. Veröffentlichen von WordPress-Artikeln auf der eigenen Firmenseite (Fanpage) im Social Network ermöglichen entsprechende Plugins, wie zB. das WordPress-eigene, kostenlose, Jetpack: http://wordpress.org/plugins/jetpack/
Vorteil: Ein neuer WordPress-Artikel kann automatisch bei der ersten Veröffentlichung auf mehreren Plattformen (Facebook, Google+, Twitter,…) geteilt werden.
Welche Daten werden beim Teilen verwendet?
Im <head> – Bereich einer Seite kann mit Hilfe von Metadaten das Aussehen der geteilten Postings in den Social Networks beeinflusst werden.
Für Facebook eignen sich Open Graph-Tags. Für Google+ und Twitter gibt es eigene Tags, jedoch gibt es bei diesen Plattformen ein Fallback auf die Facebook Open Graph Tags.
Ein Bild für Facebook wird beispielsweise folgendermaßen definiert:
<meta property="og:image" content="http://domain.de/pfad/bildname.png">
Wurde kein Bild definiert, oder ist das definierte Bild zu klein, durchsucht Facebook die gesamte aktuelle Seite nach Bildern in geeigneter Größe (ab 200 x 200px) und wählt meist das erste geeignete Bild aus. Das Durchsuchen der Seite nach Bildern kostet unnötig Zeit beim Teilen und das Ergebnis ist nicht immer das Gewünschte.
Ein Bild für Facebook in WordPress definieren
Im Jetpack-Plugin gibt es keine Möglichkeit, ein Bild für Facebook zu definieren. Dennoch integriert Jetpack Open Graph-Tags in die Website und setzt meistens ein mehr oder weniger geeignetes Bild des Beitrages ein.
Schöner ist es, Bilder selbst und bewusst zu definieren. Dazu eignet sich u.a. ein kostenfreies, unkompliziertes und auch bestens für TOXID geeignetes Plugin:
Facebook Open Graph Meta Tags for WordPress
Sie finden das Plugin im WordPress-Adminbereich unter Plugins>Plugins installieren>Suche oder direkt auf der Plugin-Seite zum Download:
http://wordpress.org/plugins/wonderm00ns-simple-facebook-open-graph-tags/
Plugin-Einstellungen: Bilder definieren
Grundeinstellungen
Nach der Installation des Plugins stehen im Bereich „Einstellungen“ unter „Facebook Open Graph Tags“ einige Einstellmöglichkeiten zur Verfügung. U.a. kann dort ein Bild definiert werden, welches standardmäßig für Facebook-Posts verwendet wird, falls beim jeweiligen Beitrag kein eigenes Bild definiert wurde. Die übrigen Plugin-Einstellungen können bei Bedarf auch vorgenommen werden.
Sollte Ihre Webseite noch nicht über die Metadaten „title“ und „description“ verfügen, können diese mit dem Plugin ebenfalls integriert werden.
Die Einstellung „lso set Canonical URL:“ sollte in WordPress/Toxid-Installationen deaktiviert werden, da eine Canonical-URL, die auf die WordPress-Installation verweist, im OXID eShop eher ungünstig wäre.
Bild definieren
Bei den Beiträgen ist unter dem Texteditor ein neues Feld zu finden, in dem ein individuelles Bild für Facebook definiert werden kann, welches dann bevorzugt verwendet wird. Zur Wahl stehen Bilder aus der Medienbibliothek, aus dem aktuellen Beitrag, von einer URL oder als Upload vom eigenen Computer.
Geeignete Bildgrößen wählen
Facebook Banner
Voraussetzung ist eine Mindestgröße von 200 x 200px, noch besser eigenen sich größere Bilder, zB. 1200 x 600px. Diese würden dann nicht als kleines Quadrat, sondern als gut erkennbarer Banner über dem Posting in Facebook erscheinen.
Bitte beachten: Wird ein zu kleines Bild gewählt, wird dieses nicht im Facebook-Posting verwendet!
Open Graph Tags in das XML Theme integrieren
Mithilfe des Plugins werden die Open Graph-Tags automatisch in den <head> – Bereich der WordPress-Standardthemes integriert.
Beim Einsatz von TOXID wird der <head>-Bereich (bzw. wp_head) bewusst nicht zu OXID übertragen, um ein Durcheinander von Metadaten, Scripten und CSS-Dateien aus WordPress im OXID eShop zu vermeiden.
Deshalb ist es bei Bedarf erforderlich, die gewünschten Inhalte des <head> – Bereichs extra zum OXID eShop zu übertragen. Hierzu muss zunächst in der Datei header.tpl des XML-Themes folgender Codeschnipsel zB. direkt nach <toxid> hinzugefügt werden:
<wpograph><![CDATA[
<?php if (function_exists('webdados_fb_open_graph')) webdados_fb_open_graph(); ?>
]]></wpograph> Dies sorgt für die Ausgabe der Open Graph – Tags im XML-Theme, sobald das Modul Facebook Open Graph Meta Tags for WordPress aktiviert wurde.
Tags vom XML-Theme an den OXID eShop übergeben
Im OXID eShop müssen die Open Graph-Tags auch noch entgegen genommen werden, indem in der Datei base.tpl zB. im oberen Bereich bei den bereits vorhandenen <meta> – Tags, folgender Code-Schnipsel eingefügt wird:
[{if $oView->getClassName() eq 'toxid_curl'}]
[{assign var='toxid' value=$oViewConf->getToxid()}]
[{$toxid->getCmsSnippet(wpograph)}]
[{/if}] Nun werden die Open Graph – Tags automatisch im OXID eShop in den Blogartikelseiten integriert. Das definierte Bild wird auch dann verwendet, wenn der Beitrag vom Seitenbesucher mit einen Share-Button geteilt wird.
Weitere Anpassungen im OXID eShop
Zu beachten ist auch, dass der OXID eShop, falls unter „Stammdaten > Grundeinstellungen > Einstell. > Facebook“ eine Application – ID eingetragen wurde, eigene Open Graph-Tags einsetzen möchte, die jedoch im Blogbereich ungeeignet sind.
Mit den OXID-eigenen Tags würde standardmäßig immer die OXID-Einkaufstüte beim Teilen eines Blogbeitrags als Bild verwendet werden.
Es ist deshalb erforderlich, die OXID Open Graph-Tags auf den Blogseiten zu entfernen, indem in der OXID-Datei /tpl/layout/base.tpl folgende Zeile (im Standard Azure Zeile 29)
[{if $oViewConf->getFbAppId()}] folgendermaßen ergänzt wird:
[{if $oViewConf->getFbAppId() && $oView->getClassName() ne 'toxid_curl'}] Änderungen testen, alte Bilder aus dem Facebook-Cache löschen
Im Facebook Open Graph Debugger können Sie jederzeit das das Ergebnis selbst überprüfen: https://developers.facebook.com/tools/debug/
Facebook cacht die geteilten Bilder. Somit wird immer das gleiche Bild beim Teilen verwendet, selbst wenn die Bild-URL im Open Graph-Tag zwischenzeitlich verändert wurde.
Der Chache wird automatisch geleert, nachdem die entsprechende Seite im o.g. Debugger aufgerufen wurde.
WordPress2OXID
Die erforderlichen Codeschnipsel sind ab sofort in den eComStyle.de WordPress2OXID – Paketen fertig integriert. Sie müssen nur noch das WordPress-Plugin installieren und die Bilder definieren. Für bereits vorhandene Installationen können die Updates kostenlos im Kundenkonto heruntergeladen werden oder alternativ die Codes gem. obiger Anleitung nachgetragen werden.
Sollten noch Fragen auftreten, nutzen Sie bitte bevorzugt unser neues Supportforum.
