,

Social media buttons in je Magento webshop

Je producten laten LIKEN / SHAREN brengt met zich mee dat de beschrijvingen en images wel goed moeten worden overgenomen uit je webshop. Om dit voor elkaar te krijgen, is een stukje Open Graph Protocol voor Facebook code noodzakelijk in de header van elke pagina. Hoe doe je dit?

Ga naar app/design/frontend/default/JOUWTEMPLATE/template/page/html/head.phtml

Plaats het stukje code, dat hieronder staat, in dit bestand. Deze code kan overal in het bestand staan, maar wij plaatsen het meestal boven de template CSS-bestanden, dus boven deze lijn <?php echo $this->getCssJsHtml() ?>
<?php /* Open Graph Protocol voor Facebook en SEO START */ ?>
<?php if(Mage::registry(‘current_product’)): ?>
<?php $product = Mage::registry(‘current_product’); ?>
<meta property=”og:title” content=”<?php echo ($product->getName()); ?>” />
<meta property=”og:type” content=”product” />
<meta property=”og:image” content=”<?php echo $this->helper(‘catalog/image’)->init($product, ‘small_image’)->resize(200,200);?>” />
<meta property=”og:url” content=”<?php echo $this->helper(‘core/url’)->getCurrentUrl();?>” />
<meta property=”og:description” content=”<?php echo strip_tags(($product->getShortDescription())); ?>” />
<meta property=”og:site_name” content=”<?php echo Mage::app()->getStore()->getName(); ?>” />
<?php elseif(Mage::registry(‘current_category’)): ?>
<meta property=”og:title” content=”<?php echo $this->getTitle() ?>” />
<meta property=”og:type” content=”product.group” />
<meta property=”og:url” content=”<?php echo $this->helper(‘core/url’)->getCurrentUrl();?>” />
<meta property=”og:description” content=”<?php echo strip_tags($this->getDescription()) ?>” />
<meta property=”og:site_name” content=”<?php echo Mage::app()->getStore()->getName(); ?>” />
<?php elseif((Mage::getSingleton(‘cms/page’)->getIdentifier() == ‘home’ &&
Mage::app()->getFrontController()->getRequest()->getRouteName() == ‘cms’)) : ?>
<meta property=”og:title” content=”<?php echo $this->getTitle() ?>” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”<?php echo $this->helper(‘core/url’)->getCurrentUrl();?>” />
<meta property=”og:description” content=”<?php echo strip_tags($this->getDescription()) ?>” />
<meta property=”og:site_name” content=”<?php echo Mage::app()->getStore()->getName(); ?>” />
<?php else: ?>
<meta property=”og:title” content=”<?php echo $this->getTitle() ?>” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”<?php echo $this->helper(‘core/url’)->getCurrentUrl();?>” />
<meta property=”og:description” content=”<?php echo strip_tags($this->getDescription()) ?>” />
<meta property=”og:site_name” content=”<?php echo Mage::app()->getStore()->getName(); ?>” />
<?php endif; ?>
<?php /* Open Graph Protocol voor Facebook en SEO END */ ?>

 

Sla het bestand op en upload het naar uw webserver.

Open:

app/design/frontend/YOUR_PACKAGE/JOUWTEMPLATE/template/catalog/product/view.phtml

Zoek de plek waar u wilt uw links / knoppen toe te voegen en het volgende toevoegen:

 

<?php $productName = $_helper->productAttribute($_product, $_product->getName(), ‘name’); ?>
<?php $productUrl = $_helper->productAttribute($_product, $_product->getProductUrl(), ‘product_url’); ?>
<?php $productImage = $_product->getImageUrl() ?>

// Google Plus
<a href=”javascript:popWin(‘https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>‘, ‘google’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”<?php echo $this->__(‘Share on Google Plus’) ?>“>Google Plus</a>
// Facebook
<a href=”javascript:popWin(‘https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>‘, ‘facebook’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”<?php echo $this->__(‘Share on Facebook’) ?>“>Facebook</a>
// Twitter
<a href=”javascript:popWin(‘http://twitter.com/home/?status=<?php echo urlencode($productName . ‘ (‘ . $productUrl . ‘)’); ?>‘, ‘twitter’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”<?php echo $this->__(‘Tweet’) ?>“>Twitter</a>
// Pinterest
<a href=”javascript:popWin(‘https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>‘, ‘pinterest’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”<?php echo $this->__(‘Pin it’) ?>“>Pinterest</a>

 

Sla het bestand op en upload het naar uw webserver.

Test dan bij een produktpagina de buttons.

Je kan ook deze plugin gebruiken: http://www.magentocommerce.com/magento-connect/facebook-like-button-extension-for-magento.html