自定义URL自定义Pinterest的按钮（文字，链接，图片或两者）(Custom Pinteres

我试图找到解决办法，但不能。我需要为Pinterest的（别起来）按钮自定义图像，并通过PIN进行URL一些自定义图像，但不是当前页面。

我创建了一个自定义链接：

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

在风格上我设置背景图片，但我只看到默认的PIN It按钮，而不是我的自定义按钮

有一些解决方案，在这里你可以设置自定义按钮图像Pin它按钮，但我不能改变这些解决方案媒体= {} IMAGEURL。

流行的解决方案

<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>

但它并不能帮助我。是否有任何人知道解决的办法？

Answer 1:

事实上，由杰里米·曼斯菲尔德在流行的解决方案www.brandaiddesignco.com有一个伟大的方法来定制的Pinterest的按钮， 任何你想要的 ！

我做了三个例子 ，在的jsfiddle的形式，所以你可以看到它是如何使用该方法来完成。

参考： 的jsfiddle文本链接方法
参考： 的jsfiddle自定义标识方法
参考： 的jsfiddle自定义徽标和图像的方法

欲了解更多信息Pinterest的 ，看到我的其他SO答案 。

Answer 2:

该URL将防止Pinterest的的JS从“劫持”的链接的最后一个片段前添加一个空格编码：

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

更新：

看来我以前的解决方案不工作了。这是另一个问题：

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

Answer 3:

在超过简化事物的风险，请使用'http://pinterest.com/pin/create/button/?url='你已经得到了，成立了你的变量路径，并追加他们为你做的，只是不包括任何Pinterest的的JavaScript。如果没有JS，也不会找到链接，并用自己的Pinterest的按钮取代它。只是自定义链接，内带一个图像（或设置背景图片或其他），并拧Pinterest的JS。目标设置为打开一个新窗口。

Answer 4:

自定义链接/按钮看起来是这样的：

<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>

注：我不认为属性需要对数据进行编码（像我一样的数据图像），但它似乎并没有伤害它。

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:

这里是我工作：

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

属性数据引脚定制是我从拿起Pinterest的文档。

希望这可以帮助。

Answer 6:

有点反复试验后，下列是为我工作。这种反应是@ rharvey的响应线程和另一个堆栈溢出后的组合。该解决方案打开了一个弹出共享通过Pinterest的内容。

注意：为了防止2个窗口，从弹出你需要设定一个目标。下面是完整的解决方案：

 <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:

对我的作品完美。您的脚本

 <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>

有说它