创建一个动态的Pinterest按钮？

Question

有没有办法创建动态Pinterest按钮？我正在尝试将Pinterest支持添加到主要内容是动态的站点,因此我只在页面源中有一个Pin It按钮,它固定了当前内容.

我无法找到使用预建Pin It按钮执行此操作的方法,因为它要求您提前指定硬编码的URL.

但是,还有一个Pin It bookmarklet可以实现我想要的效果 - 但这需要用户手动将其添加到书签栏.

有没有什么方法可以(a)修改Pin It按钮,或(b)以某种方式将书签集成到我的页面中,以便它可以固定任何当前页面内容？

Answer 1

对于任何有兴趣的人,这就是我所做的:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(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);
    });
});

通常,当您单击浏览器书签栏中的Pin It书签时,它会动态插入一个脚本(pinmarklet.js),该脚本会自动执行一个函数,该脚本会调出Pinterest UI以选择要固定的图像.

我修改了这个,以便在单击链接时插入脚本(#pinit).我还在id脚本(#pinmarklet)中添加了一个,这样我就可以删除它($("#pinmarklet").remove();)并在每次点击链接时重新添加它 - 否则,如果你不断点击链接,那么同一个脚本的重复链接会不断堆积.

无论如何,最终效果是你正在做与书签相同的事情,只是在页面内.因此它以相同的方式工作并拉动当前页面内容的任何内容,这意味着您可以动态地更改其他内容,并且它将被相同的"Pin It"链接拾取.