Website widgets and Pin It buttons

You can build buttons and widgets—like the Pin It button—for your website using our widget builder.


Learn more about building each widget

Pin It button Pin It button
You can create 3 types of Pin It buttons:
  1. One button: Creates a specific Pin It button for one image on your page
  2. Any image: Lets you Pin any image on the page
  3. Image hover: Appears when someone mouses over any image on the page
You can Pin:
  1. Images that 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 Pin It button)
  2. Videos from YouTube, Vimeo, TED and Kickstarter—both from their sites and embedded in yours (using standard embed codes)
Advanced options:
 
For asynchronous loading, check out our developer site
 
We don't have a callback option or a way to dynamically create Pin It buttons yet, but we're working on it!
 
Data we can collect: 
 
If someone uses a Pin It button (or other Pinterest widget) on your site, we can use that info to personalize that person's 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.

Follow button Follow button

To make a follow button:

  1. Enter your profile URL in the widget builder
  2. Click Build It!
  3. Paste the code we give you onto your website, right where you'd like to see your follow button
The code should look like this: 
 
<a data-pin-do="buttonFollow" href="http://www.pinterest.com/pinterest/">Pinterest</a>

Pin widget Pin widget
The easiest way to embed a Pin on your website is to click Share and then Embed when looking at a Pin close up. 
 
  1. Enter the URL of the Pin
  2. Click Build It!
  3. Paste the code we give you onto your website, right where you'd like to see your Pin
The code should look like this: 
 
<a data-pin-do="embedPin" href="http://www.pinterest.com/pin/99360735500167749/">Kent Brewster's pin on Pinterest.</a>

Profile widget Profile widget

To make a profile widget:

  1. Enter your profile URL in the widget builder
  2. Click Build It!
  3. Paste the code we give you onto your website, right where you'd like to see your widget
The code should look like this: 
 
<a data-pin-do="embedUser" href="http://www.pinterest.com/pinterest/">Visit Pinterest's profile on Pinterest.</a>

Board widget Board widget

To make a board widget:

  1. Enter the board URL in the widget builder
  2. Click Build It!
  3. Paste the code we give you onto your website, right where you'd like to see your widget
The code should look like this: 
 
<a data-pin-do="embedBoard" href="http://www.pinterest.com/pinterest/pin-pets/">Follow Pinterest's board Pin pets on Pinterest.</a>

Get widget instructions for popular hosts

WordPress.com WordPress.com
You can add the Pin It button to all of your Wordpress posts by enabling it in default sharing options.
 
To add the Pin It button:
  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
To add a Pin, board or profile widget:
 
Just add the link to the Pin, profile or board in your blog post. When you publish it, WordPress will automatically convert the link to a widget.

WordPress.org WordPress.org
To add a hovering Pin It button:
 
You can download a plugin for the hovering Pin It button from the WordPress.org plugin directory.

Blogger Blogger
The Pin It button is part of the default sharing options on Blogger.
 
To add the Pin It button:
  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
To add a follow button or Pin, profile widget or board widget:
  1. Build the widget in our widget builder
  2. Click the Layout button on the left side of your blog management page
  3. Find a space for your widget and click Add a Gadget
  4. Scroll down and click HTML/JavaScript
  5. In the Content field, paste the code from the widget builder (you can put anything you’d like in the Title field)
  6. Click Save

Tumblr Tumblr
If you're going to add a follow button, Pin widget, profile widget, or board widget, you first 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.

To add a follow button or Pin, profile or board widget to Text, Photo, Quote, Link, Audio and Video posts:

  1. Make sure you added your JavaScript line using the steps above.
  2. Compose a post like you normally would.
  3. Click <html> in the caption box (or the main text box if you're making a Text post). You should see your post’s code now. If not, click the button again until the code appears.
  4. Find the spot in your post where you want your widget to show up and paste the code from the widget builder.
  5. Delete <!-- Please call pinit.js only once per page --> and <script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>.
  6. Save your post.

Note that the post won't show the widget on your dashboard, but it will show up on the live post.

 

Wix.com Wix.com

To add the Pin It button:

  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
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.
 
To add a follow button:
  1. Click Add (+) on the left side of your editor
  2. Click Social
  3. Scroll to the bottom and click Pinterest Follow
  4. Drag the follow button where you’d like it on your page

Common issues

Your widget is showing up as just a link
The Pin It button counter isn't showing / isn't right
When you click the Pin It button, the board picker doesn't open in a new window

Try out these troubleshooting tips:

  • Make sure you included the JavaScript line in your page's code, right above the closing BODY 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!

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 Pin It 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 Pin It 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 Pin It button, try these tips:

  • Make sure you included the JavaScript line in your page's code, right above the closing BODY 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!

Related articles