The big thing on Pinterest these days is to create something the community calls long pins. But what are long pins? They are typically a collage of images from your post plus a little bit of text (such as the post title or a few catchy words) that gives potential readers a better idea of what you can offer them on your site.
Long pins are appealing because they’re, well, long, usually up to 2000px or taller, and that extra vertical space makes them stand out on long, picture oriented sites like Pinterest. You also have a better chance to showcase your content with a long pin, giving readers more incentive to visit your site over of the hundreds of others out there.
In short: love them or hate them, long pins are all the rage and will likely get your content noticed more on the social media giant.
But as awesome as long pins are, there is a small problem: the only way to provide your readers with long pins is to include them within your blog post, and long pins can take up a lot of vertical real estate on your blog – which isn’t good. Ironically, the very thing that helps you on Pinterest can actually hurt you on your blog, as a long scroll bar (or slow scrolling page) can quickly make readers feel you are offering “too much” content. No one wants to think they’re about to read a novel when all they wanted to know was how many tablespoons are in a cup. Long pins may also push other valuable content out of reach of your visitors, like your comment section and related posts.
Thankfully, there’s a solution to all of this. With a little CSS coding, you can hide these long pins from view on your blog and make it so they only appear when someone actively tries to pin your post.
If you need an example of how this works, just try pinning this page using the social share buttons on the left hand side of the page (or even a Pinterest browser app, if you have it). You should see a blue sky image that has “hidden pin image” in white text. Notice that this image doesn’t appear anywhere within the blog post.
Pretty cool, right?
Here’s how you can do it on your WordPress blog:
Hidden pin images work by using CSS (the cascading style sheet) to change how the image is displayed on your page. Basically, you’re going to create a style for hiding content, give it a name, and then apply that name to any image you want to hide.
Start off by opening up your theme’s CSS and add the following code to the very bottom of the stylesheet. In truth, the actual position of this code does not matter, but adding it to the bottom insures you won’t disrupt any other code that’s already in your CSS.
/* hide the pinterest image */
Tip: The above is very simple CSS code, but if adding it somehow causes an issue on your site, try adding a } on the line before the /* hide the pinterest image */ statement.
Assuming you already have your long pin created (if you need help creating one, check out this guide), now it’s time to add it to your blog post. Since this image will be hidden, you can add it anywhere you’d like – top of post, middle, bottom, it doesn’t really matter. I typically add mine at the very end of my post, directly after the last word in the last paragraph, leaving no spaces.
Tip: Pinterest typically displays pinnable images based on the date and time they were uploaded, ranking them from newest to oldest. This means that if you want your hidden long pin to be the first option available for pinning, make sure it’s the last image you upload for your post.
Now that your long pin is where you want it in your post, go ahead and click on the image itself. This should bring up a tiny menu that includes a couple different options, including the option to Edit (which is the pencil on the far right). Go ahead and click Edit.
The next window will bring up some basic info about the image – url path, size, position, etc. To apply the name you defined in your CSS, you need to view the Advanced Options. If they’re not already displayed, go ahead and click the Advanced Options title to display them.
In the list of settings, locate Image CSS Class and type “hiddenpinimage” (without quotations) in the corresponding field. Notice how the name “hiddenpinimage” also appeared in the CSS code above? This is how the coding works – you added the style to your CSS, gave it a name, and now we’re applying that name to the image so that it will link back to the code. That’s all there is to it.
When you’re done, click update in the lower right hand corner, and then update your blog post.
You now have a hidden image in your blog post that will only display when someone attempts to pin your post to Pinterest!
Going forward, you will need to repeat Step 3 for any image that you want to hide. You can hide as many (or as few!) images in a post that you would like – there is no limit to how many images can have the “hiddenpinimage” Image CSS Class.
Too easy, right?