Friday 25 July 2014

social sharing not working in magento

Simple social sharing

Here is a list of URLs for some popular social sites that you can use for sharing:
  • Google Plus: https://plus.google.com/share?url=[URL TO SHARE]
  • Facebook: https://www.facebook.com/sharer/sharer.php?u=[URL TO SHARE]&t=[TITLE]
  • Twitter: http://twitter.com/home/?status=[TITLE] ([URL TO SHARE])
  • Pinterest: https://pinterest.com/pin/create/button/?url=[LINKBACK URL]&media=[IMAGE TO SHARE]& description=[DESCRIPTION]

Implementation

Follow these simple steps and you will have social sharing links on your product pages in no time:
  • Openapp/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view.phtml
  • Find the place where you want to add your links/buttons and add the following:

    <?php $productName = $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
    <?php $productUrl = $_helper->productAttribute($_product, $_product->getProductUrl(), 'product_url'); ?>
    <?php $productImage = $_product->getImageUrl() ?>
    We will use these variables to set URL, title, description or any other parameter required.
  • Add the following code below the variables we defined in the previous step:


    // 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>
Although all social sites are quite good at extracting content form the links you share (product name, image, description …)
Adding OpenGraph meta tags to your Magento store is quite easy. Just add the following code below the last meta tag (should be a meta tag named “robots” if you are using a default Magento head file) inapp/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/page/html/head.phtml

<?php $product = Mage::registry('current_product');
if ($product): ?>
<meta property="og:title" content="<?php echo $product->getName(); ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo $this->helper('catalog/product')->getProductUrl($product); ?>" />
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(300, 300); ?>" />
<meta property="og:description" content="<?php echo strip_tags($product->getShortDescription()); ?>" />
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName() ?>" />
<?php endif; ?>
We are sharing a product so we need to add meta tags to product pages only but head.phtml is loaded on every page. This means that we need to check if the current page is a product page and only then add our meta tags.

1 comment:

  1. It's simple great! very easy to install and configure! It also works on development enviroments with local URLs!!!
    Very good work!!!!!

    ReplyDelete