Html 自定义 URL 的自定义 Pinterest 按钮（文本链接、图像或两者）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11312923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom Pinterest button for custom URL (Text-Link, Image, or Both)
提问by Sergey
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.
我试图找到解决方案，但不能。我需要 Pinterest 的自定义图像（Pin It）按钮并通过 url 固定一些自定义图像而不是当前页面。
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
在样式中我设置了背景图像但我只看到默认的 Pin It 按钮而不是我的自定义按钮
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.
在某些解决方案中，您可以为 Pin It 按钮设置自定义按钮图像，但我无法更改这些解决方案中的 media={ImageURL}。
The popular solution is
流行的解决方案是
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+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?
但这对我没有帮助。有谁知道解决办法？
回答by arttronics
Indeed the popular solution by Jeremy Mansfieldat www.brandaiddesignco.comhas a great method to customize the Pinterest button any way you want!
事实上，在流行的解决方案杰里米·曼斯菲尔德在www.brandaiddesignco.com有一个伟大的方法来定制的Pinterest的按钮，任何你想要的！
I've made three examples, in the form of jsFiddle's, so you can see how it's done using that method.
我已经以jsFiddle 的形式制作了三个示例，因此您可以看到它是如何使用该方法完成的。
Reference:jsFiddle Text-Link method
Reference:jsFiddle Custom Logo method
Reference:jsFiddle Custom Logo and Image method
参考：jsFiddle Text-Link方法
参考：jsFiddle自定义Logo方法
参考：jsFiddle自定义Logo和Image方法
For more Pinterest Info, see my other SO Answer.
有关更多Pinterest 信息，请参阅我的其他SO 答案。
回答by jzfgo
Adding an encoded whitespace before the last fragment of the URL will prevent Pinterest's JS from "hiHymaning" the link:
在 URL 的最后一个片段之前添加一个编码的空格将防止 Pinterest 的 JS “劫持”链接：
//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=
回答by courtsimas
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.
冒着过度简化事情的风险，使用您'http://pinterest.com/pin/create/button/?url='已经拥有的路径，设置您的变量，并按照您的方式附加它们，并且不要包含任何 pinterest javascript。没有那个 js，它不会找到链接并用他们自己的 pinterest 按钮替换它。只需使用其中的图像自定义您的链接（或设置背景图像或其他）并拧紧 pinterest js。将目标设置为在新窗口中打开。
回答by rharvey
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;
});
回答by Mahesh
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.
属性 data-pin-custom 是我从Pinterest 文档中获取的。
Hope this helps.
希望这可以帮助。
回答by Michael Smith
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.
经过一些反复试验，以下是对我有用的方法。此响应是@rharvey 的响应线程和另一个堆栈溢出帖子的组合。此解决方案打开一个弹出窗口以通过 pinterest 共享内容。
Note: In order to prevent 2 windows from popping up you need to set a target. Below is the full solution:
注意：为了防止弹出 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>
回答by Mishka Alt
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>
