How To Turn Your Images Into Pinterest ‘Pin It’ Buttons

Like this:

If you’re like me, you recently discovered Pinterest and are now trying to figure out how best to use it. I first learned of Pinterest in June of last year when I noticed I was getting a lot of traffic from this new site. When I checked it out, I found an online bill board community, where people were ‘pinning’ things they like the looks of, both for their own future reference and as a way of telling their friends about them. I realized that helping people pin my posts would help new readers find my blog. But how to do it?

Pinterest has a number of solutions on offer, but if you want to give people who don’t have the bookmarklet a ‘quick’ link to pin images from your site, you’d have to hand-code a button for each image with an individual url. The prospect of doing that for future posts was daunting, let alone going back and retrofitting my archives. Forget it. What I wanted was an easy way to drop some code into my site and let it do the work.

I did find one and so, if you’re handy with code and css, head over to Chykalophia Design (Ari Krzyzek’s fabulous blog) and check it out. But sadly her method didn’t work with my chosen WordPress theme. Either that or I’m completely inept, which is also possible. So anyway, I ended up hacking a solution. It’s not quite as elegant and hands-free as I had hoped, but it IS easy and it does the trick. This works for self-hosted WordPress.org and Blogger blogs.

1. Head over to Ari’s blog and download an image file for a Pin It button. Using my method, you’re going to overlay this on top of your images, so choose something unobtrusive that will fit in a corner of your photo to mark it out as being clickable. If you like the ribbon I use (which Ari is kindly giving away free of charge) then click here to download the .png file.

2. Make sure your button overlay has a clear (no) background. This usually means removing the background in Photoshop and saving it as a .png. If you use the image linked above, that is already done.

3. Edit your photos for your blog posts as normal, then simply overlay the .png file over your finished image and save. It’s just one extra step to your photo editing process. If you’re handy with actions, you could even create a PS action that does it for you. (Let me know if you do and are willing to share it!)

4. For WordPress.org: When you’re uploading your image into your blog post, simply copy this javascript code (had to do it this way since I have right-click disabled on my blog) and then paste it into the field for ‘Link URL’:

For Blogger: In your post editor, upload your image as usual and then click on it. You should see a menu appear along the bottom of the image. Select ‘Edit Link’ and then in the ‘To what url should this link go?’ field, insert the javascript.

5. Save and test.

That’s it. Yes, it means repeating steps 3 and 4 with each image, but it’s really not much more work than you have to do anyway. And you don’t have to customize the code with the individual url each time (as you would with Pinterest’s solution) because the code we’re using is from the javascript bookmarklet – it automatically grabs the current page url. Just keep that piece of code somewhere you can copy and paste from (I keep it on a virtual sticky on my desktop).

When a reader clicks on your image they will be given the option to pin any of the images on that page, not only the image they clicked on. This means that you can do this just for the first image of each post if you (like me) want to have it be less of a distraction for readers and less of a chore for you.

If anyone reading this has found, or come up with, a better solution, I’d love to hear about it. I’m still hoping Pinterest staff will catch up with demand and create some more user-friendly options for bloggers on all platforms (I emailed them last year asking for this and their response was that they ‘have had many similar requests and are working on it’. In the meantime, this will be my routine.

Oh, and if you try this and it works for you, please do something for me:

1. Leave Ari some love as a Thank-You for the fabulous free graphics.

2. Come back here and leave a comment with a link to your site, showing it off.

3. Tell your readers where you learned it!

4. Head over to my Facebook page and ‘Like’ it. That way when I hear of something new, you will too.  :-)

Cheers,

Ruby x

Update 29/1/2012:

I’m now using the Pinterest Plugin, which places a Pin It button at either the top or bottom (or both) of my posts and/or pages (customizable). It uses the bookmarklet javascript and the button is not located next to individual images, so at the moment I’m still using the method above for my top/featured images, as well as the plugin at the bottom of my posts. However, future updates of the plugin promise to eventually negate the need for my workaround. Yay!

Update 30/1/2012:

As is often the case with technology, no sooner was my tutorial written than it was rendered almost unnecessary. I’m pleased to say that the Pinterest Plugin now includes the ability to insert shortcode into the body of your post and it will create a button there. Wherever you want. Again, this button works as the bookmarklet, so if that’s what you’re after, this is the answer for you. Personally, I’m thrilled… and a little torn. Although I like the corner ribbon (pictured above) and the idea that the actual image can be a pin it button, the need to add it to each image is not ideal. The plugin lets you put the button wherever you like in the post, but I actually don’t like anywhere quite so well as the corner of the image! I’m not sure yet which way I’ll go, but if you want it, search for ‘pin it button’ from the ‘add new plugin’ menu in WP.

Update 3/2/2012:

Tested this method in Blogger and it worked, so I’ve incorporated the instructions above.