Ajax Pinterest Buttons

It turns out re-rendering or rendering ajax’d into place Pinterest buttons is quite straight forward. Not that you can find this in the Pinterest docs…

Update the way you include the Pinterest js:

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

The defer defers loading of the script until after the page has loaded. The important bit is the data-pin-build attribute. This makes the pinit.js expose its internal build function as parsePins on the global window object.

And then to use:

// parse a DOM element
window.parsePins($("#element")[0]);

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

The function is looking for a DOM node and not a jQuery object which is an array like object; so selecting the DOM node the jQuery object wraps is needed.

And thats it.