CODEWITHSUNDEEP
magentopinterest
jmanson
jmanson

Reputation: 31

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

I'm trying to add the "Pin it" button from Pinterest to the pruduct detail pages in our website.

So far I've tried:

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry('current_product')->getProductUrl()) ?>&media;=<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(265) ?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

and

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry(\'current_product\')->getProductUrl()) ?>&media;=<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(900,900);?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<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:

<a href="http://pinterest.com/pin/create/button/?url=http://eberjey.com&media;=<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(900,900);?>&description;=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<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?

Upvotes: 3

Views: 12621

Answers (8)

bogdA
bogdA

Reputation: 1

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

Upvotes: 0

david
david

Reputation: 21

Here is what you have to do:

Copy and paste this code into your themes view.phtml file and your all set:

<a href="http://pinterest.com/pin/create/button/?media=<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>&description=<?php echo $_product->getdescription() ?>&url=<?php echo $_product->getProductUrl() ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

<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.

Upvotes: 0

benz001
benz001

Reputation: 2168

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());                                                                                   
?>
<a href="http://pinterest.com/pin/create/button/?<?php echo http_build_query($_pinlink) ?>" class="pin-it-button" count-layout="horizontal"></a>                    
<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.

Upvotes: 6

Andrew
Andrew

Reputation: 1

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-->
    <a href="http://pinterest.com/pin/create/button/?url=<?php echo $_product->getProductUrl() ?>&media=<?php echo trim($this->helper('catalog/image')->init($_product, 'image')); ?>&description=<?php echo trim(Mage::registry('current_product')->getName()); ?>%20%0A%0A<?php echo htmlentities($_product->getdescription(), ENT_QUOTES) ?>" class="pin-it-button" count-layout="horizontal"></a>

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<!--END PIN BUTTON-->

Upvotes: 0

Ross Allen
Ross Allen

Reputation: 44900

The URL you are generating has semicolons after each parameter. Is that intentional? (... replaces your <? php ?> blocks)

<a href="http://pinterest.com/pin/create/button/?url=...&media;=...&description;=..." class="pin-it-button" count-layout="none">Pin It</a>

&media;, &description;.

Try removing the semicolons.

Also, if your output is not automatically HTML escaped the ampersands should be HTML entities instead: &amp;media= and &amp;description=.

Upvotes: 0

seanbreeden
seanbreeden

Reputation: 6097

Try this for adding the image to Pinterest. It has worked well for me.

    $this->helper('catalog/image')->init($_product, 'image')->resize(150)

Upvotes: 0

seane999
seane999

Reputation: 76

This seems to work for me:

<a href="http://pinterest.com/pin/create/button/?url=<?php echo trim(Mage::registry('current_product')->getProductUrl()) ?>&media=<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>&description=<?php echo Mage::registry('current_product')->getName(); ?>" class="pin-it-button" count-layout="none">Pin It</a>
<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....

Upvotes: 1

Oğuz &#199;elikdemir
Oğuz &#199;elikdemir

Reputation: 4980

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();

Upvotes: 0

Related Questions