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" />