html - Custom Pinterest button for custom URL (Text-Link, Image, or Both)

Question

I tried to find the solution but can't. I need a custom image for Pinterest (Pin It) button and pin some custom image by url but not a current page.

I created a custom link:

<a href="http://pinterest.com/pin/create/button/?url=http://inspired-ui.com&media={ImageURL}&description=DescriptionText" class="pinitbutton">Pin It</a>

in style I set the background image but I see only default Pin It button and not my custom button

There are some solutions where you can set custom button image for Pin It button but I can't change the media={ImageURL} in those solutions.

The popular solution is

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://www.brandaiddesignco.com/blog/PinIt.png'/></a>

But it doesn't help me. Does any one know the solution?

Answer 1

Indeed the popular solution by Jeremy Mansfield at www.brandaiddesignco.com has a great method to customize the Pinterest button any way you want!

I've made three examples, in the form of jsFiddle's, so you can see how it's done using that method.

Reference: jsFiddle Text-Link method
Reference: jsFiddle Custom Logo method
Reference: jsFiddle Custom Logo and Image method

For more Pinterest Info, see my other SO Answer.