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?

Any solutions how to do that? – Sergey Jul 04 '12 at 05:34 — Sergey, Jul 04 '12 at 05:34

score 21 · Answer 1 · edited Jun 20 '20 at 09:12

21

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 15 '12 at 01:45

arttronics

9,957
2
26
62

2

Heads up: this is for the old pinterest button. – phillyslick Dec 05 '14 at 19:23
1

Thanks for the feedback Ben Polinsky. These old jsFiddle examples are for webpages still using [http://assets.pinterest.com/js/pinmarklet.js](http://assets.pinterest.com/js/pinmarklet.js) instead of the newer [http://assets.pinterest.com/js/pinit.js](http://assets.pinterest.com/js/pinit.js) JavaScript files. For more info on the NEW Pinterest Pin It Button, see the [official webpage](https://developers.pinterest.com/pin_it/). Once the old method is no longer supported by Pinterest, I'll remove this answer. Cheers! – arttronics Dec 06 '14 at 00:03
1

This is the only working solution out of all of the above. This should be the accepted answer. – Feb 08 '15 at 11:09
1

**2016**: Here is my cleaned up version that supports both HTTP/HTTPS, latest version of jQuery, and both the text method and image method listed above. https://jsfiddle.net/prrstn/Lh5b5upb/ – Preston Badeer Feb 10 '16 at 19:25
1

@PrestonBadeer, thanks for the comment, and since some users will auto scroll to the most recent answer, consider posting this comment and/or your jsFiddle as an answer too, in which case I will upvote it. To be sure, your jsFiddle stands on it's own nicely. – arttronics Feb 11 '16 at 00:22
1

@arttronics Thanks for the suggestion, I have added it as an answer. – Preston Badeer Feb 11 '16 at 22:46

jzfgo · Answer 2 · 2013-12-05T19:36:38.790

21

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=

edited Dec 05 '13 at 19:36

answered Jul 25 '13 at 10:32

jzfgo

367
3
8

This causes the pins to fail for me. – d_ethier Dec 03 '13 at 19:48
This will work (just tested 5 minutes ago)... but you'll also have to provide what they say is an "image_url" parameter. Their notification is lying, you have to use "media" and it'll work. So, /?url=mysite.com&media=mysite.com/whatever-image.jpg – Matt Kenefick Feb 17 '14 at 19:03
I'm using the second option with "media" and its working for me. It has stopped the Pinterest JS from taking over my link, Thanks. – CoalaWeb Aug 27 '15 at 12:51

score 17 · Answer 3 · answered Feb 23 '13 at 00:29

17

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.

answered Feb 23 '13 at 00:29

courtsimas

764
1
13
20

This simplified the process SO much. Why didn't I think of that before... Thank you! – Taylor714 Jun 18 '14 at 00:17
Hi, thank you for the insight. Could you possibly provide an example? I think this would be really helpful. – Michael Smith Feb 14 '15 at 00:21
1

@MichaelSmith I could... but to be honest, the answer by rharvey is probably better because it's more robust. If you still want a non-js example, let me know and I'll type it out. – courtsimas Feb 25 '15 at 18:13

score 15 · Answer 4 · answered Jul 29 '14 at 15:16

15

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;
});

answered Jul 29 '14 at 15:16

rharvey

1,987
1
28
23

works. simple and lightweight. i also added the following parameters to the window.open call to more closely resemble the oob pinterest pop up window... ,"toolbar=no, scrollbars=no, resizable=no, top=0, right=0, width=750, height=320" – anthony Dec 12 '14 at 17:13
There seems to be an issue with this. This solution opens 2 windows whenever I click on the pinterest link. – Michael Smith Apr 03 '15 at 00:11
That's strange Michael, I just tested it and it still seems to work. See this jsfiddle https://jsfiddle.net/wtjfcyuw/ – rharvey Apr 03 '15 at 09:09
Not sure why this is happening on my side. I read that the "return false" should prevent another window from popping up. I ultimately had to set a target prevent this from happening. – Michael Smith Apr 03 '15 at 17:45
1

Also, It might be worth passing in the event object into the function and calling event.preventDefault() see updated jsfiddle https://jsfiddle.net/wtjfcyuw/1/ – rharvey Apr 04 '15 at 13:04

score 6 · Answer 5 · answered Oct 30 '15 at 05:34

6

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.

answered Oct 30 '15 at 05:34

Mahesh

407
5
4

This should be the current accepted answer. Pinterest added support for this (`data-pin-custom`) as it was a frequently requested feature. – Jan Klimo Jun 18 '16 at 04:00
This worked for me except I used a text link rather than an `` – scottperezfox Mar 08 '17 at 22:13

score 2 · Answer 6 · answered Apr 03 '15 at 17:43

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>

score 1 · Answer 7 · edited Apr 10 '15 at 01:59

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>

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

7 Answers7

Linked