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.
Sharing Is Caring
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
urlparameter: the address of the page to link to, URL-encoded - the
mediaparameter: the address of the picture to share, URL-encoded - the
descriptionparameter: 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,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAL7UlEQVR42mK8mhDJwMjMzPDn21duBoZ/Ln8/f2xhZvqnxMTMyMZAR/Dv7/9ff/8x3WPm5atlYGDezcLF/fX/378MAAHEwsjIxPDv31/hfz++LGD8/sGHW1qWgUlIjIGJjYWBrg789Yfl37tXOt+fPlr/n1Nwyz8OjgQmRqa3AAHE8vf3b/7fn94uZfzxwZ3P3JKBQ1GV4d/P30D8g64OZGLnYGDS1GRguX+H4ePJYz7A4FzKyiccDhBALP9+/bBn/PrOnU/fmIGJh4/hy6VzYMf9//ePrg5kZGICO5JNUpqBT8eQ4dPFM+7/OLjsAQKI5eeHN62cAgIMDOxsDD/u3wWGNdBhjGBEXwC099+3b2A3sAoKM7AICDJ8//C2FSCAWJgY/yn9YwJmkq+fgaH2hwHstP9E+hrsEUY4DdEGIRnBXvzP8B/I/QeliXPoH7BbQG4CuQ0gAONkkgIACMPAgEvBg///qAerqLEI3sQHhEzpxDMZSXbeegueYNsZUvUxUVRRqqI1emtaHECOz3mHJIIsAYGFg5Q/nOa/XTTjEkAs/4Cu+g/igPE/okLt5+8/DG+//WD4AiwGGJjZGLgVlBgE5BQZOIVFGJhYQf79y/Dry2eGr8+eMry9fY3h9duPDNxAx4pyczCwshBROvxnBCGwhwECiAWUGcAZAoZx5TKgy34DHfTm4yeGj6wcDIKaegz6Tu4MkiaWDKxc3ECHM+KIsT8MLy+cYbi7ZR3Dw6sXGIT+/2EQ4uMDexRntDOCXQcOOIAAYvn3F+iov6CEAsVYADNQw3dgVD79AAwJIwsGy+BIBjFgrieq+ACGmKSJBRg/O3mU4dry+QzP7t5gkBIWxu1Ixv9gN4HcBhBALP/ALv0HiV4sUQwKue/ANPb0+08GxfgMBvWAcGA0smKo+/HgDsOvl88Z/v/9w8DEwcnAIavIwCoqjqJGytyaQUhNk+Hc9H6GFycOMkgK8uOMYnC+ALoNIICADvzPAItm9LIPFGm/gBa++PmXQSOrmEHJ1Rut9P/J8H73ZoYPR/Yx/PnwDpi4f4INBlWdTBxcDOxSsgxCXkEMvAamcD0cgkIMZiU1DCe7/jK8P3uUgZ+HB2sUgxwHchtAALGAQ+8f9igGBjLDu28/GeRjMzAc9+36JYZncycz/HzyCOwRRiYwCSpQwNH298tXht+vXzF8uXyOQcDOlUEqOY+BkQ1SvbOwsTOY5JUznKjMY/j75jkwt7NgRPF/UMAB3QYQQExgBrIDkfDvX78Z2A0sGDSCI1D0fzx2kOFBWzXDzwd3GZiBofULqPzLT2D5BfQ1pPxjBBczjMCiBcR7t2MTw6vVi1AyITsfP4NGSg7Dx99/ge7Bbj/IXQABxPQPmDP/IUUxDDMCJT//ZWLQSs5EcdzXq5cYnkzuYvj7+QswKtkYXn74zHD3xRuGRx+/MNx9+ZbhB9ChDChmMQLTLDvDmw2rGL4B0ykyEDc0ZeDQNmT4DwwIdPvBUQx0G0AAMUGKwH8Y+N/vHwy8ZlYMfLLyiDT34zvDs5m9DP++f2FgBlaNLz5/ZvijpMZgPWEmg9uCVQx6lU0Mb/9CMhvCrL8M/4HR//fnN4b3B3ZhJDd5nwCGn8AqDpsbQG4DCCBwGmTEkgZ/f//BIO3ggmLY2y1rGX48fghsirEyfAI6jsvYmsG0pgXoWHawPK+MHMO/Ny8Zvi6bw8AMzMnIqZmRhY3h65kTDAyJWaAEC5fhU1BmYOLlA1r4C1hkMCGKGWgaBAggYBT/B+cWFEf+AdYQXDwM/EoqiNADVmXvD++FpFdQc0xYnEE3vxzuOBiQtnGE+PMfauYDpU1QMfTz/XvU/MAGbMGISTD8B5qPngZBbgMIICZI+kMtav4B0wSbmBQDIyvC8s/3bjP8fvMG6BGgZ4E5VMbFk4FLRASzUAc6mAVYxPwHJv7/GGn7P8P3F0/RCnJIkfT/D0I9AywNAjFAAIHLQUhxzoiIYlBTmxtYfSFl/5/PnzL8BUY7KMeBfMslKoa1SQYqC/8Bo5+JgwNrzfTnO3pDGBR7/1CTGBOkzQFyG0AAsUBbDag1CZZaBdRaATUCgEUouLT7+/Ur1krg681rQA/+wd7wABbAjCxotRAwU/3/8Q3hBrD9MDf9ZwAIIBZYiQ2qmP9DfQAuloDRCLYIFnVCwgy/gE5j/wM0EFi+fQcW0OBiAFgOIoPPRw8CFbPAzUJ1yz8GDhFR1PADZo4/r1+DwhEegjC3gNwGEEDgNMjwH1YwQtMAMDf9fPwAWJx8hxskoqPP8E1QBOwoUAH87d4dYCh+QbHs15tXDJ/OngA33zHKVaC+78AahFMctX7+/ekjOPOAQhdu/39IgIHcBhBATP/ADAZEGvwHSY+gdPT12hW4QSzA/oJMQBjDT1DpDjTs57u3wMz0C8WyDwf3AaPrJySG0HMkMOOxaupiRDHYDnA+QNIDjW2Q2wACiIkBlkmQ24QgHwNbLK/WLIVkfyhQ9PZnYBEWBSVIhv+ghikTE4pln4DRC2rNoJvFDLTtPdDDEk5uGBnr84kjEEej6PkPyyUMAAHEBGlNM0Jd/R+OGUDRCPTd0xkT4Y02UNtOUF2D4c+PHwwswKYUE1Jh/Bso9vPFM3A7DtkcUK7/+glS44gCm1so0fvmNcPnsyfBSQqhB1GLgDBAAEHbg7CoQG9uMTG8XrGI4e/HjwySyRkMLPyCDD9u3WT4DSyo+VXUGFg5EQ5kYmZiePPjFwMPMK2B+h+w5toXYLHzClgfG6blMnDwo7b/Xi1bCOzJfQc3z1D6Qv8gyQ3kNoAAYoHlYHAI/sXSvGVkAVZxGxk+nz/DwMLLz/DryVOG38ACnFNFA6WZzwyMckFgk+zW7GkMnIy/GUBW/gSGxG+guHZeCYOsE2q1Cepevt+zE2onmr2gfAEtBwECiAUSrIyQaMbaJWECp5Ffz14Ai5kX4NzILi3HwCGvgKFSLzOHgUdahuHRzu3AKu0dg4SaOoNSUCiDqJ4+qv3AdPps5lSGn8+eQwt0VMdBkhwj2PEAAcQCDj1GBnhRg7s3xwRW9xvY8uCQV2Tgk5NHNRQamkp+AWCMs8MG9ODTSX3A0NsFacD+www9EGb8DykPAQIIUtWBGwuQUp1gj5CJhYFNUwfYKkYMfn06fpTh98sXDMKBIXj1frtxneHFnJkMH/buBmc4hr/gBIfhQMZ/DPAMAxBA4F7dP2AUw+IcLwDVHMCMImBqhlq8XLnC8GxCL8O3O3cZRENCGdhBocsIGVn4A+wJfjl3Btiq3s7w5fw5hl+vXjIwARsUkJoDS4BAy+V/DJB+MUAAscC7ff8Z8UYxJHqA2oBNdVF9A6RG7A+GHzdvgJtoL5ctYXi1cgUDEzcXAwuwMwQaa/n75Quk6Pj7F5KigbUJOE/g6hT//w8pK6HFDEAAscAKakZYSY7PgUD3saqqAXMsojb4AyyCvp45A2xmcUAKFlAXAti5/wUMOcigDSMiDTMQtgPiQEgGAUUzQACBQvDXr99/WJhY2CCNif/4xmcYGXh19FCrqlu3GH48esLADGoVoxRTjATMwjHqwwjpw/wAt54YfgEEEAsLM8u9z5++6PwDllegsuwvqIGAYxgDJMolJ4ea/vbuRVRVlAKgi5iBhf8/YGB9+fSFAeQ2gABi4uPhq/3w4T3DK2Au5JCQhPQlQHYBm1Xgpj8yBqZBNmDHG55ngGns/Y6dwJqKGVMtSRiSK0B2g9wAcsuHD+8Y+Hh4awECiIWVhXU/Pw/fzvs3brgzAQtlMSkZBkZgi+Tvr5+Y6QXYO+OUlERE72lg2gP6lkVMksLxX0YGZmDm+c/BzvDy+TMGoFsY+Hn4d7KysO0HCCAWxv+MHwX5BaKBlfqCO9eu+Lx+8ZyBl4ePgR1YzmGMWAH5AsAo/S4tCc6Z96fOYPgCzCSMaK0akmMWmBF+Aptun798YvgIbMYJ8PJtEeAXSAC5DSCAGHerQerUnz9/cv/5/dvly9evLT/+/FZiBA1sYgHS0tIM3MD+yhdg9L548oSBWiPZ/xkZf3GwsN7j4eauZWFl3c3Ozv4V5HCAAAMAlTuh/0H0Uz0AAAAASUVORK5CYII=") 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!
Frequently Asked Questions (FAQs) about Images on Pinterest and Call-to-Action
How can I add a ‘Pin It’ button to my website images?
Adding a ‘Pin It’ button to your website images can be done by using Pinterest’s Save button. You can get the code from Pinterest’s developers page. Once you have the code, you can add it to your website’s HTML. This will allow your website visitors to save your images to their Pinterest boards directly from your website.
How can I customize the ‘Pin It’ button?
The ‘Pin It’ button can be customized in terms of size, shape, and color. You can choose between a small or large button, a round or rectangular shape, and a red or white color. You can make these customizations on Pinterest’s developers page before getting the code.
How can I add a call-to-action to my Pinterest pins?
Adding a call-to-action to your Pinterest pins can be done by including it in the pin’s description. You can use phrases like “Click here to learn more” or “Visit our website for more information”. This can encourage Pinterest users to engage with your pins and visit your website.
How can I track the performance of my ‘Pin It’ button?
You can track the performance of your ‘Pin It’ button by using Pinterest’s analytics. This tool can provide you with information about how many times your button has been clicked, how many pins have been created from your website, and how much traffic your website has received from Pinterest.
How can I make my website images more pinnable?
Making your website images more pinnable can be done by ensuring they are high-quality, visually appealing, and relevant to your content. You can also add a descriptive alt text to your images, which can be used as the default description when your images are pinned.
How can I optimize my Pinterest pins for search?
Optimizing your Pinterest pins for search can be done by using relevant keywords in your pin’s description and title. You can also use hashtags to make your pins more discoverable.
How can I encourage website visitors to pin my images?
Encouraging website visitors to pin your images can be done by adding a clear and visible ‘Pin It’ button to your images. You can also use call-to-actions in your content to encourage pinning.
How can I add a Pinterest share button to my website?
Adding a Pinterest share button to your website can be done by using a social media buttons plugin. This can allow your website visitors to share your content on Pinterest and other social media platforms.
How can I use Pinterest to drive traffic to my website?
Using Pinterest to drive traffic to your website can be done by creating and sharing high-quality, relevant, and engaging pins. You can also use call-to-actions in your pins to encourage Pinterest users to visit your website.
How can I use Pinterest for marketing?
Using Pinterest for marketing can be done by creating a business account, setting up a Pinterest profile that reflects your brand, creating and sharing pins that promote your products or services, and engaging with other Pinterest users. You can also use Pinterest’s advertising options to reach a larger audience.
Alexis UlrichAlexis Ulrich is a full-stack web developer based in Paris, France. He is interested in the way content can be created, optimized, used and shared on the web. When not working on his pet sites (languagesandnumbers.com and mancko.com), he shares his MOOC experiences on web-technos.blogspot.com.
