Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 390
Sergey Avatar asked Jul 03 '12 14:07

Sergey


7 Answers

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.

like image 144
arttronics Avatar answered Oct 13 '22 22:10

arttronics


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=
like image 34
jzfgo Avatar answered Oct 13 '22 23:10

jzfgo


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.

like image 30
courtsimas Avatar answered Oct 13 '22 22:10

courtsimas


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;
});
like image 42
rharvey Avatar answered Oct 13 '22 22:10

rharvey


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.

like image 43
Mahesh Avatar answered Oct 14 '22 00:10

Mahesh


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>
like image 42
Michael Smith Avatar answered Oct 13 '22 23:10

Michael Smith


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>
like image 26
Misha Lin Avatar answered Oct 13 '22 22:10

Misha Lin