Pinterest Button Not Working & Missing Images? Discover How To Fix It Here!

This post contains affiliate links. Which means I will make a commission at no extra cost to you should you click through and make a purchase. Read the full disclosure here.

Do you use multiple Pinterest images to promote a blog post or page? Have you ever noticed your website’s Pinterest button not working as some images are missing when you click to save an image to one of your boards?

If so, then this post will interest you! As I had a similar issue with my Pinterest button not working. Which I had to figure out what was the cause on my own website.

I discovered two ways to solve the issue which I will share with you below. Then you can easily use it to help fix any issues you might be having. (Without spending the massive amount of time I did.)

Information Related To My Pinterest Button Not Working

Notice: During the first 2 weeks of September 2019 a lot of websites had lost their Pinterest descriptions. These issues seem to have been caused by Pinterest updates which eventually resolved themselves.
The moral of the story? Sometimes Pinterest breaks stuff and there’s nothing you can do other than wait for them to fix it. (It sucks I know.) So if your pins on your website suddenly break and you haven’t made any changes. There’s a pretty high chance that it might be Pinterest going through some changes.

Firstly, before we get too far ahead. Let’s look at the circumstances of the issue.

• The web pages that were having problems all had multiple Pinterest images ranging from 2 to 6.
• Only 1 Pinterest image was actually displayed on the page.
• All other images were hidden using the CSS style=”display: none;”.
• All pages were using Pinterest’s native data-pin attributes to set their details. (You can read more about how to use these here.)
• Most of the images were missing in Firefox but Chrome would often show all of them.

Images that used to appear also stopped working, but I was also having some unknown issue with not being able to pin images from other people’s websites in Firefox. So I couldn’t be sure if it was an issue with my website, Firefox or some change that Pinterest recently made.

Solution 1 – Using Placeholder Images

Google’s search failed to find a solution for me. I was forced to resort to my tried and trusted “trial and error” method. Thinking about what different options I could change that might affect the issue. Trying each change in a controlled way, including changing the order of images, the image sizes, adding, removing or changing some code etc.

Eventually, I tried removing the style=”display: none;” and surprisingly the missing images started to appear when clicking the Pin It button.

So if the CSS style display: none no longer works what alternatives are there?

Using Alternative Code

This time Google yielded some better results. I came across height=”0” width=”0” as a suggestion. I tested this by replacing display: none with height=”0” width=”0”. Cleared any cache’s and attempted to Pin It in both Firefox and Chrome.

The result? All images were available.

Great! That’s problem solved right?

Well, not quite. The difference when using height=”0” width=”0” is that the images are still loaded in the background. The code makes the image invisible but every KB of it still has to be downloaded!

I don’t know about you, but it seems a waste to be spending resources downloading images you never see.

Adding Placeholder Images To Save On Page Load

So how do you work around this? For me, it made sense that if these images are never seen then they are just placeholders for the data-pin-media image set in the code. A 1×1 pixel image is all that is really required.

Sadly it doesn’t seem possible to reuse the exact same placeholder for all Pinterest images on the same page. Each image needs it’s own unique source URL.

Therefore, if you want to reuse the same placeholder image for multiple pin images on the same page. You can use the same 1×1 pixel image but you’ll need to rename it for each different pin you want.

For example, I set up 6 copies of the same placeholder image and simply renamed them Placeholder-Pin-1.jpg, Placeholder-Pin-2.jpg… etc.

By doing this I was able to use a 0.5 KB image over 22-30 KB. Which soon adds up when you have multiple pin images per page. Admittedly, this method doesn’t prevent the extra server request for each image though.

To sum up:-

• Create a static placeholder image that is 1×1 pixels in size.
• Duplicate this placeholder depending on the number of unique pins you have on a single page.
• Rename each one accordingly.
• Use these placeholders as the src= value in the code.
• Remove any code for display: none
• And add height=”0” width=”0” instead.

The advantage to this method is that it ensures your Pinterest images that you have set up as pins. Will always appear in Chrome and Firefox regardless of whether the browser extension is used or the on-page sharing button.

However, it does add extra server requests you may prefer not to have. Plus it requires extra work by creating placeholders and editing your code. Which might be a lengthy process depending on your website.

Solution 2 – Are Your Hidden Pinterest Images Not Working Because Of Lazy Load?

Whilst the above solution solved the issue of images not being available to pin, despite them specifically coded to do so. I wasn’t quite satisfied that display: none was the sole cause of my Pinterest button not working.

Afterall, it’s a commonly suggested method to hide your pins in this way. Surely if it was causing pins to go missing my initial Google search would have yielded more lucrative results, right?

What Could Have Changed Resulting In My Pinterest Button Not Working?

I often double check my posts before I make them live but I couldn’t be sure if I always check the Pin It buttons. Racking my brain to think – What could have changed recently? What would cause Pinterest to not see some images?

My initial thought was that I had recently changed my Related Posts plugin from WP Related Posts to Jetpack’s version. When I was checking my Pinterest share and browser extension Pin It button, the images used for the related posts were showing as options.

I thought that maybe these extra images were pushing out my other images. It sounds silly in hindsight since I’ve seen other pages showing a lot more options than what I had.

But as silly as it was, it did put me on the right track. As when I went into my Jetpack settings and was scrolling through. I remembered that I had Lazy Load enabled.

Lazy Load basically prevents the loading of images until you are about to scroll them into view. Perhaps if Lazy Load is postponing loading them until they are scrolled to. Pinterest is unable to process them. And therefore, it can’t find them when we click the sharing or pin it buttons.

Disabling Lazy Load

