The Pin It button

Help people Pin from your site.

Updated Decemeber 18th, 2013

Overview

One of the easiest and most important things any website can do to help people to discover their stuff on Pinterest is to install the Pin It button. The Pin It button makes it super simple for people to save and share things they find on your site. These Pins link back to your website and increase the spread of your content across Pinterest.

The Pin It button is easy to integrate. You just copy and paste a few lines of HTML and JavaScript into your pages, and you're ready to go. To build your own Pin It button, just fill out the form in our Widget Builder, copy the code, paste it into your page, and you're set!

In the Widget Builder, we'll provide the code for you based on the URL, image and description that you provide us. You can also specify whether you want your page to show a count with the number of Pins made from the URL.

The generated code will look something like this example, which has been broken into several lines for readability:

    <a href="http://www.pinterest.com/pin/create/button/
        ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
        &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
        &description=Next%20stop%3A%20Pinterest"
        data-pin-do="buttonPin"
        data-pin-config="above">
        <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
    </a>

You'll also need to include some JavaScript in your HTML document. To immediately load our JavaScript, include this line just above your closing </body> tag:


<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

If you'd like to load the JavaScript asynchronously, you can do so by copying and pasting this snippet anywhere on your page:


<script type="text/javascript">
(function(d){
    var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
    p.type = 'text/javascript';
    p.async = true;
    p.src = '//assets.pinterest.com/js/pinit.js';
    f.parentNode.insertBefore(p, f);
}(document));
</script>

You only need to load this script once per page, no matter how many buttons or widgets you use.

Tips for best results

Misconfiguring the Pin It button can lead to issues. Here are some important tips to make sure you're delivering a great experience to Pinners.

Include both the page and media URL you want to share

The Pin It button is a link that opens our Create a Pin form, pre-filled with the URL, image and description of the Pin.

To make the form work, we need a page and media URL. If you click your Pin It button and the bookmarklet pops up (showing all the images on your page in a grid) instead of the form, it's because we didn't receive both URLs. It could also happen if one or both of the URLs didn't start with http or https.

Be sure to encode the page and media URLs

Sometimes you have the page and media URLs, but they're encoded incorrectly. That can happen when the first URL includes an extra question mark.

Visual signs that this is the case: you click the button and the bookmarklet appears with the grid of images, the Create a Pin form appears with a broken image or you click Pin It from the Create a Pin form and then there's a problem on our end.

To fix this, we need to percent-encode our URL parameters. How can you tell if you're percent-encoding correctly? Check your URL against the one that our Widget Builder creates.

Use images at least 750 pixels wide

It's always a letdown for people when they see an image they love in the preview form, but it comes out as a tiny thumbnail on Pinterest. For best results, Pins should come from source images that are at least 750 pixels wide. The images don't have to appear that big on your page. They just need to appear at that size in the media URL.

Write a great, one sentence description

People love it when the default description for a Pin makes sense so they can refer back to it later. Who better to write this than you? We could write an entire blog post on this topic alone (and we might!), but for now, just remember to create a short, punchy description of the object with at least one complete sentence.

Pop the right form

When you pop open the Create a Pin form, use this base URL:

    http://www.pinterest.com/pin/create/button/

...and not the one that appears when you use the bookmarklet. They're different, and using the wrong one can affect analytics reporting.

Update your JavaScript

Some companies aren't allowed to use third-party JavaScript. If you're working somewhere where you need to host a copy of our JavaScript, star this GitHub repository:

    https://github.com/pinterest/widgets

...and update your hosted copy whenever we push. We read all comments and pull requests, so don't hesitate to get in touch there.

Place our JavaScript in the right spot

If you're hotlinking our SCRIPT tag (use the single-line method listed as "Easy" in the widget builder), you'll want to put it as close to the end of your BODY tag as possible. Sites run into trouble when our SCRIPT tag goes:

  • in the document's HEAD
  • in a repeating template
  • just above an important, visible part of the page in the middle of the BODY
  • in a long, hard-to-render TABLE tag

Any SCRIPT tag can block rendering of the rest of the page if the network pauses. Always put our JavaScript at the end of the BODY tag, and never load it more than once. For best results, use our asynchronous loader, available on the Widget Builder when you click Advanced.

Important to Note: Try not to include our SCRIPT tag on pages that don't have Pinterest buttons or widgets. It's convenient to stick the tag into your global footer template, but you don't want to stick our tag on pages with sensitive material.

Avoid using inline JavaScript

Lots of site operators put custom JavaScript in the link instead of running Pinterest's JavaScript. Don't use inline JavaScript like this:

    onClick="window.open(this.href,'_blank', 'width=700, height=300');"

...to pop up the Create a Pin form. Mixing JavaScript into HTML can be harmful and difficult to keep up, so we'd avoid it altogether.

Double-check your page for anything broken or missing

The Pin It button should pop up the Create a Pin form in a small window. If it doesn't pop up, you'll see fewer Pins. That's because people expect Pinterest to look and act a certain way. If your JavaScript is broken or missing, your Pin It button will still work, but it won't be as useful or pretty! You won't get Pin counts and the Create a Pin form will appear full screen, which means people will have to press the Back button to keep browsing on your page.

Stick to our Pin It button image wherever possible

Pinners are sensitive to details. If you're using a different image for your button, it's not going to receive as many clicks because it's not as recognizable. Instead, you can use our button straight from our server:

    <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />

Update to our newer buttons

The old version of the Pin It button generated a small, Digg-style iframe. We shipped a lot of them back in the day, so there are still plenty out there. If you haven't updated your buttons since October 2011, please do since we won't support these forever!

Be careful with third-party software

While it's super convenient to wrap all your social sharing into one function, we've seen third-party sharing aggregators run into all of the issues on this list. This is impossible to fix because it's their code, not yours.