36

我试图找到解决方案，但找不到。我需要一个 Pinterest（Pin It）按钮的自定义图像，并通过 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 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>

但这对我没有帮助。有谁知道解决方案？

4

7 回答 7

21

事实上，Jeremy Mansfield在www.brandaiddesignco.com上的流行解决方案有一个很好的方法来自定义 Pinterest 按钮，你可以随心所欲！

我以jsFiddle 的形式制作了三个示例，因此您可以看到使用该方法是如何完成的。

参考： jsFiddle Text-Link 方法
参考： jsFiddle Custom Logo 方法
参考： jsFiddle Custom Logo and Image 方法

有关更多Pinterest 信息，请参阅我的其他SO 答案。

于 2012-07-15T01:45:47.527 回答
21

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

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

更新：

看来我以前的解决方案不再起作用了。这是另一个：

//pinterest.com/pin/create%2Fbutton/?url=
于 2013-07-25T10:32:48.837 回答
17

冒着过度简化事情的风险，使用你'http://pinterest.com/pin/create/button/?url='已经拥有的路径，设置你的变量，然后像你一样附加它们，只是不要包含任何 pinterest javascript。如果没有那个 js，它将找不到链接并用他们自己的 pinterest 按钮替换它。只需使用其中的图像自定义链接（或设置背景图像或其他）并拧紧 pinterest js。将目标设置为在新窗口中打开。

于 2013-02-23T00:29:49.003 回答
15

自定义链接/按钮如下所示：

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

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

查询：

$('.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;
});
于 2014-07-29T15:16:12.347 回答
6

这对我有用：

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

属性 data-pin-custom 是我从Pinterest 文档中获得的。

希望这可以帮助。

于 2015-10-30T05:34:26.633 回答
2

经过一些试验和错误，以下是对我有用的。此响应是@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>
于 2015-04-03T17:43:21.053 回答
1

完美地为我工作。你的脚本

 <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>
于 2015-04-10T01:37:24.470 回答