Yes, my most recent Pinterest integration was painful, but it actually paved the way for a new method of automating Pinterest buttons. At least for me.
A couple months ago, when grabbing the "Pin it" button code from Pinterest, I was not required to provide the actual image URL. Apparently, this is now required, leading to a huge amount of work on the behalf of the site developer.
It could be assumed that most sites with images are built with some sort of template, and applying the Pinterest button would be straightforward. But what happens when we don't have a template system, but rather a CMS, where there aren't any hard-and-fast rules about where to expect images.
Without drifting too much here, I'd like to introduce my new method of applying the Pin it button:
The jQuery
$('img').each(function() {
$(this).before('<a href="http://pinterest.com/pin/create/button/?url=' + location.href + '&media=' + $(this).attr('src') + '&descrpition=' + $(this).attr('alt') + '" class="pin-it-button" count-layout="none"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>');
});
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = false; ga.src = '//assets.pinterest.com/js/pinit.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
$('img').parent().addClass('pin-it-wrapper');
The CSS
.pin-it-wrapper iframe { position: absolute; }
.pin-it-wrapper img { border-radius: 3px 0 0 0; }
This is a nifty way to drop a Pin It button "on top of" each image on the site, located in the upper-left corner of the image.
Might be preferable to do something like $('img').wrap('pin-it-wrapper');