Build a Save button for your site

Tips and Troubleshooting

"Please note that if you added the official Save button to your code prior to June 2016, we will be updating the design from "Pin it" to "Save" on October 3, 2017."

The Save button is the best way for your business to get discovered on Pinterest. When you add the Save button to your site’s pages, your customers can save things they like to Pinterest, which means even more people can find those things. 
 
If you have a Wordpress, Blogger, Tumblr, Wix or Squarespace website:
 
WordPress.com WordPress.com
The Wordpress Pin It button doesn't require any extra code on your site. You can add the Pin It button to all of your Wordpress posts by enabling it in default sharing options.
  1. Go to your WordPress dashboard
  2. Go to Settings then Sharing
  3. In the Sharing Buttons section, drag the Pinterest service from Available Services to Enabled Services
  4. If you want to display the default Pin It button image, change the Button style dropdown to Official ​buttons
  5. Click Save Changes at the bottom of the page
WordPress.org WordPress.org

Download a plugin for the hovering Pin It button from the WordPress.org plugin directory.

Blogger Blogger
  1. On your Blogger dashboard, go to the Layout section
  2. Click edit in the Blog Posts section
  3. Scroll to Show Share Buttons, and check the box if it isn't already checked
  4. Rearrange anything if needed in the Arrange Items section then click Save
Tumblr Tumblr
First, you need to add a JavaScript line.
 
To add the JavaScript line:
  1. On your Tumblr dashboard, pick the blog you want to edit then click Customize
  2. Click Edit HTML from the Customize screen
  3. Scroll to the bottom of the code
  4. Check to see if your code has pinit.js in it—if it does, you’re done!
  5. If not, add this right above the closing </body> tag: <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
 
To add a hovering Pin It button:
  1. Make sure you added your JavaScript line using the steps above
  2. On your Tumblr dashboard, pick the blog you want to edit then click Customize
  3. Click Edit HTML from the Customize screen
  4. Scroll to the bottom of the code
  5. Add data-pin-hover="true" before the “src=” part from step 4 above. ​Your new line should look like this: <script type="text/javascript" async data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
  6. Click Update Preview. You should see the Pin It button appear when you move your cursor over the example image on the right. If you don’t, go back to step 4 and make sure that everything looks in place.
  7. Click Save
Wix.com Wix.com
  1. Click Add (+) on the left side of your editor.
  2. Click Social.
  3. Scroll to the bottom and click Pinterest Pin It.
  4. Drag the Pin It button to where you'd like it on your page.
  5. The Pin It button will create a Pin based off of the image and the description that you pick. The Pin will link back to the page you’re on when you click Pin It.
Squarespace Squarespace

Learn how to build a Pin It button for your Squarespace site here

 
If you want to build a button yourself, first decide which kind of Save button you want to add. There are 3 types to choose from: 
 
  • Image hover (recommended): When somebody hovers over any image on the page, the Save button shows up.
    Learn how to build it Learn how to build it
    1. Go to the widget builder.
    2. Select Image Hover in the Button type section.
    3. Customize the size and shape of your button. 
    4. Preview your button by hovering over the sample image. You can also click the Pin It button to see how it works.
    5. Once you’re satisfied with the button, copy the code under the Copy the code section.
    6. Paste the code just above the closing </body> tag of each page where you want the button to show up on your site.
  • Any image  (see example): If somebody clicks this button, they can save any image on the site. This is pretty easy to make.
    Learn how to build it Learn how to build it
    1. Go to the widget builder.
    2. Select Any image under the Button type section
    3. Customize the size, shape, language and image for your button. 
    4. Preview your button by hovering over the sample image. You can also click the Save button to see how it works.
    5. Once you’re satisfied with the button, copy the code that appears on the right hand side of the page.
    6. Paste the code between the <body> and </body> tags of each page where you want the button to show up on your site.
  • One image (see example): This is a Save button for a single image on your page, and requires more technical coding.
    Learn how to build it Learn how to build it
    1. Go to the widget builder
    2. Customize the size, shape, language or image for your button. 
    3. Add the URL for the webpages that have the image you want to create a Save button for (this can be your homepage or any other page on your site)
    4. Open a new window on your browser and go to your website
    5. Right click the image you want to create a Save button for
    6. Select Copy Image URL
    7. Go back to the widget builder and paste the image URL in the Image field
    8. Write a description for your image
    9. Click Build It! to preview the button
    10. Once you’re satisfied with the button, copy the code that appears on the right hand side of the page
    11. Paste the code between the <body> and </body> tags of each page where you want the button to show up on your site

Common issues

The Save button counter isn't showing / isn't right
When you click the Save button, the board picker doesn't open in a new window
Your hover button isn't working
Pinterest is having trouble talking to my site

The counter shows the number of Pins that go to the URL you specified in the button code. If that page is different than the page you're currently on, then the counter may show a different number than you'd expect.

If you're using a counter with the any image Save button, it'll show the count for all Pins that go to the URL of the page you're currently on.

If you're using a counter to the side of the button and have zero Pins for this page, then the counter won't show. Once you have at least one Pin from that page, the counter will appear.

If you're using a Save button provided by a third party plugin, get in touch with the creator of the plugin to see if they can fix the problem. 

If you're using your own Save button, try these tips:

  • Make sure you included the JavaScript line in your page's code, right above the closing tag
  • If you have the JavaScript line on your page multiple times, try removing all the lines except for the very last one.
  • If you're using both the advanced asynchronous JavaScript and the regular JavaScript line, remove one of them.
  • If you're using a third party plugin, make sure it's not already adding a pinit.js line to your code. If it is, you don't need to add it yourself.
Some hosts don't support JavaScript so you won't be able to add the code from our widget builder. They may have alternative ways to add widgets though!

Try these troubleshooting tips:
 
  • Make sure your images are at least 100px in one dimension (height or width) and at least 200px in the other (images must be at least 120px by 120px to show the hover Save button)
  • Make sure your images aren't specified in the CSS background, and make sure each image has a src attribute that starts with "img"
  • Add the hover button code just above your closing tag

This means Pinterest is timing out before we can create a Pin on your site. Unfortunately, this isn't something we can fix, and usually happens when a site is slow. We recommend investigating this one on your end!

Help us improve Pinterest