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 .

Answer 2

Adding an encoded whitespace before the last fragment of the URL will prevent Pinterest's JS from "hijacking" the link:

//pinterest.com/pin/create/%20button?url=

Update:

It seems that my previous solution doesn't work anymore. Here is another one:

//pinterest.com/pin/create%2Fbutton/?url=

Answer 3

At the risk of over simplifying things, use your 'http://pinterest.com/pin/create/button/?url=' path that you've already got, set up your variables, and append them as you do, and just don't include any pinterest javascript. Without that js, it won't find the link and replace it out with their own pinterest button. Just customize your link with an image inside it (or set a background image or whatever) and screw the pinterest js. Set the target to open in a new window.

Answer 4

Custom Link/Button looks like this:

<a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt">
    Custom Pin it image or text here!
</a> 

Note: I don't think the data attributes need to be encoded (like I did for data-image) but it doesn't seem to hurt it.

JQuery:

$('.btnPinIt').click(function() {
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank");
    return false;
});

Answer 5

Here is what worked for me :

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-custom="true"><img src="../img/custompinint.png" /></a>

The attribute data-pin-custom is what I picked up from Pinterest documentation .

Hope this helps.

Answer 6

After a bit of trial and error, below is what worked for me. This response is a combination of @rharvey's response thread and another stack overflow post. This solution opens up a pop up to share content via pinterest.

Note: In order to prevent 2 windows from popping up you need to set a target. Below is the full solution:

 <a href="http://stackoverflow.com/questions/11312923/custom-pinterest-button-for-custom-url-text-link-image-or-both" data-image="http%3A%2F%2Fcdn.sstatic.net%2Fstackexchange%2Fimg%2Flogos%2Fso%2Fso-logo.png" data-desc="Custom Pinterest button for custom URL (Text-Link, Image, or Both)" class="btnPinIt" target= "pinIt">
    Custom Pin it image or text here!
</a> 

<script>
$('.btnPinIt').click(function() {
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"pinIt","toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320");
    return false;
});
</script>

Answer 7

Works for me perfectly. Your script

 <script>
    function pinIt()
    {
      var e = document.createElement('script');
      e.setAttribute('type','text/javascript');
      e.setAttribute('charset','UTF-8');
      e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
      document.body.appendChild(e);
    }
    </script>

Call it with

<a href="javascript:pinIt();">Pin</a>