The Hidden Pinterest Stack

After our site took a hit in Google this year, we realized we needed to double down on the social media front. We targeted Pinterest first.

Specifically, we started looking for ways to make the sharing experience better for users and more effective overall. Pinterest has always been important to us since we’re a recipe site and so many people use Pinterest as a recipe box. We discovered lots of room for improvement and made three significant changes on our site that have enhanced the pinning experience and have ultimately resulted in more referrals from Pinterest.

In this article, I’m going to walk you through the first one.  I haven’t seen this technique posted anywhere, but it’s incredible useful.

In Defense of Vertical Photos

If you use Pinterest, you know that tall vertical photos work really well in Pinterest, especially the tall “stack” photos.  Even the Pinterest business blog recommends vertical photos. However, those skyscraper-type images don’t play well with most site designs—certainly not ours. Plus, because the title of a Pin isn’t displayed on mobile devices, having the title in the image is common; but that also looks weird on a typical site where the title is presumable up top.

So, the dilemma arises. You want a nice Pinterest-friendly 1 image available for people to pin, but it just doesn’t work in the context of your site’s design.

Some Bad Solutions

You could technically put the image in a hidden div on the page. 2 However, most browsers still load hidden images, and those tall images tend to be rather large. Your page performance would take a hit and it would cost visitors time and bandwidth.

Fortunately, Pinterest recently introduced the data-pin-media attribute, which lets you point to an alternate image from one of your image tags. In other words, if your featured image was a landscape-oriented image, but you wanted to point to a portrait-oriented alternative, you’d some something like:

<img src="landscape.jpg" alt="" data-pin-media="portrait.jpg" />

This would tell the Pin It button to show portrait.jpg instead of landscape.jpg in the image selection screen. Handy!

But there’s a problem. It’s a lousy user experience. If someone hovers the landscape image and clicks “Pin It”, the new pin creation popup will show a portrait image. If they click their browser’s Pin It button, the landscape image won’t be there to select. Some users might not notice the bait-and-switch, but you’ve limited and misled your users, and that’s never good UX.

A Better-ish Solution

There is a better way, but fair warning: this feels like a bit of a hack. We’re giving people better choices, so it’s worth it.

The secret is to load a small, transparent image 3 at the beginning of the page in a hidden div, but use the data-pin-media attribute to point to the big, Pinterest-friendly image. (Download the placeholder image here.)

<div style="display: none;"><img src="small_placeholder.gif" alt="" data-pin-media="pinterest-friendly.jpg" /></div>

Pinterest now displays our big Pinterest-friendly image when someone clicks their Pin It button, without requiring non-Pinterest users to download that giant image on the page.

86427e9fab617acd185132e52163260b

Demo

To see this in action, visit Elise’s Turkey Soup recipe and click your browser’s Pinterest button.  You’re offered a beautiful Pinterest-friendly image that doesn’t appear anywhere on the page.

Warning

A word of caution: According to one of the Pinterest developers, the size of the images available in the image select screen is determined by the largest image on the page:

The any-image Pin It button… assigns points based on things like size (bigger is better), shape (portrait is better than landscape, up to a point), whether it’s a video, whether it’s been identified as the canonical image on the page, and other special factors. After we get everything scored, we sort by score, highest to lowest, and then thumbnail everything whose score is greater than that of the highest-scoring image on the page divided by a magic number (currently 30, subject to change).

Simply put, if you specify a significantly larger image with data-pin-media, some of the smaller images on your page that normally would show up in the image selection screen probably won’t be there anymore. That wasn’t too much of an issue for us, since we’d rather people be pinning the larger photos anyhow.

Notes

I’ve had some people ask some more specific questions about how we implement this, so here goes.

We’re running WordPress, so I created several custom fields (post meta) on our recipe pages (custom post type):

  • Custom Pinterest description (falls back to using our custom meta description field if left empty)
  • Primary Pinterest pin ID**
  • Secondary Pinterest pin ID (in case there are two pins)**

pin details

I also created two additional featured image fields for primary and secondary Pinterest stacks:

pin images

Then, in the template, I stash those values into variables and do a little logic to display them if they exist. (**Notice that we’re only using the image url and the description values, not the Pin IDs… more on that in a minute.)

You can see the output on one of our pages:

pin-details

We had more complicated logic earlier where we could have a second description for the second pin (e.g. a different kind of call to action for a different kind of pin), but we found it wasn’t being used enough to warrant the complication.

We also ended up not using the Pin ID fields.  Pinterest has the concept of an “official pin”, and specifying the id of that pin meant that it gets passed via data-pin-id and that when people pin images on your page to Pinterest, you’ll get more repins on the official pins and make it more likely to show up in search (in theory). However, we didn’t find it worth the hassle.  We found that the ID’s changed a lot as pins were deleted or repinned, so we decided to ditch the data-pin-id logic.

So all we’re really using for our trick (from the CMS) are the two Pinterest images and the Pinterest description.

Hope that helps!

Notes:

  1. Pinterest recommends using images that are at least 600 pixels wide.
  2. The Pinterest button won’t show images that have a `display:none` style set, but it will show images within a hidden div.
  3. I tried using base64 encoding to avoid the extra HTTP request, but Pinterest doesn’t recognize base64 encoded images. I also tried using smaller images, but found that 200×100 pixels worked well in the tests I ran. The placeholder gif I created is heavily crunched and very small (200bytes, less than 1k).