“Pin It” Button for Websites

[ton]

According to the pinterest site http://pinterest.com/about/goodies/ (scroll down to “Pin It” Button for Websites), I need to enter a web address for each page that I want to put a pin it button on,

Thats not really an option (time wise etc) anyone know of a way around this? or have i completly gotten the wrong end of the stick.

TON

[tedwardson]

Add a Pin it button to every product

Hi TON,
To add Pinterest to your site, with a Pin it button on every product page: First you'll need to load the following into the head section of your outer layout:

<script type="text/javascript">
(function() {
window.PinIt = window.PinIt || { loaded:false };
if (window.PinIt.loaded) return;
window.PinIt.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
if (window.location.protocol == "https:")
s.src = "https://assets.pinterest.com/js/pinit.js";
else
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

Then you'll need to load the following code to your product layout where you want the Pin it button to show:

<!-- Customize and include for EACH button in the page -->
<a href="http://pinterest.com/pin/create/button/?url=<actinic:variable name="CatalogURL" /><actinic:variable name="SectionPageName" />&media=<actinic:variable name="CatalogURL" /><actinic:block php="true">echo basename(str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />'));</actinic:block>&description=<Actinic:Variable Name="ProductName"/>" class="pin-it-button" count-layout="horizontal">Pin It</a>

This last bit will show a Pin it button embedded with the url of your section page, the image url (without subfolders) and your product name. We found that if we included the product description instead of the name, then html commands would show in the Pin it description.

[ton]

That worked perfectly,

Thanks
TON

[cheaptents]

or use addThis or ShareThis ...

[RoofingWarehous]

or use addThis or ShareThis ...

+1 for "ShareThis"

[Andy Warner]

you can also add the price at the end so pinterest shows it as a 'gift' or whatever they call it - we do that at Legendgames.co.uk - but you need to change the price format if you do that or it doesnt work well... and dont forget to use a blockif to stopthe pinterest script when you are in preview mode doing design or updates. We use ProductDescription but see note above about html fragments......

heres our code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20false">
<a href="http://pinterest.com/pin/create/button/?url=www.legendgames.co.uk/acatalog/<actinic:variable name="SectionPageName" />&media=www.legendgames.co.uk/acatalog/<actinic:block php="true">echo basename('<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');</actinic:block>&description=<Actinic:Variable Name="ProductName"/> - <actinic:variable name="ProductDescription" /> for <actinic:block php="true" >echo "£" . number_format((<actinic:variable encoding="perl" name="ProductPriceRaw" selectable="false" />), 2);</actinic:block> + Postage " class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a><br/>
</actinic:block>

[Alanmh]

Hi

After a bit of self teaching from the Advanced user guide, I have managed to paste this into the relevant code sections with no errors. However, I am not getting a graphical button for pinit, just a text link (which works perfectly).

Any pointers please?

Thanks

Alan

[peblaco]

I took a look at your website on different browsers and I can see the pinit button showing on the product pages. Are you looking from within the software? Or what operating system / browser do you have the problem on?.

[Alanmh]

I took a look at your website on different browsers and I can see the pinit button showing on the product pages. Are you looking from within the software? Or what operating system / browser do you have the problem on?.

Thanks for looking - I actually changed it many times last night - the last thing I tried was the Addthis code, but that doesnt seem to work either. I have just put the Addthis code back in the product layout just after the Product Description.

BTW, I am using SD2013, and I have looked at it with IE and Chrome.

This is the code I used

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" piinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52f8ac6b64fc0e16"></script>
<!-- AddThis Button END -->
</actinic:block>

[Alanmh]

Sorry - just re-read your message - you say you can see it!

Maybe I had better back track

[Alanmh]

Thanks Louise

I have restored the code to the use the one at the top of this post and uploaded it to my site. However, I still see only the link text (alttext?)

I have tried on Chrome and IE with ctrlF5 to refresh the cache (does this still work)

[Alanmh]

Chrome problem with this code

It seems that Chrome has a problem with this code - please see the attached image that shows it cannot load the asset.

[Alanmh]

Thanks again - I have managed to get it visible on IE by resetting to defautls (win 8.1 and IE11) Chrome is still a mystery. Works on my phone and my wife's Win 8.1 PC on Chrome and IE. Anyway - its working enough and as you say, not an SD problem.