How to Add a Pinterest Save Button to Your Website.

The short answer

To add a Pinterest Save button, open Pinterest’s add-on builder, choose Image hover, Any image or One image, copy the code it gives you and paste it into your page, with Pinterest’s script placed just before the closing body tag. Check your images are big enough, or the button will not appear on them.

Pinterest calls it the Save Add-On in its help pages and the Save button in its developer documentation. They are the same thing: a small button that lets a visitor save an image from your page to their own Pinterest boards in one click.

For a publisher, that matters more than it looks. By default, a Pin made with the button links to the page the image was saved from. Every save is a reader putting your article into their own boards, with a route back to it attached.

Why a publisher should treat this as distribution

Pinterest describes the button as the best way for a business to get content onto Pinterest. Visitors save what they like from your site, and that helps more people on Pinterest discover you.

That is organic distribution you do not have to post yourself. Your readers do the posting, from the page they were already reading.

It is also the reason to choose the version carefully rather than pasting the first snippet you find. The version decides which images readers can save, which page each Pin points to and what the Pin says. If you are still deciding how much effort Pinterest deserves, we have set out where Pinterest fits in your channel mix.

The three versions of the button

Pinterest’s builder offers three button types:

• Image hover: the button appears when someone hovers over any image on the page.
• Any image: the visitor clicks the button, then picks any image from the page to save.
• One image: the button saves a single image you have chosen in advance.

In the developer documentation the same choice is a code setting. Any image is the default. One image restricts the visitor to the image you specify and takes them straight to the form that creates the Pin.

Which version to choose

Pinterest’s own recommendations line up with how publishers build pages:

1. A page with several images, like a blog post or a gallery, suits the hover button.
2. A page with several similar images, like a product page, suits the one image button, so the right picture is saved every time.
3. A page whose image has been saved before can be set up so new saves count as repins of the original Pin.
4. A site with heavy mobile traffic needs care, because Pinterest says hover buttons are not supported on mobile and suggests a one image or any image button instead.

For most editorial pages, we would start with hover on desktop and keep an any image button visible in the article for mobile readers.

The fourth point has a wrinkle. Pinterest’s developer page says that on 11 October 2018 it rolled out sticky Save buttons that work on mobile devices when hover buttons are switched on for the page. Test on a real phone before you decide what mobile readers see.

Step 1: build the button in the add-on builder

For the hover or any image versions, Pinterest’s steps are:

1. Go to the Pinterest add-on builder.
2. In the Button type section, choose Image hover or Any image.
3. Tick Round and Large, and pick a language, if you want to change how the button looks.
4. Test the button by clicking the sample image.
5. Copy the code in the first box under the sample image and paste it where you want the button.
6. Copy the code in the second box and paste it just before the closing body tag on each page that carries the button.

If your site runs on WordPress, Blogger, Tumblr, Wix or Squarespace, Pinterest says you can add the button by following the directions those platforms provide instead. The image size rules below still apply.

Step 2: build a one image button

The one image version needs a little more work, and Pinterest says so itself.

1. In the builder, choose One image under Button type.
2. Add the URL of the page that holds the image. This can be your homepage or any other page.
3. Open your site in a new window, right click the image and choose Copy Image URL.
4. Paste that address into the Image field in the builder.
5. Write a description for the image.
6. Click Build It! to preview the button.
7. Copy the code shown on the right and paste it between the opening and closing body tags of each page where it should appear.

Step 3: add Pinterest’s script once per page

Every Pinterest add-on runs on one script, pinit.js. Pinterest says to include it once per page, however many buttons you use, and warns that adding it more than once can cause problems.

Placement matters too. Pinterest asks for the single line version of the tag to sit as close to the end of the page body as possible. It names the places that cause trouble: the page head, a repeating template, and the middle of the body just above an important part of the page.

It also says not to put the script on pages with no Pinterest add-ons, even if a global footer template would be convenient, and to keep it off pages with sensitive material. That is a decision for whoever owns the site templates, not the person writing the article.

Step 4: check your image sizes

This is the step that quietly stops the button appearing, and Pinterest’s two sets of instructions give different figures.

• The help page says images must be at least 110 pixels in one direction and at least 200 pixels in the other, and at least 120 by 120 pixels to show the hover button.
• The developer page says images need to be at least 100 by 200 pixels to be saved with the Save button, and 200 by 200 pixels to be saved with the hover button.

Neither says which figure is newer. The practical answer is to clear both comfortably. Any image you want saved should be well above 200 pixels on every side.

Pinterest adds two more checks. At least one image must load outside an iframe, because the button cannot find images inside one. And images with text overlays, tasteful branding and a vertical shape perform best on Pinterest.

Step 5: control what each Pin says and where it points

Three settings decide what a reader actually saves:

• The description setting fills in the Pin’s description. Without it, Pinterest pulls text from the image’s alt or title tags, which may not suit every image.
• The URL setting fixes the page a Pin links to. Pinterest says this guarantees the Pin links to the source you want.
• The media setting swaps in a better quality version of the image when you have one.

Descriptions can run to 500 characters, but only 75 to 100 show in grid view. Pinterest also points out that Pins get distribution for a very long time, so it advises leaving out sales, prices and promotions that will not stay accurate.

For a publisher, the URL setting is the one to get right. A gallery that lives on several pages should send every Pin to the article you want read, which is the kind of template decision we build into social for publishers.

Step 6: stop the wrong images being saved

Not every image on a page should become a Pin. Pinterest gives two switches:

• Add the nopin setting to an image and it cannot be saved, and no hover button appears on it.
• Add the no hover setting and the hover button disappears, but the image can still be saved another way.

Logos, author headshots, advertising slots and licensed photos you do not have rights to share are the obvious candidates. Decide this once in the templates rather than article by article.

Where publishers get it wrong

The mistakes are operational, not technical:

1. Pasting the script into a global footer, so it loads on every page, including ones it should not touch.
2. Leaving descriptions to whatever the alt text says, so Pins go out with captions written for screen readers rather than for Pinterest.
3. Letting Pins link to tag pages, galleries or image files instead of the article.
4. Never testing on mobile, where the hover button behaves differently.
5. Treating it as a one-off install, so nobody notices when a template change removes it.

Each of these is a handoff problem between editorial and whoever owns the site, which is why the button belongs on a checklist rather than in someone’s memory.

How NBK thinks about the Save button

A Save button is distribution you earn from readers who already chose your content. For a publisher, that is the cheapest kind there is.

We treat it as part of the operating system behind a publisher’s social, not as a widget. Someone owns the templates. Someone sets the image standard. Someone checks each quarter that the button still works on the pages that matter.

Next step

Pick your three highest traffic articles, check every image against the sizes above, and confirm where each Pin would link. If anything fails, fix the template, not the article.

If your team is posting regularly but still feels stuck, our social media audit checklist is a good place to find the constraint in the system.