Adding a "Pin it" Pinterest link to Product Pages

Hi all,

Does anyone know of a way to include a "Pin It" button to my product pages?

I have tried using the standard code supplied by Pinterest, but it requires an image to be hardcoded and as I update products very regularly I'd prefer not to have to update the code for each product.

Any help would be greatly appreciated!

Cheers

nicolas wrote: Hi,

You can add it in the file "show_default" of the view "product" via the menu Display->Views and it will be added automatically to all the product pages.

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
?>

<?php
  echo curPageURL();
?>

Would someone like to share exactly the code you used, and where you put it and how you think it works etc so others may be able to also easily do this?

Be a nice feature to have built in I think.

Yes this would be great to know how to do, or to add as a default in an upcoming release. Please keep me posted.

For those interested, I finally figured out how to add Pinterest onto the product page.

Here's the instructions:
1) Go to: Display->Views, under all templates, look for your current template. Then look for "show_default" of the front end view "product".
2) Look for this code:

<?php
  $pluginsClass = hikashop_get('class.plugins');
  $plugin = $pluginsClass->getByName('content', 'hikashopsocial');
  if (@ $plugin->published || @ $plugin->enabled) {
    echo '{hikashop_social}';
  }
  ?>

<span class="_hikashop_pinterest"><a href="http://pinterest.com/pin/create/button/?url=<?php echo hikashop_currentURL(); ?>&media=<?php $image = reset($this->element->images);
echo $this->image->uploadFolder_url . $image->file_path; ?>&description=ADD_YOUR_DESCRIPTION_HERE" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></span>

Does this still work for anyone? I get the following message (attached) the image is full but it looks like it needs the full path, i have tried replacing $this->image->uploadFolder_url with the full url but it doesn't seem to work, is there a way i can add the full url so that the image is shown?

Any help appreciated.

Just in case anyone else needs it i find these two work well as print and email functions / icons

<a class="email" title="Email a friend" href="#" onclick="javascript:window.location='mailto:?subject=Interesting information&body=I thought you might find this information interesting: ' + window.location;"><img src="images/email-icon.jpg" alt="Email a friend"></a>

<a href="javascript:if(window.print)window.print()"><img src="images/print.jpg" alt="Print"></a>

(to go just below the pinterest code then swap images with your own...)

I have updated this code and this is now what works for me:

<a href="//www.pinterest.com/pin/create/button/?url=?url=<?php echo hikashop_currentURL(); ?>&media=<?php $image = reset($this->element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=ADD_YOUR_DESCRIPTION_HERE" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Dibben wrote: I have updated this code and this is now what works for me:

<a href="//www.pinterest.com/pin/create/button/?url=?url=<?php echo hikashop_currentURL(); ?>&media=<?php $image = reset($this->element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=ADD_YOUR_DESCRIPTION_HERE" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Hi,

To display the product code, if the previous code is working fine, you can use that code:

<a href="//www.pinterest.com/pin/create/button/?url=?url=<?php echo hikashop_currentURL(); ?>&media=<?php $image = reset($this->element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=<?php echo $this->element->product_code; ?> ADD_YOUR_DESCRIPTION_HERE" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Thank you Xavier for your time. I put the code that you gave me in, but nothing changed. I still just have a product name but no product code when I pin it.
The 300x300 I was referring to I have discovered is Pinterest showing the size of the image.

A good link to see what I am talking about is : www.douglasjones.co.za/index.php/compone...roduct/1607-orchidea

Thanks for your efforts

Just a question, why not use the HikaShop social plugin ?
It allow to display that pinterest button, and in this plugin change the part for the description content to add the product code.

Else thanks to try:

<a href="//www.pinterest.com/pin/create/button/?url=?url=<?php echo hikashop_currentURL(); ?>&media=<?php $image = reset($this->element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=<?php echo htmlspecialchars(strip_tags($this->element->product_code.' - '.$this->element->product_description); ?>" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

Hi Xavier,

Thank you for your suggestion. I was not aware of the social plugin, and it works well.

However with the pinterest button, it posts the product perfectly, but in Pinterest when it is posted it just shows "Product Code:" without the product code in it. Any suggestions

Thanks for the time.

Hi,

Do you mean with the plugin it display just product code without the code of the product in Pinterest ?
Does it work with the previous code you were using ? If it is, you can use the previous code.

With the pinterest plugin, that should not display product code at all, do you have edited the plugin content ?

Hello Xavier

I have not changed any of the plugin content.

When I click on Pin It, it takes me to the Pinterest window and has the picture of the product and below that its says Product Code:. I would like to work out how to get it to add the product code as well.

Thanks

Hi there,

It looks like this specific product-pin is something that was not available when we developed our Pinterest integration.
That's why you don't have this information. However, looking at their documentation, it looks like it can work with the facebook open graph system which means that if you enable the facebook button it should work.

Let me know how it goes so we can adapt the code!