Tutorial #46
Embed Pinterest Buttons Basic   2014-01-28


Pinterest is a very popular service for collecting and managing things on the Web that are of interest to you. Pinterest items are typically photos, with links back to the original source pages, along with the user's notes about the item. There are a lot of sites offering similar services, such as Evernote and Instapaper, but Pinterest seems to have a lot of market share at the moment (January 2014).

Tutorial 14 - Add Sharing buttons using AddThis showed how to add buttons for sharing pages to various Social Media sites, including Pinterest. But Pinterest gives us a bit more control by using Pinterest Buttons that are linked to specific images. By embedding these on a retail site with, say, photographs of different shoes, a user can save an image of a specific pair that they like to Pinterest, rather than saving the entire page.

Pinterest make it easy to create Pin It Buttons of various types. This tutorial shows two ways to do this. The first places an explicit button next to each image whereas the second makes a button appear / disappear on each image as you move your mouse over it.

Demo 1 screenshot for this tutorial

Step by Step

1: You don't need a Pinterest account to create Pin It Buttons but you should have one so you can see what your images and links look like when someone else pins them. You can set one up for free at pinterest.com.

2: To create a single, static button go to the Widget Builder

Click Pin It Button and use the options to set the appearance of the button. You can choose to show the number of times this image has been pinned, but I don't recommend this - the pin count is going to be 0 when you start out, which doesn't look great.

The three important fields that you need to set are:

Image 1 for this tutorial

The URL has to point to the page that contains the button (or at least to that site). If not then you will get an error when you try and pin it. This prevents someone from trying to prank the system with links to pictures of naked people, etc.

When you click Build It!, a preview of the button and pinned image will appear below along with a block of code that you will copy and paste into your web page.

Image 2 for this tutorial

3: The code block consists of a link with a long URL that contains the URL, Image URL and Description that you entered and an img tag that links to the specific button image that you chose. Below this is a script tag that sources the file pinit.js on the pinterest.com server and which contains the code that implements the linking to pinterest.

You should copy the script line into your page just above the closing body tag.

Copy the link and image tags next to the target image in your preferred location.

You can add multiple pin it buttons in a single page but make sure that you have only one copy of pinit.js per page.

Here is what the static button looks like in the demo page:

Image 3 for this tutorial

4: The alternative way to use buttons is to only show them when you hover over an image. In this case the button will appear in the top left corner and disappear when your mouse leaves the image.

Adding these On Hover buttons is extremely easy. You don't need to use the Widget Builder. All you do is add the script line shown above into you page, with one Important change.

You add the Data Attribute data-pin-hover="true" to the script line so that it reads:

Simply by having this line in your page, the button will appear in each image on the page when you mouse over it

Image 4 for this tutorial

The advantage of this approach is that you don't have buttons cluttering up your page. The disadvantage is that you have less control over their appearance and placement, such that they might cover an important detail of an image when they are shown. Becuase it affects all images on a page it means that logos and icons will also show the button.

5: When a user clicks on a Pin It button they will see a popup that lets them pin it to a specific board and add to or modify the description.

For on hover buttons the description is taken from the alt text in the img tag so make sure you make this descriptive (you should do this anyway to help web accessibility).

Image 5 for this tutorial

Understanding the Code

For this demo the script line includes data-pin-hover="true" which allows it to implement both on hover and static buttons.

The first image has a static button next to it. Note how the other images have no additional attributes that links them to Pin It - the script applies it self to all of them automatically.

More Information

Pinterest Documentation

Pinterest Rich Pins - extensions that allow you to pass metadata to the Pinterest site.

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus