Share Images with a Pinterest Call-to-action

February 26, 2015

In this article, I’ll demonstrate how to add a Pinterest call-to-action on top of an image when a user is actively interacting with it.

Firstly, let’s look at why you would even want to do that.

Picture of a tea pot with a Pinterest share button appearing on hover

What constitutes good content often depends a lot on the particular needs and interests of end users. Good content might be attractive, effective, simple, functional, informative, inspiring … and so on.

We are used to adding social network buttons or links to share a page (ideally via fat-free buttons). Facebook, Twitter and Google+ are often the primary must-haves.

We may also want users to be able to share parts of our page. Page content is often made of chunks, and each of these chunks can be provided with its own preferred social network sharing feature.

For instance, a quote can be targeted to fit Twitter’s 140-character limit, and a picture can be aimed for Pinterest.

Let’s look at how you set up your images to be shared on Pinterest.

Anatomy of a Pin URL

A Pinterest Pin URL is made of four components:

the Pinterest part of the URL: https://www.pinterest.com/pin/create/button/
the url parameter: the address of the page to link to, URL-encoded
the media parameter: the address of the picture to share, URL-encoded
the description parameter: the descriptive text shown on Pinterest, URL-encoded, 500 characters max, but 200 characters seems to be the best choice.

Some HTML data elements can be added if you add Pinterest’s own JavaScript, especially data-pin-do and data-pin-config, but it won’t be needed in this case, as this is a fat-free approach where we rely on the strict minimum amount of code.

The Hard-coded Way

The code we want to get looks like this:

<a href="http://www.pinterest.com/pin/create/button/?url=<page url (encoded)>&media=<picture url (encoded)>&description=<HTML-encoded description>" target="_blank" class="pinterest-anchor pinterest-hidden">
    <div class="pinterest-logo"> </div>
</a>
<img src="<picture url>" data-pin="pinIt" alt="<description>">

Each sharaeble picture (marked with the data-pin attribute pinIt) is prefixed with an anchor to the Pinterest sharing page with the right attributes in its URL, embedding a div to display the logo.

Three CSS classes are used here: pinterest-anchor, which absolutely sets the Pinterest logo position on the top-left corner of the picture; pinterest-hidden, which sets the visibility status of the logo, and pinterest-logo, the logo itself, 40×40 pixels, encoded in base64 in the CSS.

.pinterest-anchor {
    margin-left:10px;
    margin-top:10px;
    position:absolute;
    z-index:42;
    width:40px;
    height:40px;
}
.pinterest-hidden {
    display:none;
}
.pinterest-anchor:hover {
    display:block !important;
}
.pinterest-logo {
    background: url("data:image/png;base64,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") no-repeat center center;
    background-size: 40px 40px;
    height: 100%;
    width: 100%;
}

The animating part – showing and hiding the logo on hovering the picture – is handled in JavaScript, using jQuery notation:

$("img[data-pin='pinIt']").each(function() {
    $(this).hover(function() {
        $(this).prev().css("display", "block")
    }, function() {
        $(this).prev().css("display", "none")
    });
});

Automation Is Your Friend

But I don’t want to bloat my content code with that specific piece of HTML that prefixes the sharaeble picture. The maintenance side of it alone will have some cost if anything has to change – such as the Pinterest share URL, parameters, and support for other social networks.

As JavaScript is already used to handle the mouse interaction, let’s go one step further and generate that code for any image on the page.

Using jQuery again, we get:

$("img[data-pin='pinIt']").each(function() {
    $(this).before('<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent($(location).attr("href")) + '&media=' + encodeURIComponent($(this).attr("src")) + '&description=' + encodeURIComponent($(this).attr("alt")) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>');
    $(this).hover(function() {
        $(this).prev().css("display", "block")
    }, function() {
        $(this).prev().css("display", "none")
    });
});

For each image with the data-pin attribute set to pinIt, we prefix it with the sharing anchor, getting the page URL directly from the page location attribute, the picture URL from the image href, and the description from its alt text, while properly encoding the URI components.

This is demonstrated in the following CodePen

See the Pen Pinterest pin-it Call-To-Action (jQuery) by SitePoint (@SitePoint) on CodePen.

But Do We Need jQuery?

The fact is, jQuery might not be needed. If you don’t really need it, plain old vanilla JavaScript can do the job. As a matter of fact, I consider it a good exercise to translate jQuery code chunks into regular JavaScript from time to time. It’s a reminder of how everything works behind the curtain.

var pinables = document.querySelectorAll('img');

Array.prototype.forEach.call(pinables, function(el, i){
    data = el.dataset;
    if (data.pin=='pinIt') {
        el.insertAdjacentHTML('beforebegin', '<a href="http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(el.src) + '&description=' + encodeURIComponent(el.alt) + '" target="_blank" class="pinterest-anchor pinterest-hidden"><div class="pinterest-logo"> </div></a>');
        el.onmouseover = function(){ this.previousSibling.style.display='block'; }
        el.onmouseout = function(){ this.previousSibling.style.display='none'; }
    }
});

The images selector – $("img[data-pin='pinIt']").each – is now an array of all images for which we check the data attribute value. The rest of the code is a direct translation of the jQuery implementation.

As you can see in this Pen, it works exactly the same.

See the Pen Pinterest pin-it Call-To-Action (javascript) by SitePoint (@SitePoint) on CodePen.

Where To Go From There?

In web design and user experience, simplicity is the way to go. We don’t want to clutter our interfaces with social network logos. In that sense, this approach is very clean: the logo appears only when the user hovers over the image; and the Pinterest logo is well-enough known that we don’t need to add a text link next to it to explain its meaning.

However, the sharing form opens in a new window, which drives the user outside of the current page. As Craig Buckler states in his article, this “is a step too far for the most eager social media manager”. A small pop-up window to show it can be a viable alternative, for which he gives a vanilla JavaScript implementation.

For those interested, a small hint here: in our case, the target has no href attribute, but its parent node has one. (You can check out a real-life implementation of this.)

So, what are your thoughts on social network buttons? Do you favor the fat-free approach, or would you rather utilize all of the features that JavaScript can offer? Let us know in the comments!

JavaScript: Novice to Ninja, 2nd Edition

Sharing Is Caring

Anatomy of a Pin URL

The Hard-coded Way

Automation Is Your Friend

But Do We Need jQuery?

Where To Go From There?