Can I use an image that's not on my page for Pinterest pinning?

Someone recently asked me if it was possible to use an image for pinning on Pinterest that wasn't actually used on the page. More specifically, she wanted to display a specific stillshot of an embedded video with a play button watermarked on it so that it would be evident that a video was being shared. I wasn't sure, so I devised a test, which is remarkably similar to the one below. The short answer is, yes, you can use pretty much any image that you want, as long as you tag it to the page as a hidden element. Here's how:

Red Visisble Box

This one's a no-brainer. Show the image on the page and then you can use it for pinning:

Red Visible

1. <img src="" alt="Red Visible" />

Blue Hidden Box

You can't see the next image (a blue box), but it's there, and can also be used as your image for Pinterest pinning:

Blue Hidden

1. <img src="" alt="Blue Hidden" style="display:none;" />

The downside is, of course, that you're forcing all of your users to download an image that they're never even viewing. You're going to increase load time and your server bandwidth. But, if you need to use a custom image for your pins, this is probably the most straight-forward way of doing it.

1 Comment

February 24, 2013, 4:27 am
I've tried this with chrome and firefox Pinterest add-ons and it doesn't recognize the blue image…

Leave a Comment

Name and email are required. Your email will not be published.

This post was published on March 12th, 2012 by Robert James Reese in the following categories: CSS and Pinterest. Before using any of the code or other content in this post, you must read and agree to our Terms & Conditions.