Posts

Add Facebook Open Graph to Magento

How to add Facebook Open Graph Protocol to Magento the easy way. Your web store should be easy to share and your products or services have to be providing the browser with the correct details known as Open Graph Protocol data which uses “og:” tags in the source code and these need to pull in the specific data from Magento so that then the information can be shared via Facebook automatically.

You need to locate the head.phtml file located in the folder structure app/design/frontend/THEME-NAME/default/template/page/html/head.phtml

Before you do anything visit http://opengraphcheck.com/ and check a few website pages to see what the current coding is providing.

Anywhere around the existing meta data, for example:-


<meta http-equiv=”Content-Type” content=”<?php echo $this->getContentType() ?>” />
<title><?php echo $this->getTitle() ?></title>
<meta name=”description” content=”<?php echo htmlspecialchars($this->getDescription()) ?>” />
<meta name=”keywords” content=”<?php echo htmlspecialchars($this->getKeywords()) ?>” />
<meta name=”robots” content=”<?php echo htmlspecialchars($this->getRobots()) ?>” />
<link rel=”icon” href=”<?php echo $this->getFaviconFile(); ?>” type=”image/x-icon” />
<link rel=”shortcut icon” href=”<?php echo $this->getFaviconFile(); ?>” type=”image/x-icon” />
<meta name=”viewport” content=”width=device-width, maximum-scale=1.0, minimum-scale=1.0,initial-scale=1.0,user-scalable=no”>


Add the following code:-


<?php /* Chameleon Web Services Open Graph Protocol for Facebook and 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 Mage::registry(‘product’)->getProductUrl(); ?>” />
<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 /* Chameleon Web Services Open Graph Protocol for Facebook and SEO END */ ?>


Now visit http://opengraphcheck.com/ and check a few website pages to see if the data is now pulling the information relevant to the page content.