Pinterest is next up my GitHub Project series :)
What is this?
JS-Pinterest is a simple, small extension of Pinterest's "Pin It" button. It's a script that can be dropped into any page, with the exact same functionality upon embedding as the existing Pinterest code.
The difference is it provides a method, init, backdropped against a globally-scoped Pinterest object, which allows you to run the Pinterest-button conversion logic again.
Use case
When a page loads and you have Pinterest buttons on it, the standard code will be run immediately, turning them into smart buttons; buttons that have the counts next to them representing how many times they've been pinned.
The issue comes in with buttons that are added to the page after the page has finished loading. A great example of this is a modal-popup whose HTML comes from an AJAX call.
If this HTML has Pinterest buttons in it, they wouldn't have the counts next to them because the Pinterest JavaScript code as already run.
In this case, you would make use of the init method to run the logic again, which will turn any new Pinterest buttons into the "smart" ones.
What's included?
One file, Pinterest.js, including one public method:
initRuns the Pinterest code on the page again, turning any new Pinterest buttons into the "smart" ones, with counts and everything :)
How do I use it?
After you insert a new Pinterest button into the page (eg. through an AJAX call or creating it using jQuery, etc.), you simply run the following:
Pinterest.init();
That's it :)
This will run, and do it's thing.
Why did I abstract it out?
This basic functionality isn't unfortunately included with the button-code that is hosted and distributed by Pinterest. I needed the functionality, but in order to make it work elegantly, I needed to include the original logic.
Hope that makes sense, and saves someone some time :)