Zurück zum Blog

Facebooks Open Graph Meta-Tags in Magento

Die Einbindung des „Gefällt mir“ Buttons von Facebook gehört mehr oder weniger zum Standardprogramm von Online-Shops. Damit bei Facebook die tatsächlich gewünschten (Produkt-)Informationen veröffentlicht werden, kann die Integration der so genannten Open Graph Meta-Tags weiterhelfen. Wie das in Magento funktioniert, zeigt der folgende Artikel.

Diese speziellen Meta-Tags besitzen jeweils das Präfix og: und können verschiedene Inhalte wie Seitenname, Produktbild, etc. beschreiben. Für Produkt-Links sind vor allem das Bild und der Titel interessant.

Zu Beginn muss der „Gefällt mir“ Button auf der Produktseite eingebaut werden. Dazu wird in der Template-Datei /catalog/product/view.phtml an der gewünschten Stelle folgender Code eingebunden, der auf Facebook’s Developer Seiten individuell definiert werden kann:

<div class="fb-like" data-href="<?php echo $_product->getProductUrl() ?>" data-width="350" data-send="false" data-show-faces="false"></div>
"Gefällt mir" Button in Magento

Wichtig ist hierbei der Wert des Attributs data-href, damit immer die jeweilige Produkt-URL zu Facebook übertragen wird.

Um nun die Open Graph Meta-Tags einzubinden, ist die Datei /page/html/head.phtml mit folgenden Code zu erweitern.

<?php if($_SERVER['HTTP_USER_AGENT'] == 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)') : ?>
<?php if (Mage::registry('current_product')) : ?>
<meta property="og:title" content="<?= $_product->getName() ?> im Online Shop XY bestellen" />
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(190);?>" />
<?php endif;?>
<?php endif;?>
Open Graph Meta-Tags in Magento

Zuerst wird überprüft ob Facebook versucht, die Daten auszulesen. Erst dann werden die Open Graph Meta-Tags eingebunden. Somit ist es möglich, weiterhin validen HTML-Code zu erzeugen, da die Facebook-Meta-Tags nicht W3C-konform sind. Im Quelltext sind somit die Angaben für den Open Graph nicht zu sehen.

Danach wird überprüft, ob man sich auf einer Produktseite befindet. Ist das der Fall, werden die Open Graph Meta-Tags entsprechenden ausgegeben.

Danach noch den Magento-Cache leeren, testen und überprüfen ob alles wunschgemäß bei Facebook veröffentlicht wird.

Diesen Artikel teilen

Schreiben Sie den ersten Kommentar zu diesem Artikel

Ihr Kommentar

Bitte geben Sie Ihren Namen an
Bitte geben Sie eine E-Mail Adresse an
Bitte geben Sie eine Nachricht ein
Das Ergebnis ist nicht korrekt