1. Um den Facebookbutton halbwegs mit allen anderen Button auf eine Ebene zu bringen muss folgende Zeile in das CSS:
.product-view .product-shop .fb_iframe_widget span { height: 19px !important; vertical-align: baseline !important;}
2. In die Übersetzungsdatei des Shops folgendes einfügen:
"en-US","de-DE" "en_US","de_DE"
3. Folgender Code muss in den Fotter der Webseite (Für Google +1 und Pinterest)
<!-- Pinterest Pin Button Script -->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!-- Google +1 Button Script -->
<script type="text/javascript">
window.___gcfg = {
lang: '<?php echo $this->__('en-US') ?>'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
4. Dieser Code muss auf die Produkteseite (für Facebook Button). Hierbei nicht vergessen die Facebook AppID anzupassen, sonst geht es nicht:
<?php //facebook integration ?>
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'HIER_DIE_APP_ID_EINTRAGE', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/<?php echo $this->__('en_US') ?>/all.js';
e.async = false;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
<?php // Ende Facebook integration ?>
5. Folgender Code wird nun auf die Produktseite, an der gewünschten Stelle untergebracht:
<?php //social integration ?>
<div>
<fb:like show_faces="false" layout="button_count"></fb:like>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(Mage::getBaseUrl().substr($_product->getProductUrl(),stripos($_product->getProductUrl(),'catalog/product'))) ?>&media=<?php echo urlencode($this->helper('catalog/image')->init($_product, 'image')) ?>&description=<?php echo urlencode($_helper->productAttribute($_product, $_product->getName(), 'name')) ?>" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<g:plusone size="medium" expandTo="left" recommendations="false"></g:plusone>
</div>
<?php // ende social integration ?>
6. Zuletzt, damit Facebook die richtigen Produktinformationen erhält beim Liken/Kommentieren muss noch folgender Code in die head.phtml (nicht header.phtml!):
<?php
$product = Mage::registry('current_product');
if($product){
?>
<meta property="og:title" content="<?php echo trim($product->getName()); ?>"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl();?>"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(500) ;?>"/>
<?php
}else{
?>
<meta property="og:description" content="<?php echo htmlspecialchars($this->getDescription()) ?>"/>
<meta property="og:image" content="<?php echo $this->getSkinUrl('images/logo.jpg'); ?>"/>
<meta property="og:title" content="Schulte-Ufer Shop"/>
<meta property="og:url" content="<?php echo $this->getUrl(); ?>"/>
<? } ?>
