Solved: Facebook OG share image in Magento 1.9 (without installing any plugins)

Magento 1.9 branch has been around for a while and a lot of websites are still using it although Magento 2 branch has been announced a while ago.

Magento 1.9 doesn’t have the open graph installed by default and if you do (of course you do) want to get the benefits of using OG tags on your site you need to simply add the tags to your website so that they will generate beautiful previews of your content on websites like Facebook and Twitter and etc social media.

How to add Open Graph tags to your Magento 1.9 store without installing any plugins?

You are going to have to make edits to your website code. If you know how to do this, just follow these steps. If you don’t know how to do this, share this article to your webdeveloper.

1. Make a copy of head.phtml to your theme’s folder

If you already haven´t done this, make a copy of head.phtml to your theme’s folder.

The original you can get from:
app\design\frontend\base\default\template\page\html\head.phtml

The folder to copy it to:
app\design\frontend\YOURTHEME\default\template\page\html\head.phtml

2. Add this code to the end of the copied file:

<?php /* Open Graph Protocol for Facebook 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()->getFrontEndName(); ?>" />
<?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 for Facebook END */ ?>

3. Save the file

4. Test a product link in Facebook for developers debugger to see if the product now has a share image.

All the other of tags should also be present now like og:title, og:type, og:url etc. Scroll down to see the preview of the shared link.

If the image and tags still do not appear – flush and refresh your Magento cache, then in the Facebook debugger click Fetch new scrape information to have your product re-scanned for any changes you made.

 

Hope this works – let me know in the comments >>

Post Author: Tom Pai