How to add Facebook Open Graph and Twitter Product Card in Magento

Nowadays share a link of your website or blog on Facebook is most common to promote your website and get more viewers. In this article we discuss about Facebook open graph meta tag. First of all we should know why we use open graph of Facebook in website? Facebook open graph is used to control your website or blog content to how appears on Facebook after share through link. Without using this open graph tag Facebook crawl website link and guess the image and content but not exact. To share exact content and respective image we prefer to use open graph Meta tag in website or blog. Same as Facebook ,Twitter Card is used to represent product content with image and description. We will see how to add Facebook open graph and twitter product card in Magento without using any extension. Let us see the snippet to get better. Have a look.
See demo

To add Facebook Open Graph and Twitter Product Card in Magento Store follow given below steps:

• Go to app/design/frontend/default/yourtheme/template/page/html/head.phtml
• Find  “<?php echo $this->getCssJsHtml() ?>” Using CTRL+F. This code exist before </head> tag.
• Add the given below snippet in head.phtml file before this so that it will come after default meta tag.

<!-- Facebook open graph and twitter product card in magento-->
<?php
if((Mage::getSingleton('cms/page')->getIdentifier() == 'home' &&
Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms')) :
 ?>
 <!-- facebook -->
 <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(); ?>" />
 <!-- twitter -->
 <meta name="twitter:card" content="summary" />
<meta name="twitter:domain" content="<?php echo Mage::getBaseUrl() ?>" />
<meta name="twitter:site" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittersite') ?>" />
<meta name="twitter:creator" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittercreator') ?>" />
<meta name="twitter:title" content="<?php echo $this->getTitle() ?>" />
<meta name="twitter:description" content="<?php echo strip_tags($this->getDescription()) ?>" />
<meta name="twitter:data1" content="<?php echo Mage::getStoreConfig('shipping/origin/country_id') ?>" />
<?php
elseif(Mage::registry('current_category')):
?>
<!-- facebook -->
 <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(); ?>" />
<!-- twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:domain" content="<?php echo Mage::getBaseUrl() ?>" />
<meta name="twitter:site" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittersite') ?>" />
<meta name="twitter:creator" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittercreator') ?>" />
<meta name="twitter:title" content="<?php echo $this->getTitle() ?>" />
<meta name="twitter:description" content="<?php echo strip_tags($this->getDescription()) ?>" />
<meta name="twitter:data1" content="<?php echo Mage::getStoreConfig('shipping/origin/country_id') ?>" />

<?php elseif(Mage::registry('current_product')): ?>
<?php $product = Mage::registry('current_product'); ?>
 <!-- facebook open graph -->
 <meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName(); ?>" />
 <meta property="og:type" content="og: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(); ?>" />
 <!-- facebook ends -->
 <!-- twitter product cards -->
<meta name="twitter:card" content="product" />
<meta name="twitter:domain" content="<?php echo Mage::getBaseUrl() ?>" />
<meta name="twitter:site" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittersite') ?>" />
<meta name="twitter:creator" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittercreator') ?>" />
<meta name="twitter:title" content="<?php echo $product->getName() ?>" />
<meta name="twitter:description" content="<?php echo strip_tags(($product->getShortDescription())); ?>" />
<meta name="twitter:image" content="<?php echo $product->getImageUrl() ?>" />
<meta name="twitter:data1" content="<?php echo $currency ?><?php echo Mage::helper('tax')->getPrice($product, $product->getFinalPrice(), true); ?>" />
<meta name="twitter:label1" content="PRICE" />
<meta name="twitter:data2" content="<?php echo Mage::getStoreConfig('shipping/origin/country_id') ?>" />
<meta name="twitter:label2" content="LOCATION" />
<!-- twitter card ends -->

<?php
 else:
 ?>
 <!-- facebook -->
 <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(); ?>" />
  <!-- twitter -->
 <meta name="twitter:card" content="summary" />
<meta name="twitter:domain" content="<?php echo Mage::getBaseUrl() ?>" />
<meta name="twitter:site" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittersite') ?>" />
<meta name="twitter:creator" content="@<?php echo Mage::getStoreConfig('creareseocore/social/twittercreator') ?>" />
<meta name="twitter:title" content="<?php echo $this->getTitle() ?>" />
<meta name="twitter:description" content="<?php echo strip_tags($this->getDescription()) ?>" />
<meta name="twitter:data1" content="<?php echo Mage::getStoreConfig('shipping/origin/country_id') ?>" />
<?php
endif;
?>

Save the file.Facebook Open Graph and Twitter Product Card in Magento are added successfully. If you liked this article useful spread it 🙂 🙂 .