If you don’t already know Pinterest, you should. This uprising star of social networks is the next big thing. Personally, what I like about it is that it’s driven by content - I don’t know most of the people I’m subscribed to, and they don’t know me. But the pictures are big and colorful, and repining is so easy… The virality factor is awesome! After I pin anything from my blog, I automatically see a spike in my stats, it can double the visits to my blog instantly.
Pinterest works on images, that’s the main content driver and posting without an image is just missing the point. Unfortunately for us, unlike the post title and url which are available through blogger data properties, the post doesn’t expose an “images” property (and it really should).
OK, so we all want in on the action, but the “pin-it” button Pinterest supplies doesn’t take into account dynamic content. I’ve seen a few solutions which take the pin-it bookmarklet (i.e. a short cut for your browser) and embed it on the page. That works fine and allows you to chose an image to pin, but then you don’t get the nifty count of how many people have pinned this page, and that’s a big loss.
Lucky for us, and as opposed to how the facebook like button works, we can control the image (or: media) property via javascript.
Note and warning: Before you do this, please back up your template. If you don’t know what that means, don’t even try.
First, you need to include jQuery on the page (blogger is nice enough to host it), paste the following right after the opening <head> tag:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
This next bit of script should be included once on the page, right before the closing body tag (</body>):
<script type='text/javascript'>
(function() {
// select all pin it buttons on the page
$('.pin-it-button').each(function()
{
// get all the images in this post
var postId = $(this).attr('post-id');
var images = $('#post-body-'+postId+' img');
var image;
// if there are no images, use a default image
if (images.length == 0)
{
image = 'replace-with-default-image-url'
}
else // use the first image found
{
image = images[0].src;
// blogger images can sometimes have url parameters, we want to strip those
if (image.indexOf('?') > -1)
{
image = image.split("?")[0];
}
}
var imageParam = '&media='+image;
var href = $(this).attr('href');
$(this).attr('href', href+imageParam);
});
// starting here - it’s the standard Pinterest script
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);
})();
</script>
The next bit of code should be placed wherever you want the button to appear. You can place it as many times as you want on the page. For more details on the parameters you can visit the Pinterest goodies page:
<b:if cond='data:post.url'>
<a class='pin-it-button' count-layout='horizontal|vertical|none (choose one)' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url+ "&description="+data:post.title' expr:post-id='data:post.id'/>
</b:if>
You can see the result at the bottom of this page. Note - this page doesn’t have any images, so you will get the logo image I have set as my default. Feel free to test it!
