Thursday, October 04, 2012

Quickly Add Open Graph tags to Magento

A clinet of mine recently shared the site report for her site from Silktide with me and it showed a few things needed improving, particularly the Open Graph integration. Her site is a new Magento store, built on Magento Community Edition 1.7.02 and whilst I'd added share buttons to the product pages via the ShareThis widget I hadn't added in any Open Graph tags to optimize the sharing process. The Silktide report spurred me in to action and I thought I'd share my code to quickly add the OG tags to your magento pages.

First you'll need to edit your theme's head file at "app\design\frontend\YOURTHEME\default\template\page\html\head.phtml" and add the following lines of code:

<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getGroup()->getName(); ?>" />
<meta property="og:description" content="<?php echo strip_tags(htmlspecialchars($this->getDescription())) ?>" />
 

<?php if (!in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), array('cms_index_noRoute', 'cms_index_defaultNoRoute'))) {
    $currentUrl = Mage::helper('core/url')->getCurrentUrl();
}?> 

<meta property="og:url" content="<?php echo $currentUrl ?>" />
 

<?php if (Mage::registry('current_product')) : ?>
<?php if (Mage::registry('current_product')->getMetaTitle() == "") {
  $ogTitle = Mage::registry('current_product')->getName();
} else {
  $ogTitle = Mage::registry('current_product')->getMetaTitle();
}
?>
<meta property="og:title" content="<?php echo $ogTitle ?>" />  

<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(200,200);?>" />
<?php endif;?> 



This code is mainly aimed at product pages and sharing them on Facebook so it renders the product's title, description and a thumbnail image of the product, resized to the recommended size of 200 pixels square. Any HTML in the description is stripped out leaving the plain text. The code also adds the current store view's name (you may need to edit this in Configuration > Manage Stores) and the URL of the current page. Finally the code checks if the product has a Meta Title set and if not it displays the name of the product instead. Upload the altered file, clear your Magento cache and away you go. You can check your integration with the Facebook debugger tool.

UPDATE
The code below checks if we're on a product or category page and pulls the relevant image and sets the correct og:title for the category or product page.

<?php if (Mage::registry('current_category')) : ?>
<?php $ogTitle = Mage::registry('current_category')->getName();?>
<?php
$_category  = Mage::registry('current_category');
$cur_category = Mage::getModel('catalog/category')->load($_category->getId());
$imageUrl = $cur_category->getImageUrl();
?>
<meta property="og:image" content="<?php echo $imageUrl;?>" />
<?php endif;?>
<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(200,200);?>" />
<?php endif;?>
<meta property="og:title" content="<?php echo $ogTitle ?>" />

I still haven't found a way to get all the product images but it will be necessary to loop throught the product image array and write out an og:image tag for each image.

4 comments:

  1. Is there a way to make it offer all product images from the product page?

    ReplyDelete
    Replies
    1. Yes, I'm working on it at the moment and also updating the code to display the correct category images and titles. I'll update this post with the extra code when it's ready.

      Delete
  2. Hi Michael, YOU ARE MY HERO!!!
    Please tell me, there is a way to use it with the categories or cms pages too?
    I'd like also to solve the problem Jacquie pointed out. Thanks!!!
    Giovanni

    ReplyDelete
    Replies
    1. Most of the code above works with CMS pages too but I don't know how to pull any image URLs from a CMS page yet, I haven't looked in to it. The updated code above deals with categories.

      Delete