Are you a business?
The Pin It button
Help people Pin from your site.
Updated Decemeber 18th, 2013
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.
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 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
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:
...and not the one that appears when you use the bookmarklet. They're different, and using the wrong one can affect analytics reporting.
...and update your hosted copy whenever we push. We read all comments and pull requests, so don't hesitate to get in touch there.
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
SCRIPT tag goes:
in the document's
- in a repeating template
just above an important, visible part of the page in the middle of the
in a long, hard-to-render
SCRIPT tag can block rendering of the rest of the page if
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.
onClick="window.open(this.href,'_blank', 'width=700, height=300');"
Double-check your page for anything broken or missing
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.