Home » Blog » Uncategorized » Hidden Pinterest Images Hack 2.0: Faster Hidden Pins!

Hidden Pinterest Images Hack 2.0: Faster Hidden Pins!

Do you provide collage or long pins for your readers? Are you hiding them from your blog post, so that they only show when someone attempts to pin?

At Mediavine, we recently found out a lot of our bloggers out there are using hidden images to accomplish this goal.

The problem with using a hidden image for Pinterest is that it still slows down your website. The browser will still load this image, even if it’s “hidden”.

And most of the time, these images are huge. Not just in dimensions, but in actual download size, because they’re large, long pins with high resolution.

That means that a hidden image can be real drag on your site’s initial load time. Google doesn’t like that.

Site speed is more important than ever, now that users are coming to your site more and more on mobile devices. It’s so important now, that site speed is even a factor in Google’s algorithm.

At Mediavine, we take site speed extremely seriously because it impacts your bottom line as much as it does your ranking in search results, as it can slow down ads from loading too.

Pinterest’s minimum pin size is 100 X 200. But we all know a pin that tiny is defeating the purpose of building a collage pin at all.

We need a way for the Pin button to initially “see” a smaller, but pinnable file, and then when the button is clicked, the larger file – the nice big giant collage pin – gets called for and loaded at that time – instead of when your site initially loads.

So what’s the new trick?

Our trick uses a combination of the “hidden image” technique and a super lightweight placeholder.

It uses the same hidden image trick, but instead of hiding your pinned image, it’s serving a super light-weight fast-loading placeholder image that meets Pinterest’s 100x200px image requirement.

We then set your actual image inside the HTML5 data attribute that Pinterest uses to decide what images are pinnable when someone presses a pin button.

Okay, geekiness aside. Get me to the code!

The image you’ll want to insert looks like this:

<div style="display:none;"><img src="//scripts.mediavine.com/assets/100x200.png" alt="" data-pin-media="INSERT IMAGE HERE"></div>

That area you see INSERT IMAGE HERE? You need to insert the link to your image!

If you run WordPress, we recommend uploading your image via the “Add Media” button and then in the media browser grabbing the URL from the info section where it shows URL.

wp-screenshot
Copy and paste that URL where it says data-pin-media=”” and you should be good to go! Test using the Pinterest Chrome Extension or the Pin It button your site.

The code should then look like this:

<div style="display:none;"><img src="//scripts.mediavine.com/assets/100x200.png" alt="" data-pin-media="https://www.mediavine.com/wp-content/uploads/2016/09/box3_img.png"></div>

https://www.mediavine.com/wp-content/uploads/2016/09/box3_img.png is the link to our selected image.
HINT: If you want this to be the first image users get to pick? Insert it right at the top of your post’s HTML, before any other images are listed.

So why is this better than running the other hidden pin snippets found on the Internet?

The Mediavine Hidden Image Pinterest Hack 2.0 is up to 5000 times faster.

Our hack uses an extremely lightweight 100×200 image that’s less than 200 bytes. The average image we’ve seen hidden on a site for Pinterest is closer to 500,000 bytes. That’s a BIG difference.

With our trick, the average user is only loading 200 bytes on page load, and they only have to load your big, beautiful image when they actually click the Pin button.

It’s almost “lazy loading”, but for a pin image. They won’t try to load this image until they call for it, by pressing the Pin button.

That’s going to save you a lot of bandwidth and make your users and Google love you even more than they hopefully already do.

