I am adding the Pinterest PinIt-button to products on my webshop. This is how Pinterest wants me to do it:

I have successfully implemented the button to all products on a page and it is working fine. Regarding the script they want me to add, do I really need it? What is it for? Is it ok not include it? I am wondering since it seems to be interfering with some AJAX submissions I am doing (not sure why) and the button seems to be working fine without the script.

I am adding the Pinterest PinIt-button to products on my webshop. This is how Pinterest wants me to do it:

http://business.pinterest./widget-builder/#do_pin_it_button

I have successfully implemented the button to all products on a page and it is working fine. Regarding the script they want me to add, do I really need it? What is it for? Is it ok not include it? I am wondering since it seems to be interfering with some AJAX submissions I am doing (not sure why) and the button seems to be working fine without the script.

• javascript
• pinterest

2 Answers 2

The JavaScript loaded by pinit.js builds five different widgets, not just the Pin It button. If it's interfering with AJAX submissions, please check that it's being loaded only once, at the bottom of your page. (I am the author of the code and would love to know more about how we're breaking your page; is there an URL I can look at?)

The code the accepted answer uses probably won't work because the ampersands between the second and third arguments (media and description) have been converted to HTML entities.

Once the ampersands are fixed, the code in the accepted answer will result in the Pin It pop-up appearing in the main browser window, which is ugly, and will draw the user away from your page, which is really not what you want. Pinterest users know what the pop-up is supposed to look like and tend not to pin if it's wrong.

To duplicate the Pinterest experience, you should add the following inline JavaScript:

onclick="window.open(this.href, '_pinIt', 'status=no,resizable=yes,scrollbars=yes,personalbar=no,directories=no,location=no,toolbar=no,menubar=no,width=632,height=270,left=0,top=0');return false;" 

I strongly remend that you do NOT hand-whittle your URLs; they are brittle and will almost certainly break eventually. If you want something a bit more future-proof, you can try triggering the Pinterest bookmarklet code with JavaScript, just like our toolbar bookmarklet. That would look something like this:

<a style="cursor:pointer;" onclick="var d=document;var e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','utf-8');e.setAttribute('src','//assets.pinterest./js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e);"><img src="//assets.pinterest./images/pidgets/pin_it_button.png" /></a>

Important: since pinit.js uses scheme-agnostic URLs, it will try to find things under file:// if you test by dragging HTML into your browser. Be sure you're running it on a server.

No. I only have a link on mine - works fine.

<a href="http://pinterest./pin/create/button/?url=http%3A%2F%2Fwww.example.%2Fproduct%3Fmodel%3DEQEA&amp;media=http%3A%2F%2Fwww.example.%2Fimg_c%2F14ngton%2Fdesign%2F232.jpg&amp;description=Dack+Earth" class="pin-it-button" count-layout="horizontal" target="_blank">
    <img src="http://example./images/pin_icon.png" title="Pin It">
</a>

You only need the script if you also want the counters to appear next to each button.