用于自定义URL的自定义Pinterest按钮(文本链接,图像或两者)

Question

我试图找到解决方案,但不能.我需要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>

但它对我没有帮助.有人知道解决方案吗？

Answer 1

事实上,Jeremy Mansfield在www.brandaiddesignco.com上的流行解决方案有一个很好的方法来按照你想要的方式定制Pinterest按钮!

我已经用jsFiddle的形式做了三个例子,所以你可以看到它是如何使用该方法完成的.

参考: jsFiddle Text-Link方法
参考: 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>

属性data-pin-custom是我从Pinterest文档中获取的.

希望这可以帮助.