Button 创建动态Pinterest按钮？

有没有办法创建动态Pinterest按钮？我正在尝试向一个主要内容是动态的站点添加Pinterest支持，因此我在页面源中只有一个PinIt按钮，用于固定当前内容

我想不出一种使用预构建的Pin-It按钮的方法，因为它要求您提前指定一个硬编码的URL

不过，还有一个Pin-It bookmarklet，它确实达到了我想要的效果，但是需要用户手动将其添加到书签栏中

---

有没有什么方法可以（a）修改“锁定”按钮，或者（b）以某种方式将bookmarklet集成到我的页面中，使其锁定当前页面内容？

对于任何感兴趣的人，以下是我所做的：

HTML:

通常，当您单击浏览器书签栏中的Pin-It bookmarklet时，它会动态插入一个脚本（

pinmarklet.js

），该脚本自动执行一个函数，该函数会打开Pinterest用户界面，以选择要锁定的图像

我对此进行了修改，以便在单击链接时插入脚本（

#pinit

）。我还向脚本（

#pinmarklet

）添加了一个

id

，这样我就可以删除它（

$（“#pinmarklet”）.remove（）；

）并在每次单击链接时重新添加它-否则，如果继续单击链接，指向同一脚本的重复链接会不断堆积

无论如何，最终的效果是，您正在做与bookmarklet相同的事情，而只是从页面内部进行。因此，它以同样的方式工作，并提取当前页面内容的任何内容，这意味着您可以动态更改其他内容，并且它将被同一个“Pin it”链接拾取。

我已经构建了一个

使用此解决方案的方式取决于站点是在服务器端（使用PHP或其他后端语言）动态填充页面，还是在客户端通过JavaScript和AJAX方法动态填充页面

对于服务器端，您将生成HTML5

，并在模板中填写其

数据-*

属性，然后在

关闭之前加载

pinterest-plus-HTML5.min.js

文件和

标记

对于客户端，您需要加载

pinterest-plus-html5.min.js

文件，或者使用

中的

标记，或者通过异步加载，如文档中所述。接下来，您将使用JavaScript生成HTML5

，动态插入或替换页面上的Pinterest按钮标记，然后调用

PinterestPlus.pinit（）

将

转换为Pinterest按钮

---

我希望这有帮助

一个简单的服务器端解决方案可能比客户端更好。

---

（PHP、WordPress或ASP）

pintrest按钮的引脚由按钮href中的参数控制

Pinterest的动态链接

下面的代码将为不同的页面生成动态pinterest按钮

Pinterest为构建动态按钮提供了“构建”功能。这意味着您可以动态生成Pinterest锚&使用此函数将其转换为Pinterest按钮，就像pinit.js加载时所做的那样

---

这里解释了如何指定函数的名称：

我有一个全屏图库页面，页面底部只有一个pinterest按钮，我在这个页面中寻找解决方案。没有成功，我想到了这个：

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1];
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

正则表达式

/\（（.+）\）/

可用于解析背景属性中的图像url，因为其格式为

url（'image.jpg'）

，因此正则表达式删除

url（“”）

，并仅给出路径

---

然后我用我的新图像设置属性

data-pin href

，效果很好

谢谢分享！：这太棒了。从某种程度上来说，德洛里亚回到12年仍然是最好的解决方案。这并不是pinterest中的“标题”。

$(document).ready(function(){
    $("#pinit").click(function(){
        $("#pinmarklet").remove();
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('id','pinmarklet');
        e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
    });
});

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none">
 <img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0">
</a> 

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1];
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");