Make it easy for Pinterest to drive traffic: pinterest pin it button for 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! This small tutorial will show you how to add Pinterest pin it button for images on your site. I have had the pleasure of doing […]
February 26, 2012 10:18 pm

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! This small tutorial will show you how to add Pinterest pin it button for images on your site.

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.

Note if you want to use this you will need to change the selectors to the images and 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.

5 Comments

This is a great script ! We are interested to integrate it in our PowerPoint blog that is heavily using images. So I think I will move ahead and try to use it. Thanks.

Hey Julian, thanks for the note – you will need to alter the selector that grabs the permalink, other wise it should all drop straight in.

Good luck!

Thanks for the information. Important.

Hey Rosalind, no problem, I think it’s a great way to help your users promote you!

Hi, Im looking to add a pin it button that relates to the current image showing in my jquery image gallery.

The image gallery is in a whole separate div named gallery, then the thumbs are contained in an id named bx-pager and the images in a ul class named bxslider.

Is it possible to create a separate pin it button in its own class within the gallery div that picks the relevant image that is showing?

Any help would be greatly appreciated

Thanks

Leave a Comment

Login
Log in below to access your courses.
Log In With Google
Forgot Password
Enter your email address or username and we’ll send you instructions to reset your password.