This theory made way more sense. So I reverted the code back to display: none. Updated the page and checked to make sure it still wasn’t working. And, still the images weren’t showing.

So, I toggled off the Lazy Load and reloaded the page again. And Bam! The images were all there!

This suggests that display: none does not work well with Lazy Load. Or at least Jetpack’s version of it.

If you find your Pinterest images are missing or your Pinterest button not working, try looking for and turning off any lazy load image settings you have.

Solution 3 – For If Your Pinterest Graphic Isn’t Showing

Okay, so above I’ve given you 2 solutions to help fix problems with your Pinterest images going missing. When you try to use things like the Pin It button or Tailwind.

However, both of these solutions are not ideal. Because you either loose the benefits of using Lazy Load on your blog to keep page load speeds down. Or you have to go through a lot of trouble to create placeholder images. Which still adds unnecessary extra resources to your blog posts. Not to mention the extra work involved for you.

They both work. Don’t get me wrong. But there is one solution that offers the best of both worlds. So you can keep using your Lazy Load to help make your pages load faster. And still use hidden Pinterest images that don’t require you to try and trick your browser into loading them.

Can you guess what it is?

How To Fix Your Hidden Pinterest Images From Not Showing Using This Pinterest Plugin

So, what am I talking about? Well, it’s the WP Tasty Pins plugin!

I love this plugin, it is hands-down a life and time-saver if you have a serious focus on Pinterest for your blog. As it allows me to do all the advanced features of creating Pinterest descriptions using code. But without the actual messing around with code. All for the small cost of $29.

Everything is in a user-friendly interface that only requires you to tick boxes, toggle on options and fill in some field boxes. So if the coding side of embedding your Pinterest descriptions hurts your eyes. I recommend checking it out, you won’t be disappointed!

Before I get too off track with my excitement for this plugin. You might be wondering how this helps with your problem of your hidden Pinterest images not showing.

Well, what it involves is for you to use the WP Tasty Pins plugin to embed your Pinterest images and descriptions into your blog posts. Once you’ve done this. You can simply tick the box for the pin to hide it on your page.

Now, on its own. You will likely still have problems with missing Pinterest images. But here’s where the solution comes in. And I should emphasize this only works when you are using WP Tasty Pins. As the code snippet we are about to add links to special fields that this plugin adds when it embeds your Pinterest images.

How To Use WP Tasty Pins To Fix Missing Pinterest Images Caused By Lazy Load

Okay, so don’t be intimidated by this. As I will walk you through it step-by-step. But before you do anything make sure to backup your blog tk.

Once you are all backed up. You need to find your functions.php file. You can find this under Appearance > Theme Editor.

On this screen should be a code editor. And on the right-side of this, should be a list of theme files. Including the functions.php file I mentioned.

You will need to click on this functions.php file to make sure it is active in the code editor. And then scroll to the bottom of the file and create a few extra blank lines. As this is where we will paste in our code snippet. Like this:

Selecting The Right Code Snippet To Use

Now, depending on which Lazy Load you are using. Raquel from WP Tasty Pins has provided code snippets for Jetpack’s, WP Rocket’s and A3’s Lazy Load.

If you are not using one of these Lazy Load features. Then this solution is unlikely to work. In which case, I recommend you consider switching to using the Jetpack Lazy Load.

As it is completely free to use and comes with 40+ other useful features. Including some security features to help keep your blog safe from brute-force-attacks.

Okay, so depending on which Lazy Load you have. You will want to copy just 1 of the below codes:

For JetPack Lazy Load use the following code only:

/**
 * Add the skip-lazy class to Tasty Pins hidden images to 
 * prevent lazy load by Jetpack.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img class="skip-lazy" ', $html );
	return $html;
});

For WP Rocket Lazy Load use the following code only:

/**
 * Add a custom attribute to hidden image output.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img data-no-lazy="1" ', $html );
	return $html;
});

For A3 Lazy Load use the following code only:

/**
 * Add the a3-notlazy class to Tasty Pins hidden images to 
 * prevent lazy load from the A3 plugin.
 */
add_filter( 'tasty_pins_hidden_image_html', function( $html ){
	$html = str_replace( '<img ', '<img class="a3-notlazy" ', $html );
	return $html;
});

Once you’ve copied your selected code. You need to paste it into the blank lines you added to the bottom of your functions.php.

The final result should look a bit like this:

To save your changes, click on Update File. And your Pinterest images should now be working even if they are hidden and you are using your Lazy Load option.

Considering The Options For Your Pinterest Button Not Working

Now you might be tempted just to turn off Lazy Load and leave it at that.

However, using Lazy Load for your images can be beneficial for page load speeds, especially for mobile users. Who typically see much less content on their screen at once, compared to desktop users.

For a while I stuck to my first solution. But after awhile it got tedious and clunky. Not to mention it was time-consuming to update my older posts. Eventually I gave up and just went for the simple solution of disabling Lazy Load.

It wasn’t until I stumbled upon the solution by WP Tasty Pins plugin. That I was finally able to get the benefits of both hidden Pinterest images and Lazy Load. Without the headache of editing code or creating placeholder images.

I realize this isn’t a free solution. As WP Tasty Pins is a premium plugin that costs $29. But if Pinterest is something you care about. Then this plugin can do a whole lot more than fix this issue. As it makes embedding pins into your blog posts a breeze.

Whether you choose to do this, or use one of my other solutions. It is entirely up to you and what works for your blog. So, try them for yourself and see what works best! As the pros and cons will differ from website to website, based on how many images you use.

Did you also have the same issue or something different? What solution above did you decide to try or did you decide to try something else instead? Let me know.

If you found this blog post useful then please consider taking a few seconds to share it to your favorite social media platform!