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 80x80. 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.
Good tip!
Thanks! Exactly what I needed
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.
Just the solution I was looking for. Thanks!