Adding Pinterest Button to Magento Product Page

Pinterest looks like it is going to be the next big thing to hit the internet. It has grown massively in a short amount of time and is a very effective marketing tool for e-commerce websites, providing you have good quality images.

I have recently added the “Pin-It” button to FOODO, my Australian food website. I tried to play with adding to to every page of the website but it wouldn’t work, so I had to settle adding it only to the product pages.

The page you want to add the code to is called view.phtml located within your theme at /app/design/frontend/theme/theme/template/catalog/product/.

Most of the code used below is available from http://pinterest.com/about/goodies/. All we are really doing is defining the page URL, produce image location and using the produce name as the description.

At the top pf the page add the below piece of code. This will define the URL of the current page.

 <?php
$currentUrl = $this->helper(‘core/url’)->getCurrentUrl();
?>

Once that has been added you will need to figure out where you want to place your “Pin-It” Button. It can be anywhere on the product page. Paste the below code into view.phtml wherever you want the button to appear. The bold code are the elements being grabbed from Magento.

<a href=”http://pinterest.com/pin/create/button/?url=<?php echo $currentUrl ?>&media=<?php echo Mage::helper(‘catalog/image’)->init(Mage::registry(‘current_product’), ‘image’);?>&description=<?php echo Mage::registry(‘current_product’)->getName(); ?>” count-layout=”horizontal”>Pin It</a><script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>

Test your button to make sure it works as it should. The above code has been tested on Magento 1.4 and 1.5.



Tags : , , , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

3 Comments

Leave Comment