Why No Pinterest Save Button? Hover Button Checker

Quick answer: Pinterest's hover Save button only appears when four things are true. First, the pinit.js script is on the page with data-pin-hover="true"; without it Pinterest draws no hover buttons at all. Second, the picture's address starts http:// or https://, not a data: placeholder. Third, the picture has no data-pin-nopin or data-pin-no-hover. Fourth, it is shown larger than 119 pixels each way. Paste your page above to see which rule each picture fails.

How to use it

1. Open your page in a browser, right-click and choose View Page Source. Copy it all.
2. Paste it into the box. Each picture gets a row: Shows, Shows — check, or No button with the reason. Problems with the whole page, such as hover not being turned on, come first.
3. Fix the first problem, then paste again. The usual fix is one attribute on the pinit.js line. Copy Pinterest's hover script with the button above.

The rules, from Pinterest's own code

The hover button is drawn by Pinterest's script, pinit_main.js. We read the copy Pinterest serves today; its rules match the public source Pinterest keeps on GitHub. Before it puts a button on a picture, the script checks:

• Hover is on for the page. Pinterest's docs: If you pass in any value, the Save button will appear on hover for all images on the page, unless the image includes the data-pin-nopin or data-pin-no-hover attribute. The attribute goes on the pinit.js tag itself: Add this attribute to your call to pinit.js. A WordPress plugin or a theme that adds pinit.js without it gives you no hover buttons.
• The picture has a web address. The script reads data-pin-media if you set it, otherwise the picture's src, and only goes on if it starts http:// or https://. A lazy-load placeholder (a data: image) passes once your lazy loader swaps the real file in. A picture with only a srcset and no src gives the script nothing to read.
• Nothing turns it off: data-pin-nopin, data-nopin, data-pin-no-hover or data-pin-nohover.
• It is big enough on screen. The script measures the size the picture is shown at, so we don't wind up with hoverbuttons over scaled-down icons, and needs more than 119 pixels each way.

Where Pinterest's words and its code disagree

• Size. The code draws the button over a picture shown at 120 × 120. Pinterest's docs say Images need to be at least 100px by 200px to be saved to Pinterest by the Save button, and 200px by 200px to be saved using the hover button. The checker marks a picture between the two as Shows — check.
• Phones. The docs say remember that hover buttons are not supported on mobile. The same page also says As of 11 October 2018 we rolled out sticky Save buttons that work on mobile devices when hovering Save buttons are enabled on the page. The code does the second: on a touch screen it shows a sticky button, unless data-pin-sticky="false".
• Turning one picture off. Pinterest's help says If you want to turn off saving to Pinterest on a single image, add this tag to it: nopin="nopin". The button code looks for data-pin-nopin or data-nopin instead, so with only nopin="nopin" the hover button can still appear. Write data-pin-nopin="true".

Other reasons a picture can't be saved

A page with <meta name="pinterest" content="nopin" /> in its head asks Pinterest not to save anything from it. Visitors who try see This site doesn't allow saving to Pinterest. Please contact the owner with any questions. Thanks for visiting! Pictures inside an iframe are out of reach too: The Save button can't find images inside of iframes. And pinit.js should be on the page once. Pinterest: If you call pinit.js more than once, unpredictable results will occur, especially if you are using global configuration attributes. To make the other Pinterest buttons and widgets, use the Save button & widget code generator. To check a picture's size for a pin, use the image size checker.

FAQ