How can i rerender Pinterest's Pin It button?

Just add data-pin-build attribute to the SCRIPT tag:

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

That causes pinit.js to expose its internal build function to the global window object as parsePinBtns function.

Then, you can use it to parse links in the implicit element or all of the links on the page:

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

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

Hint: to show zero count just add data-pin-zero="1" to SCRIPT tag.


The best way to do this:

  1. Remove the iframe of the Pin It button you want to manipulate
  2. Append the html for the new button manipulating it as you wish
  3. Realod their script - i.e. using jQuery:

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

To render a pin-it button after a page has loaded you can use:

<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>

Assuming of course the assets.pinterest.com/js/pinit.js is already loaded on the page. The render object has some other useful methods like buttonBookmark, buttonFollow, ebmedBoard, embedPin, embedUser.