Question

I am trying to add the Pinit button to my website. The problem is that, the Pinit button requires the image url, but in my case the images are generated dynamically. So how do I add the Pinit button such that it Pins the the visible image of the page.

Something like this example will do great.

Answer 1

http://jsfiddle.net/t4KHR/

run the below code once you have dynamically appended the images
set the parent variable as the ID parent of the images you want sharing

var url = document.location.href;
var parent = document.getElementById("imgholder");
var img = parent.getElementsByTagName("img");
for (i = 0; i < img.length; i++) {
    var newpin = document.createElement("a");
    newpin.href = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=' + encodeURIComponent(img[i].src);
    newpin.className = "pin-it-button";
    img[i].parentNode.insertBefore(newpin, img[i].nextSibling)
    if (i == img.length - 1) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "//assets.pinterest.com/js/pinit.js";
        document.getElementsByTagName("body")[0].appendChild(s);
    }

}