Adding Pinterest Button to Highslide in Magento

Pinterest is one of the fastest growing social platforms and can potentially be incredibly useful if you’re selling  visual type products – furniture in this example.

This Magento site uses the excellent Highslide javascript thumbnail viewer for an image gallery. The client wanted to allow users to share their products via Pinterest. The original layout added the various social media buttons underneath the product thumbnails.

Share buttons
Share buttons below thumbnails

This is fine if you have a simple product. However, if your product comes in different colours, for example, you may want to enable visitors to pin the actual colour image of the chair, or sofa, that they see.

The way I resolved this was to use the “caption” element that comes with Highslide on each of the thumbnail images. There I added the html required to send this image over to Pinterest.

The code in media.phtml looks like this:

<div class="more-views"><h2><?php echo $_helper->__('More Views'); ?></h2>
 <div class="highslide-gallery">
 <ul>
 <?php foreach ($this->getGalleryImages() as $_image): ?>
 <li>
 
 <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" class="highslide" onclick="return hs.expand(this)"> 
 <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
 <div class="highslide-caption">
 <p style="line-height: 40px; width:37px;" class="pinterest-icon"><a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=
 <?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())); ?>&description=
 <?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" 
 title="<?php echo $this->__('Pin it') ?>">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></p>
 </div>
 </li>
 <?php endforeach; ?>
 </ul>
 </div>
</div>

In short, I loop through the available thumbnails and below the image add a “highslide-caption” div just below the hyperlink that launches the image popup (its important that  is comes after the <a></a> element, or it won’t be rendered in the caption). Within that div I construct a javascript call that loads a Pinterest popup.

Share on thumbnail
Pinterest share button on thumbnail

When the user Pins the image, the thumbnail is added to their board, along with the appropriate product url.

Pinterest - shared thumbnails
Pinterest – shared product thumbnails

So, there’s a nice and simple way of adding a ‘Pin it’ button to each thumbnail. No need for a Magento extension and testimony to the power of the Highslide code.

The following two tabs change content below.
Web developer and Magento SEO & Sales Optimisation specialist.

Latest posts by Eddie May (see all)

2 thoughts on “Adding Pinterest Button to Highslide in Magento

  1. Hi Eddie, wondering if you have had any issue adding the share buttons to the left-nav.phtml file rather than in the media.phtml?

    I’m running into issues where the pinterest onclick script is pulling random products from memory. Have you had any experience with this?

Comments are closed.