Pin It button technical tune-up: 5 tips to make sharing from your site better

assets.pinterest.com-javascript

This one’s for the developers: our resident Pin It button expert Kent Brewster offers a few tips to improve the way the buttons work on your site so more people can share your stuff to Pinterest. Read on to learn how to make the Pins from your site bigger, more relevant and much more likely to be added to Pinterest. You'll also learn how to control all of the Pins from your page and how to receive notifications when someone adds a Pin from your site. 

1. Call the script and ask for hover buttons

Pinterest provides some JavaScript to help Pinners notice the things on your site that can be Pinned. Once you enable this, readers that mouse over images on your page will discover on-hover Pin It buttons. To hook it up, copy this code:

<script src="//assets.pinterest.com/js/pinit.js"
type="text/javascript" async defer
data-pin-hover="true"></script>

… and paste it into your page as close to the closing </body> tag. That one line of HTML will help your readers Pin your page.

If you're already running pinit.js (our official button), all you need to add is the part that says data-pin-hover="true". Important: please be sure to call pinit.js only once per page.

2. Specify the source URL
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-url="http://mysite.com/mypage.html"/>

Specify the data-pin-url attribute to associate a Pin to a particular URL. This will guarantee that the Pin is linked to the source URL you want. This is useful for pages with multiple images that link to various places on your website. 

3. Choose the best image
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-url="http://mysite.com/mypage.html"
data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"/>

You can optionally set the data-pin-media attribute to provide a better quality version of an image. Use this if you display small image thumbnails on your page, but want the higher resolution version Pinned. Also, because vertically-oriented images work better on Pinterest, you could set a vertical image in places where you display a landscape image.

4. Pre-fill your descriptions
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-url="http://mysite.com/mypage.html"
data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"
data-pin-description="Baked Mozzarrella Cheese Sticks"/>

Descriptions are a required part of every Pin. By specifying the description, people can create Pins from your website faster and you can increase the visibility of your Pins by having an accurate description in Pinterest search. For best results, use an representative 4 to 7-word description of what is actually shown in the image.

Also, Pins live on for a very long time, so keep this in mind when you are crafting your descriptions. Avoid details that might not be accurate later. 

5. Get more repins on your own Pins
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-id="99360735500167749"/>

If you're Pinning your own content, just add the data-pin-id attribute to the image. When people add this to Pinterest, you'll get more repins on your Pins and even receive email notifications. Check your settings to be sure you're getting emails about repins from everyone.

 

—Kent Brewster, currently saving ideas to Defying Gravity