Using Twitter Cards in Magento + A Facebook Open Graph Example with Magento

I recently came across this article on HackerNews: How to Add Twitter’s New Product Cards to your Shopify Store? I decided to take the same approach they took but instead of using Shopify why not try it on Magento… it is of course my e-commerce platform of choice :)

Here is a snippet from my head.phtml file. You can find your head.phtml in your theme’s folder structure. Mine was in the following location:

app/design/frontend/mytheme/template/page/html/head.phtml

<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<!--?php echo $this--->getTitle() ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--?php  if (Mage::registry('current_product')) { 	$current_product = Mage::registry('current_product'); 	$desc = preg_replace('/\s+?(\S+)?$/', '', substr(strip_tags(str_replace(array("\r\n", "\r", "\n"), "", $this--->getDescription())), 0, 150));
	$desc = str_replace("’","'", $desc);
	$desc = str_replace(" "," ", $desc);
?>
<meta name="description" content="<?php echo $desc; ?>" />
<!--?php } else { ?-->
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<!--?php } ?-->
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
	<link href="<?php echo $this->getFaviconFile(); ?>" rel="icon" type="image/x-icon" />
	<link href="<?php echo $this->getFaviconFile(); ?>" rel="shortcut icon" type="image/x-icon" />
<meta content="website" />
<!--?php  if (Mage::registry('current_product')) {  $product_image = Mage::getModel('catalog/product_media_config')--->getMediaUrl($current_product->getSmallImage());
?>
<meta content="&quot;<?php" />"/>
<meta content="<?php echo $product_image;?>" />
<meta content="<?php echo $current_product->getName();?>" />
<meta content="&quot;<?php" />getStore()->getCurrentUrl(false); ?>"/>
<meta name="twitter:site" value="@YourTwitterHandle">
<meta name="twitter:card" content="product" />
<meta name="twitter:title" content="<?php echo $current_product->getName();?>" />
<meta name="twitter:description" content="<?php echo $desc;?>" />
<meta name="twitter:image" content="<?php echo $product_image;?>" />
<meta name="twitter:data1" content="$<?php echo number_format($current_product->getPrice(),2);?>" />
<meta name="twitter:label1" content="PRICE" />
<!--?php if($current_product--->getStockItem()->getIsInStock()) { ?>
<meta name="twitter:data2" content="In stock!" />
<!--?php } else { ?-->
<meta name="twitter:data2" content="Out of stock" />
<!--?php } ?-->
<meta name="twitter:label2" content="AVAILABILITY" />
<!--?php } else { // regular CMS page... not a product ?-->
<meta content="Your website description for facebook" />
<meta content="My Company Name Store" />
<meta content="http://www.domain.com/facebook-image.png" />
<meta content="http://www.domain.com/" />
<!--?php } ?-->
<meta content="en_US" />
<meta content="My Company Name Store" />

  • Digital Development

    Made my site just turn white. Here’s a copy of my head text.

    ?>
    <meta http-equiv="Content-Type" content="getContentType() ?>” />
    getTitle() ?>
    <meta name="description" content="getDescription()) ?>” />
    <meta name="keywords" content="getKeywords()) ?>” />
    <meta name="robots" content="getRobots()) ?>” />

    <link rel="icon" href="getFaviconFile(); ?>” type=”image/x-icon” />
    <link rel="shortcut icon" href="getFaviconFile(); ?>” type=”image/x-icon” />

    <link media="all" href="getSkinUrl()?>css/styles.css3.php?url=getSkinUrl()?>” type=”text/css” rel=”stylesheet” />

    //<![CDATA[
    var BLANK_URL = 'helper('core/js')->getJsUrl('blank.html') ?>';
    var BLANK_IMG = 'helper('core/js')->getJsUrl('spacer.gif') ?>';
    //]]>

    getCssJsHtml() ?>
    getChildHtml() ?>
    helper(‘core/js’)->getTranslatorScript() ?>
    getIncludes() ?>

  • Lenz Nice

    Good approach but then you have to use the same descriptions and titles you use in your shop.
    But there is an extension that will do all the stuff for you and gives you the opportunity to provide specific text and images for your social shares with several fallbacks to the normal information: http://www.magentocommerce.com/magento-connect/social-meta-tags-for-open-graph-and-twitter-cards.html
    It also supports most of the different Twitter Card Types!