How to Add Image Hover Pinterest Pin It Buttons (Save Button, 2026)

Want to add image hover Pin It buttons, so a Pinterest button appears whenever visitors hover over your images? It’s one of the easiest ways to get more traffic from Pinterest, because readers can save your pictures to their boards in one click. We added hover Pin It buttons to QOT in 2013 with Pinterest’s official script. Pinterest now calls it the Save button, but the same script still works in 2026. Here’s the updated code, the options and the WordPress setup.

Quick answer: To add image hover Pin It buttons, paste Pinterest’s script before the closing </body> tag: <script async defer src="https://assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>. A Save button then appears when visitors hover over larger images. Use data-pin-nopin="true" on images you don’t want pinned.

The image hover Pin It button code

Add this once, near the end of your page template (or in your theme’s footer):

<script async defer
  src="https://assets.pinterest.com/js/pinit.js"
  data-pin-hover="true"
  data-pin-tall="true"></script>

• data-pin-hover="true" shows the button when someone hovers over an image.
• data-pin-tall="true" makes the button larger and easier to tap. Add data-pin-round="true" for a round button.
• The script loads asynchronously, so it doesn’t block your page from rendering.

You can also design a custom button with Pinterest’s widget builder (external site).

How the Pin It buttons work

When a visitor clicks the hover button, Pinterest opens a window to save the image to one of their boards. The Pin uses your image’s alt text or data-pin-description as the description and links back to your page, so every repin can send you visitors. Choose descriptive alt text, which also helps accessibility and image SEO.

Add Pin It buttons in WordPress

• Header and footer plugin: paste the script into the footer box of a plugin such as WPCode.
• Child theme: add it in footer.php before </body>.
• Social sharing plugins: many sharing plugins include an image hover Pinterest button option, so you may not need the script at all.

Control which images show the button

• The button only appears on larger images, not on icons and tiny thumbnails.
• Add data-pin-nopin="true" to an <img> to hide the button on that image; see how to block Pinterest pins site-wide.
• Add data-pin-description="..." to set a better Pin description than the alt text.

Things to consider before adding Pin It buttons

• Is your audience on Pinterest? Recipes, DIY, home, fashion, travel and design sites benefit most. Tech news sites may see little traffic.
• Privacy: the script is a third-party resource. If you use a cookie consent tool, load it after consent where your privacy rules require it.
• Speed: it’s small and async, but every extra script counts on mobile.

Track how Pinterest traffic grows with Pinterest analytics, and follow QOT on Pinterest (external site).

Frequently asked questions

Does Pinterest still support the Pin It button?

Yes. It’s now called the Save button, and the pinit.js script still supports image hover buttons.

Why doesn’t the hover button appear on my images?

The image may be too small, have data-pin-nopin, sit inside a lazy-loaded container, or the script may be blocked by an ad blocker.

Do Pin It buttons work on mobile?

There’s no hover on touchscreens, so mobile visitors usually use their browser’s share menu or the Pinterest app instead.

Will Pin It buttons slow my site?

Barely. The script loads asynchronously, but test with PageSpeed Insights if speed matters.