Create a custom Pinterest “Pin It” button for your website

Here is the Javascript code I use to create a Pin It button for a web page using a custom graphic:

 

<div>
<a href="javascript:void((<wbr>function(){var%20e=document.<wbr>createElement('script'); e.<wbr>setAttribute('type','text/<wbr>javascript'); e.setAttribute('<wbr>charset','UTF-8'); e.<wbr>setAttribute('src','<a href="http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)())" target="_blank">http://<wbr>assets.pinterest.com/js/<wbr>pinmarklet.js?r='+Math.random(<wbr>)*99999999);document.body.<wbr>appendChild(e)})())</wbr></wbr></wbr></wbr></a>;"> <img src="images<a href="http://www.clickinmoms.com/cmprodaily/wp-content/uploads/2011/09/pinit.jpg" target="_blank">/pinit.jpg</a>" alt="Pin It" /></a> </div>  </wbr></wbr></wbr></wbr></wbr></wbr>

You will want to change the path to the image in the code above so that it points to the graphic that you want to use for the Pin It button. You could also substitute text for the graphic if you prefer.

 

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."

  • Pingback: Create a custom Pinterest “Pin It” button for your website … « Zipsite.net()

  • differentspin

    I had been using this code on my site for a while and today I noticed that it’s not working anymore. Did pinterest change something?

    • http://thelibzter.com Libby Fisher

      Hi,

      I am not aware of anything changing on Pinterest but that is definitely possible. If you send me a link to your page, I can take a look at it.

      Thanks!!

  • http://braintechie.blogspot.co.uk Renjith

    Nice!

    I have written a blog with the details on the technology behind Pin It button.

    http://braintechie.blogspot.co.uk/2012/11/anatomy-of-pin-it-button-javascript.html

    • http://thelibzter.com Libby Fisher

      Thats awesome and very helpful, thanks for sharing the link!! :)

  • http://www.thesharpprice.site11.com/01_00_00001_00.html Jason

    I tried your code, but when I click the button pinterest button, I get a message that says “sorry, couldn’t find any pinnable images or video on this page”.

    Any ides how I can fix this? I’m not much of a coder so I would need really simple instructions.

    • http://thelibzter.com Libby Fisher

      Hi Jason,

      Well the first two things I would look into are the sizes and types of images you are trying to pin, since apparently the only supported types are JPG, PNG, and Gif – http://computer.howstuffworks.com/10-pinterest-tips-for-newbies4.htm and if I am not mistaken, the minimum size for images is 109 x 109 px. Hope that helps!

      Thanks!

      ~Libby

  • jett mould

    I think it is the most reliable information for student for their academics .I have something for students It is the most reliable and authentic assignment help review platform where students come to share feedback on assignment writing service provider websites.
    Top assignment help