Adding a Pinterest Image Without Impacting Your Page Design

Recently I had to modify a page to work with Pinterest. The problem was that all the images on the page were either CSS background images or had a height or width of less than 80 pixels. In those cases, the Pin It bookmarklet simply ignores the images. So the question I had was how to make a page Pinterest friendly without impacting the design.

I wanted to add a brand new image, but I didn’t want it to be visible on the page at all. So first I tried the obvious – use CSS to hide the image. The bookmarklet was too smart for me. If an image is hidden via CSS, it won’t be found. Then I tried setting the height and width to 0 via CSS. This didn’t work because the images were less than 80×80. The Pinterest bookmarklet honors the height and width specified via CSS.

In the end, I came up with a solution using opacity:

<img style="opacity: 0;position: absolute;top:0; left:0"

Pinterest picks up this image and it does not display on the page or affect page layout.

This method can also be used if you want a specific image to be the first image Pinterest finds.

If you want to see this in action, check out the Personas Interactive page.

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *

10 thoughts on “Adding a Pinterest Image Without Impacting Your Page Design

  1. Pro tip: Don’t cover your logo with an invisible image! You will lose the mouse click if the invisible image is above the logo or any other link on your website for that matter.

  2. Thanks for this tip. I have implemented on my page rank checking site which doesn’t have any image otherwise. I didn’t know that people had actually pinned that site and it looked really funny. Now, I added a hidden screenshot as per your snippet – everything looks good now.

    (I hope, the above snippet doesn’t break or expose on some browsers)