我怎样才能重新呈现Pinterest的Pin It按钮？

Question

我正在尝试在页面加载后创建和操作Pin It按钮.当我用js更改按钮属性时,应该重新渲染它以获得固定动态加载图像的功能.那么,Pinterest有没有像Facebook的B.XFBML.parse()函数那样的方法呢？

谢谢...

Answer 1

只需data-pin-build为SCRIPT标记添加属性:

<script defer
  src="//assets.pinterest.com/js/pinit.js"
  data-pin-build="parsePinBtns"></script>

这导致pinit.js将其内部build函数window作为parsePinBtns函数暴露给全局对象.

然后,您可以使用它来解析隐式元素中的链接或页面上的所有链接:

// parse the whole page
window.parsePinBtns();

// parse links in #pin-it-buttons element only
window.parsePinBtns(document.getElementById('pin-it-buttons'));

提示:显示零计数只需添加data-pin-zero="1"到SCRIPT标签.

Answer 2

最好的方法是:

1. 删除要操纵的Pin It按钮的iframe
2. 为你想要的新按钮添加html来操作它

3. Realod他们的脚本 - 即使用jQuery:

   $.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
   

Answer 3

要在页面加载后呈现pin-it按钮,您可以使用:

<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" />
</a>
<script>
    var element = document.getElementById('mybutton');
    (function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element);
</script>

当然假设assets.pinterest.com/js/pinit.js已经加载到页面上.render对象有一些其他有用的方法,如buttonBookmark,buttonFollow,ebmedBoard,embedPin,embedUser.