Add the Pin It button to your website

Add the Pin It button

Types of Pin It buttons

What you can Pin

Pin It button troubleshooting

Data Pinterest can collect

 


Add the Pin It button

To add the Pin It button, check out our widget builder. There you can to fill out a simple form, copy the resulting HTML and paste the code where you want the button.

 


Types of Pin It buttons

One button: Creates a specific pin it button for one image on your page. Here's how to build it:

  1. Go to the widget builder
  2. Pin Count: Select if and where you’d like your Pin count to appear
  3. URL: Copy and paste the page where you’d like to add your button
  4. Image: Copy and paste the image URL of the image you’d like to Pin
  5. Description: Write a line or two that  best describes your Pin
  6. Click Build It!
  7. Copy and paste the line of HTML where you’d like your button to appear
  8. Copy and paste the line of Javascript above your closing </BODY> tag on your page 

 

PIB_help_article_1.png

 

For example, here's how you build a button for this page: http://blog.pinterest.com/post/63645864930/an-android-widget-for-pinterest-on-the-go

  1. Pin Count: No Pin count
  2. URL: http://blog.pinterest.com/post/63645864930/an-android-widget-for-pinterest-on-the-go
  3. Image: http://blog-assets.pinterest.com/img/post/2013101001.jpg (Get this link by right clicking the image, and then clicking Open Image in New Tab)
  4. Description: “An Android Widget for Pinterest on the go!, via the Official Pinterest Blog”

 

Any image: Lets you pin any image on the page. Here's how to build it:

  1. Go to the widget builder
  2. Click on Any Image and Build It!
  3. Copy and paste the line of HTML where you’d like your button to appear
  4. Copy and paste the line of Javascript  above your closing </BODY> tag

 

Hover button: Appears when a user mouses over any image on the page. Here's how to build it: 

  1.  Go to the widget builder
  2. Click on Image Hover and Build It! 
  3. Copy and paste the line of Javascript above your closing </BODY> tag

 

PIB_help_article_2.png

 


What you can Pin

You can Pin:

  1. Images that are at least 100px in one dimension (height or width) and at least 200px in the other dimension
  2. Videos from YouTube, Vimeo and Kickstarter – both from their sites and embedded in yours (using standard embed codes)

Note: We check with Flickr before Pinning images hosted there. When adding Pins from Flickr, you might see an image turn gray and become un-Pinnable – this is usually because someone used an image from Flickr that was marked as private by its owner.

 


Pin It button troubleshooting

General troubleshooting

Go back to the widget builder and check that:

  1. You put in an image! The Pin It button won't work if you don't give it an image to Pin.
  2. You put in the fully-qualified URL for the page and image you want to Pin, including the http:// part.  
    • Note: To check this, copy the URLs from the form, paste them into a new browser tab and make sure they load. If they won't load in your browser, we can't Pin them.

Counters

If counters aren't showing next to your Pin It button or if you see a the fullscreen version of the Pinterest add a Pin dialogue, go back to the widget builder and check that:

  1. You didn't choose the No Count version when you made the button
  2. You included the JavaScript tag at the bottom of your page, right before the closing </BODY> tag
    • Note: To conserve bandwidth we don't maintain a persistent connection between the Pin It button and Pinterest. The counter will increment when you reload the page after Pinning. There may be a delay, depending on internet conditions.

Loading asynchronously

You don't have to include our script in the body of your page. If you'd rather load it asynchronously with the other third-party tags you're using, you can try this:

<script type="text/javascript">

(function (w, d, load) {
 var script,
 first = d.getElementsByTagName('SCRIPT')[0],  
 n = load.length,
 i = 0,
 go = function () {
   for (i = 0; i < n; i = i + 1) {
     script = d.createElement('SCRIPT');
     script.type = 'text/javascript';
     script.async = true;
     script.src = load[i];
     first.parentNode.insertBefore(script, first);
   }
 }
 if (w.attachEvent) {
   w.attachEvent('onload', go);
 } else {
   w.addEventListener('load', go, false);
 }
}(window, document,
 ['//assets.pinterest.com/js/pinit.js']
));    
</script>

 

Note: As long as our script fires after all the Pin It buttons have been rendered into the document, you should be fine. If you’re loading other asynchronous scripts, feel free to include them in the array of scripts, third line from the bottom. 

Advanced options

Some people have asked if we have a callback option or a way to dynamically create Pin It buttons. We don't have these yet, but we know you want more advanced options and are working on it! 

 


Data Pinterest can collect

If someone goes to your website and you have a Pin It button (or other Pinterest widget) on your site, we can use that info to personalize their experience on Pinterest. For example, we might suggest more recipe Pins to someone who visits a bunch of cooking sites.

We think using this data will help Pinners find more things they're into, but if people aren't interested, they can turn off personalization from their settings. And of course, we also support Do Not Track.

 

Email Help

Have more questions? Submit a request

Comments

Powered by Zendesk