Magento: Add Pinterest "Pin it" button to product detail page - magento

Question

I'm trying to add the "Pin it" button from Pinterest to the pruduct detail pages in our website.
So far I've tried:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
and
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
With any of these I can get the pruduct's URL and the product's name, but I can not get the product's image. So the post does not work (it needs all 3 items to work: URL, Media and Description)
When I try this:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
I can post the product's image, but the URL is not dynamic (I'm just using the absolute URL to the website).
Any ideas on how I could implement this button in my product detail pages?

Answer 1

Most of the answers here don't urlencode() the querystring that's generated for the pinterest link, so I'm a little surprised they've been working - my approach has been a variant of Andrew's that uses http_build_query() to do this for me.
The following code would work when placed inside template/catalog/product/view.phtml:
<!--START PIN BUTTON-->
<?php
$_pinlink['url'] = $_product->getProductUrl();
$_pinlink['media'] = $this->helper('catalog/image')->init($_product, 'image')->__toString() ;
$_pinlink['description'] = $_helper->productAttribute($_product, $_product->getName(), 'name') . " - " . strip_tags($_product->getDescription());
?>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->
I've also noticed that Pinterest strips all html tags from posted descriptions, so there didn't seem much point in passing them through - hence the strip tags on the description.

Answer 2

This seems to work for me:
Pin It
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
My only concern with this is that it gives the cached image url - rather than a direct one. I do not know how permanent this cached url is. It would seem better to refer to the 'source' rather than the cached version in this instance. But I am not sure....

Answer 3

Have you ever try to get current product url in your code? As a result, in product view page, the URL of the product available, just get this url like below :
$curProductUrl = $this->helper('core/url')->getCurrentUrl();
// or we can take product id then use in the code
$_product = $this->getProduct();
$_id = $_product->getId();
$_productUrl = $_product->getProductUrl();
$_smallImageUrl = $_product->getSmallImageUrl();

Answer 4

Try this for adding the image to Pinterest. It has worked well for me.
$this->helper('catalog/image')->init($_product, 'image')->resize(150)

Answer 5

The URL you are generating has semicolons after each parameter. Is that intentional? (... replaces your <? php ?> blocks)
Pin It
&media;, &description;.
Try removing the semicolons.
Also, if your output is not automatically HTML escaped the ampersands should be HTML entities instead: &media= and &description=.

Answer 6

Here's my version of the Pin It button for magento product pages and it works beautifully.
I use the canonical url of the product. For the description: I first insert the name of the product, followed by two breaks (%0A), followed by the description of the product. The htmlentities code for the product description will convert any quotes you have so Pinterest can read it.
<!--START PIN BUTTON-->
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->

Answer 7

Here is what you have to do:
Copy and paste this code into your themes view.phtml file and your all set:
<img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
This will load the product description, image, and link
Sometimes if you put the url later in the dynamic url, it will get stuck loading. So just copy/paste the code above and your done. No customization required.

Answer 8

This works for me:
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" >
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_white_20.png" /></a>
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
But it uses the cached images ...
I'm trying to use the original image path, but with no success until now.
Hope this helps