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
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.