27 thoughts on “Hidden Pinterest Images Hack 2.0: Faster Hidden Pins!”

  1. Dahn says:

    Is there supposed to be a long space between the words “<div" and "style.."

    1. Heather Tullos says:

      Hi Dahn! You’ll notice when you copy/paste the space disappears. All you need to do is copy, paste, and insert your image URL.
      Hope that helps!

      1. Dahn says:

        Heather, I have made several attempts to follow these instructions but I can not get an image when I click the pinterest button. I have noticed your example has a png image and I am using a jpg image. Would that make a difference?

  2. OMG. You are so awesome. Thanks a million!

    1. Nicole Johnson says:

      Our pleasure! Enjoy!

  3. This looks like what we really could use.

    Thanks Heather, Nicole 🙂

  4. Scott says:

    Hi Eric:
    Just was adding this script to this recipe: http://www.idratherbeachef.com/coleslaw-recipe/
    It adds the long pin but also adds a no-image pin that shows just the title of the post. Not sure if I am doing something wrong?
    Thanks-
    Scott

    1. Amber Bracegirdle says:

      Hey Scott, we’re not seeing this when we try to pin from your post. How are you pinning?

      – Amber

      1. Scott says:

        Hi Amber- I’m using a pin button from the chrome browser. I’ll send an email with the screenshot to the publisher email of that’s ok. Thanks again- super cool code to use.
        Scott

  5. Dahn says:

    I inserted my hidden image at the very top of my post but it does not show up as the first image to pin. What am I doing wrong?

  6. Scott Groth says:

    Hey, thanks so much for this great script! It is working really well on the site. The only question I have is, like Dahn, even though I put the script as the first thing on the page, the image is not showing up as the first pin. Any thoughts?

  7. Jenny says:

    Just wanted to say thank you for this! Really easy to follow and a fantastic and very helpful tool.

    1. Nicole Johnson says:

      Thanks, Jenny! We really like it too. Glad it is working well for you!

  8. Bobbi says:

    I am using this code right now, and it has an area to put the description you want on your pin.

    How can I get a description to show with the other code? Oh, I am on Blogger if that makes a difference.

  9. Claire says:

    Hi guys
    Sorry if this seems like a dumb question, but what do I have to change in this bit of code: scripts.mediavine.com/assets/100×200.png
    I tried replacing mediavine.com with my site URL but the hidden image doesn’t show when I try to Pin it. It worked fine when I used just
    Thanks in advance!
    Claire

  10. Heidi says:

    Hi, Media Vine. Thanks for this great hack. I want to make sure I understand this correctly: I am uploading my own full-sized image to my site. The part of your code that includes scripts.mediavine.com does not change. I don’t change your website name to mine. That script is your script running on my site? Can this only be used by customers of Mediavine? Thanks!

    1. Amber Bracegirdle says:

      Hey Heidi,

      The script there is literally just grabbing a tiny blank pixel that sits on our CDN. Anyone can use this. You don’t change the script name to your site. Hope that helps!

      Amber

  11. Lisa says:

    Looks like a great idea, but I am curious what happens to all the images we change to this – if/when you alter that script or image? Do you care to share the script itself, so we are able to upload to our own website?

    1. Eric Hochberger says:

      Hey Lisa!

      You’re definitely more than welcome to grab that image that’s hosted on scripts.mediavine.com and host it on your blog. You can just download the image at:

      http://scripts.mediavine.com/assets/100×200.png

      And upload it to your server and point the image there!

  12. Lisa says:

    I have just tried this. I copied it exactly, entered my image URL and all there is when I click the Pinterest button and pin … is nothing? What am I doing wrong? I have double triple and quadruple checked that I have the exact text and not altered it.
    This is in the browser bar:
    (908)Pinterest

  13. Genious! I wish I knew about this when I first starting using code for hiding pins. However now I use the Social Warfare plugin, so I don’t have to worry about it anymore.

  14. Amber Downs says:

    For some reason I can embed the image in there but when I go to pin it, pinterest in not finding the image. I tried finding it in chrome and safari.

    Am I doing something wrong or do I need to wait? I am using both the Sumo pin social sidebar button as well as adding the URL directly to pinterest.
    THANKS!!

    The page in question is http://amberdowns.net/planner-freebies/

  15. I host my images on smugmug, do I need to upload an image that is 100×200 to make it work?

    I tried using the code but the hidden images don’t appear and the 100×200 image is blank.

  16. Meaghan says:

    I so desperately want to get this to work for a client but I can’t! I’m copying the code exactly and inserting the image URL in the right spot but the pin doesn’t show up when I click the browser extension pin it button, the sharing button on the post. or the Tailwind extension.

    I uploaded the white 100×200 image to their media file and used that to see if it would fix the issue and still nothing. Help!

    1. Jenny Guy says:

      Hi Meaghan,
      Thanks for reading! If you’d email nicole@mediavine.com, she’ll assist you with your question.
      ~Jenny

  17. Mallory says:

    I put this code three times in a row to hide my pins and its seems to be acting strangely. Can you put three in a row or are you only supposed to hide one pin?

    1. Jenny Guy says:

      Hi Mallory,

      We’ve only ever tried the hack with one pin, so that’s all we can vouch for.

      Thanks for reading and good luck!

      ~Jenny, Mediavine Marketing Associate

Leave a Reply to Sabrina Modelle Cancel reply

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