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" src="image_for_pinterest.jpg">
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 MLB.com Personas Interactive page.