Create a dynamic Pinterest button?

Question

Is there any way to create a dynamic Pinterest button? I'm trying to add Pinterest support to a site where the main content is dynamic, so I would only have a single Pin It button in the page source that pinned whatever the current content was.

I can't figure out a way to do this with the prebuilt Pin It button, because it requires that you specify a hardcoded URL ahead of time.

However, there's also a Pin It bookmarklet that does achieve the effect I want - but that requires the user to manually add it to their bookmarks bar.

Is there any way that I can either (a) modify the Pin It button, or (b) somehow integrate the bookmarklet into my page such that it will pin whatever the current page content is?

Answer 1

For anyone who's interested, here's what I did:

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

Normally, when you click the Pin It bookmarklet in the browser's bookmarks bar, it dynamically inserts a script (pinmarklet.js) that auto-executes a function which brings up the Pinterest UI for choosing which images you want to pin.

I modified this so that the script is inserted when a link is clicked instead (#pinit). I also added an id to the script (#pinmarklet) so that I can remove it ($("#pinmarklet").remove();) and re-add it every time the link is clicked - otherwise, duplicate links to the same script keep piling up if you keep clicking the link.

Anyway, the end effect is that you're doing the same thing as the bookmarklet, just from within the page instead. So it works the same way and pulls whatever the current page content is, meaning you can change other content dynamically and it'll get picked up by the same one "Pin It" link.