I bet you’re familiar with Pinterest, it’s really hot these days. Pinterest is one of the fastest growing and addictive social channels on the internet right now. If you run a web store, you might have wanted to put Pinterest buttons on products pages to get more traffic to your site. Here’s a quick tutorial that will show you how to add a “Pin it” button right to a product image, so that visitors can easily share your picture on their Pinterest.
First of all, you need to find media.phtml file. You can find it in this directory:
app/design/frontend/default/your_theme/template/catalog/product/view
“your_theme” is the name of the theme that you are using.
We’ll put the “Pin it” button in this place:
After finding out the media.phtml file, you can open it and find the following piece of code:
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>[xml]
Then insert the code below:
[xml]<?php
$pin_url = urlencode( $this->helper('core/url')->getCurrentUrl() );
$pin_media = urlencode( $this->helper('catalog/image')->init($_product, 'image') );
$pin_description = urlencode( $_product->getShortDescription() ) . " $" . urlencode( number_format( $_product->getPrice(),2 ) );
?>
<div class="Pinterest">
<a href="http://pinterest.com/pin/create/button/?url=<?php echo $pin_url; ?>&media=<?php echo $pin_media; ?>&description=<?php echo $pin_description; ?>" class="pin-it-button" count-layout="horizontal">
Pin It
</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</div>
After completing all the steps above, you will see the Pin It button appearing in your product page. When shoppes click on “Pin it” button, a Pinterest dialog box will be opened for them to share the image to their Pinterest Board.
As always, drop your comments below if you have any questions.
Just one more thing: Have you known Magestore’s Pinterest? Don’t forget to follow us if you have any interest. For more plugins and modules, check Magento extensions and Magento 2 extensions page now
Happy Pinning!
Related Tutorials:
2 Comments
Nice code, thanks. Would it be possible to add this to Easylightbox so it the button is diplayed in the modal window? That would be very nice – a quick way of pinning several images.
Hi Rob,
That’s an interesting idea. We have been trying to find the solution for it now and will write about this issue in our next post.