Skip to main content

Adding a "Pin it" Pinterest link to Product Pages

More
14 years 3 months ago #52140 by jacorr27
Adding a "Pin it" Pinterest link to Product Pages was created by jacorr27
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

Please Log in or Create an account to join the conversation.

More
14 years 3 months ago #52218 by nicolas
Replied by nicolas on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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.

Please Log in or Create an account to join the conversation.

More
14 years 3 months ago #52271 by maison05
Replied by maison05 on topic Re: Adding a "Pin it" Pinterest link to Product Pages

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.


Hi Nicolas,

I've added the standard Pinterest link to the product -> show_default, together Google, Twitter and Facebook. But the problem is that the standard link requires an image and url link.

Is there any way to hack the standard Pinterest link so that it grabs images and url from the product page?

To show current page url:
Code:
<?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; } ?>

AND
Code:
<?php echo curPageURL(); ?>

Please Log in or Create an account to join the conversation.

More
14 years 3 months ago #52273 by nicolas
Replied by nicolas on topic Re: Adding a "Pin it" Pinterest link to Product Pages
You can just call the function hikashop_currentURL(); and you will get the current URL.
The main image URL can be retrieved like that:
$image = reset($this->element->images);
echo $this->image->uploadFolder_url . $image->file_path;

Please Log in or Create an account to join the conversation.

More
14 years 3 months ago #52723 by bluetonguedesigns
Replied by bluetonguedesigns on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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.

Please Log in or Create an account to join the conversation.

More
14 years 3 months ago #53636 by nowherenowhere
Replied by nowherenowhere on topic Re: Adding a "Pin it" Pinterest link to Product Pages
Yes this would be great to know how to do, or to add as a default in an upcoming release. Please keep me posted.
Believe in Better

Please Log in or Create an account to join the conversation.

More
14 years 2 months ago - 14 years 2 months ago #56456 by maison05
Replied by maison05 on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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:
Code:
<?php $pluginsClass = hikashop_get('class.plugins'); $plugin = $pluginsClass->getByName('content', 'hikashopsocial'); if (@ $plugin->published || @ $plugin->enabled) { echo '{hikashop_social}'; } ?>
3) Below that, add the follow code:
Code:
<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>

4) Where it says ADD_YOUR_DESCRIPTION_HERE, make sure all ",", ".", "?", "#", "$", "&", etc, are in html codes.
5) To control the CSS for Pinterest, add: ._hikashop_pinterest {} to your template CSS and add in the appropriate CSS controls.

Good luck!
Last edit: 14 years 2 months ago by maison05.
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #154865 by Dibben
Replied by Dibben on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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.

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #154868 by Dibben
Replied by Dibben on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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;">Email a friend

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

Please Log in or Create an account to join the conversation.

More
12 years 4 months ago #156360 by Dibben
Replied by Dibben on topic Re: Adding a "Pin it" Pinterest link to Product Pages
I have updated this code and this is now what works for me:

<a href="//www.pinterest.com/pin/create/button/?url=?url=&media=element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=ADD_YOUR_DESCRIPTION_HERE" data-pin-do="buttonPin" data-pin-config="none">
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
The following user(s) said Thank You: Mohamed Thelji, crazywazza

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #157805 by crazywazza
Replied by crazywazza on topic Re: Adding a "Pin it" Pinterest link to Product Pages

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=&media=element->images); echo $this->image->uploadFolder_url . $image->file_path; ?>&description=ADD_YOUR_DESCRIPTION_HERE" data-pin-do="buttonPin" data-pin-config="none">
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>


Thank you for this. Is there any way that I can include my product code into the description when someone pins one of my products?
Also 300x300 appears below the image. I cannot work out where it is getting it from or how to remove that.

Thanks in advance

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158014 by Xavier
Replied by Xavier on topic Re: Adding a "Pin it" Pinterest link to Product Pages
Hi,

To display the product code, if the previous code is working fine, you can use that code:
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>

Regarding the 300x300, it don't seem to come from that code, could you give a link to the page in question in order to have more clues ?
The following user(s) said Thank You: crazywazza

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158040 by crazywazza
Replied by crazywazza on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158042 by Xavier
Replied by Xavier on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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:
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 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>
The following user(s) said Thank You: crazywazza

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158357 by crazywazza
Replied by crazywazza on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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.

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158383 by Xavier
Replied by Xavier on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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 ?

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158480 by crazywazza
Replied by crazywazza on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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

Please Log in or Create an account to join the conversation.

More
12 years 3 months ago #158657 by Eliot
Replied by Eliot on topic Re: Adding a "Pin it" Pinterest link to Product Pages
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!

Please Log in or Create an account to join the conversation.

Time to create page: 0.306 seconds
Powered by Kunena Forum