Pinterest image overlay “Pin it” buttons

A growing new trend is to move Pinterest buttons away from the rest of the social sharing buttons which traditionally appear at the bottom, top or side of blog posts.

Instead, bloggers are overlaying Pin it buttons on each image in the blog post when someone hovers over it. Some are using a standard Pinterest button style, others are making their own.

On Oh Joy, when hovering over an image you see the following button appear (see bottom right):

Designlovefest does something similar, but also slightly fades the image when you hover on it. Here’s the before (top) and after (bottom):

Decor8 uses an official Pinterest style button when you hover on an image:

Meanwhile, Ban.do has a very loud call to action when you hover on its images with a pink tint and large lettering. Before (top) and after (bottom):

For blogs with large photos that people will be likely to want to pin, this is a great option.

By tying the pin it call-to-action buttons immediately with the images (rather than having to move elsewhere to do so), I would expect increased rates of pinning. I would imagine the Pin it overlays would work best up the top of images, rather than at the bottom. I am yet to see any quantitative data to back these theories up – if you have any figures on pin rates, please let me know!

By showing the pin it buttons on hover, it means one less social sharing button at the bottom of posts. Since images are pretty large on these blogs (and for it to be pinned), there’s a good chance that you’ll see the pin it buttons show up while scrolling down and reading the post.

Issues to consider

The first time I encountered this however, I found it a confusing to use. You have to click on the overlaid button or text in order to pin the image, rather just than clicking in any position. This makes sense when the rest of the image is linking somewhere else (e.g. Decor8 links over to the photo source on Flickr) but not so much when the rest of the image isn’t a link (e.g. Ban.do). Oh Joy I found the most confusing: clicking elsewhere on the image loads the image up in a new window by itself. Lots of bloggers do this. I’m guessing this is due to a default image link setting which they haven’t changed.

These buttons are also not so user-friendly on touch screens where there’s no such thing as “hovering” on an image. The examples listed above ranged from not working at all to working only if you knew to click on the image on my phone and tablet. A standard pin button might be more appropriate for these screens.

WordPress plugins to achieve this effect

• “Pinterest Pin It Button For Images”
• “Pinterest Plugin”

Update October 15 2013:

There is now an official way to do this, see On Hover Pin It Buttons.