Category Archives: Pinterest

Rendering pinterest buttons on the fly

I started out googling  and soon enough I  found out a way to archive what I was after here.  The second method described was what I was looking for. Sadly it did not work, so I started debugging it, here is what I came up with.

 

!function(a,b,c){var d,e,f;f="PIN_"+~~((new Date).getTime()/864e5),a[f]||(a[f]=!0,a.setTimeout(function(){d=b.getElementsByTagName("SCRIPT")[0],e=b.createElement("SCRIPT"),e.type="text/javascript",e.async=!0,e.src=c+"?"+f,d.parentNode.insertBefore(e,d)},10))}(window,document,"//assets.pinterest.com/js/pinit_main.js");

Loading //assets.pinterest.com/js/pinit.js, just loads pinit_main.js that makes the jQuery onload callback fire before pinterest is loaded, from the setTimeout.

Secondly the function to get the pinterest instance was a bit flawed, when I tested this in my AJAX application I noticed that  when navigating around, adding/removing instances of pin buttons the objects gets cleaned up.

// Get the Pinterest instance
    get: function() {
      for (var i in window) {
         if (i.indexOf('PIN_') == 0 && typeof window[i] == 'object') {
            return window[i];
         }
      }
    },

So extra checks needed to find the active instance. Here is my take on it:

var Pinterest = {
    load: function(callback) {
        $.getScript('//assets.pinterest.com/js/pinit_main.js', callback);
    },

    // Get the Pinterest instance
    get: function() {
        
        var i;
        
        for (i in window) {
            if (window.hasOwnProperty(i)) {
                if (i.indexOf('PIN_') === 0 && typeof window[i] === 'object' && window[i].f.render.buttonPin !== undefined) {
                    return window[i];
                }
            }
        }
    },

    // Render Pinterest buttons
    render: function(el) {
        
        if (el.id.indexOf("PIN_") === 0) {
            return;
        }
        
        this.get().f.render.buttonPin(el);
    }
}

Try it out the JsFiddle here

Thanks sourcey for the initial code.