Magento – Manually install Open Graph Tag

magento-1.9meta-tagsopen-graph

I am trying to add opengraph on my website manually. I found the tutorial and it works like a charm… but only for Facebook. You can view the tutorial here: http://naileditdesign.com/facebook-open-graph-meta-tags-in-magento/. I want it to work on Pinterest as well, but it is missing some key aspect, such as Price & Currency tag. Do you know what lines of code I can add so it also works on the pinterest, rather than only on facebook.

<?php /* 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 /* Open Graph Protocol for Facebook and SEO END */ ?>

I know I am only missing couple of lines: Price and currency code, If some body can help me out, that would be great.
Thanks.

Best Answer

These should work:

<meta property="og:price:amount" content="<?php echo Mage::registry('product')->getFinalPrice() ?>" />
<meta property="og:price:currency" content="<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>" />

Related Solutions

Open Graph Protocol – How to Dynamically Generate Meta Tags

You need to can add this to one of your layout files:

<catalog_product_view>
    <reference name="head">
        <block type="core/template" name="open-graph" as="open-graph" template="opengraph/product.phtml" />
    </reference>
</catalog_product_view>

Now you need to create the file opengraph/product.phtml inside you theme (app/design/frontend/{package}/{theme}/template/) with the following content:

<?php $_product = Mage::registry('current_product'); ?>
<?php if ($_product) : ?>
    <meta property="og:url" content="<?php echo "http://". $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];?>"/>
    <meta property="og:description" content="<?php echo htmlspecialchars($_product->getDescription())?>"/> 
    <meta property="og:title" content="<?php echo htmlspecialchars($_product->getName())?>"/>
    <meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($_product, 'image')?>"/>
<?php endif;?>

If you need to include the sku or color in there you can get them like this:

$sku = $_product->getSku();
$color = $_product->getAttributeText('color');

Clear the cache when you are done.

Fix Open Graph Problem in Magento 1.8 and 1.9

Here's an alternative solution. It's not nice, and should be considered a hack. It also goes against the purposes of Magento's layout system. Nonetheless, if your requirement is not to override the base head template, then try this:

Inject Content via Event Observer

In your module config XML, add the following event:

...
<global>
    ...
    <events>
        <http_response_send_before>
            <observers>
                <head_modify>
                    <type>singleton</type>
                    <class>Namespace_Module_Model_Observer</class>
                    <method>injectOgTags</method>
                </head_modify>
            </observers>
        </http_response_send_before>
    </events>
    ...
</global>
...

And then you would create an observer class to match:

<?php

class Namespace_Module_Model_Observer
    extends Varien_Event_Observer
{

    public function injectOgTags(Varien_Object $object)
    {
        $response   = $object->getResponse();
        $html       = $response->getBody();

        // Some logic for building up the appropriate meta tags
        // based on URL or product or layout handles
        $html = str_replace('<head>', '<head><meta property="og:title" content="Page title" />', $html);

        $response->setBody($html);
    }

}

So far as I can see, this is only way to solve your problem. Neither the stock head block nor its base template make provisions for adding meta tags above its call for child HTML.

Best Answer

Related Solutions

Open Graph Protocol – How to Dynamically Generate Meta Tags

Fix Open Graph Problem in Magento 1.8 and 1.9

Related Topic