FB-Like, Google +1, Pinterest – Buttons einbauen

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>
	&nbsp;&nbsp;<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>
	&nbsp;&nbsp;<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(); ?>"/>
<? 	} ?>

Schreibe einen Kommentar

Menü schließen