Question

我试图找到解决方案，但不能。我需要Pinterest（Pin It）按钮的自定义图像，并按网址固定一些自定义图像，但不是当前页面。

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

<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 It按钮设置自定义按钮图像，但我无法在这些解决方案中更改media = {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

Jeremy Mansfield 在www.brandaiddesignco.com的流行解决方案有一个很好的方法来自定义Pinterest按钮任何你想要的方式！

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

参考： jsFiddle Text-Link method
参考： jsFiddle Custom Logo method
参考： jsFiddle Custom Logo and Image method

如需更多 Pinterest信息，请参阅我的其他SO Answer。

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

这对我有用：

 location ~*/dust$  {

    rewrite "/([^/]+)/dust/" /$1/nodust/ break;

}

属性data-pin-custom是我从Pinterest documentation获取的内容。

希望这有帮助。

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>

用

调用它

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

用于自定义URL的自定义Pinterest按钮（文本链接，图像或两者）

7 个答案: