SixFive

Putting Pinterest on all your blog posts images

Pinterest is the next big thing - why? Because the user base is massively in favour of females. This is a new phenomenon in social networking, and its growing FAST!

I have had the pleasure of doing some work on my wife’s blog Sewing Daisies and she is very into pinterest too, as you can see on the Sewing Daisies Pinterest page, it turns out that lots of people also like her stuff so I thought it would be cool to help out all those lovely visitors of hers, and help the adoption of Pinterest too. 

So, what are we doing here? Well, Pinterest provide a few goodies to help all their users pin images to their boards.  These include the good old bookmarklet, the follow me button, and the pin it button for websites. This button works by opening up a window where you select the image you want to pin from the page. 

I wanted to make it easier, and provide a customised pin it button for each image in the post. Each post to pinterest includes:

• The url to the image
• The url the image appears on
• a description

Every image is easy to find with some javascript, every post has a permalink, and every image should have an alt tag (for the description) so everything is in place.

So, I put in place a bit of javascript, along with the pinterest asynchronous loader to put a pin it button on all of the images in the main content area. We didn’t want the images to be compromised, so the button only appears on hover of the image.

Here comes some JQuery!

First we find all the images in the post. Then we find the permalink for that post (note in archive lists we need to do it relative to the image.

Then we wrap the image in a div, that inherits the style of the image (for positioning purposes) and create the ‘pin it’ link with the url, permalink and description all ready to go!

Finally we include the pinterest asynchronous load.

$().ready(function() {
		$('.entry-body img').each(function(){
			var $permalink = $(this).parents('.entry').find('.permalink').attr('href');
			$(this).wrap('<div class="pinme" style="' + $(this).attr('style') + '" />').after('<a href="http://pinterest.com/pin/create/button/?url=' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $(this).attr('alt') + '" class="pin-it-button" count-layout="vertical">Pin It</a>');
		});
		$('.pinme').hover(function() {
		      $(this).children('iframe').css('display','block');
		}, function() {
		      $(this).children('iframe').css('display','none');
		});
});

(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();

Note if you want to use this you will need to change the selectors to the imagesand permalink. Anyone with more experience than me may also be able to tell me how to make this more efficient. 

Check it out by visiting Sewing Daisies and hovering over an image in the center.