2026 context: keep the technical record; measure outcomes with current tools
The Pinterest button code below is a record of a 2012 browser-integration problem. Do not deploy a copied platform button or try to inspect an embedded third-party frame. Modern browsers enforce that boundary. For current work, define the business outcome first, use Pinterest’s approved measurement options and first-party analytics, and keep the platform event separate from a completed enquiry or sale.
Archive record
Tracking Pins With the Pinterest Button
By: Bob Tantlinger
Recently I was tasked with logging social media interaction on a site utilizing the “buttons” (what do you call those anyway) of Twitter, Facebook, Google+, LinkedIn, and Pinterest.
We wanted to be able to record not only when a social media button was clicked, but when an actual share, like, or whatever took place. In other words, we needed to know that the user actually did the share. Nothing very difficult. Most of the big players in social media have handy APIs that let you subscribe to events they fire off when a share takes place, which makes this fairly straight forward. In a perfect world it WOULD be easy, but there’s -always- a monkey wrench lurking around the corner ready to ruin your day. In this case the monkey wrench was a royal “Pin in the Ass.” I am referring to, of course, Pinterest.
Pinterest is the newest social media fad, so their button is popping up all over the place at an alarming rate. Everyone is rushing to get their images pinned to the worlds biggest pin board. But there’s a problem. While Pinterest’s “Pin it” button works fine, they offer no offical API, so unlike the other social media services, there’s not much you can do with the Pin It button. You can stick it on your site, and that’s it. You cannot track events, such as when a “pin” occurs, or even when someone simply clicks on the darn thing.
The good news is that Pinterest is working on an API, which should hopefully be ready soon. Parts of it are apparently in “Read Only” mode http://tijn.bo.lt/pinterest-api
http://articles.businessinsider.com/2012-03-26/tech/31238519_1_mobile-apps-twitterrific-hootsuite
Sadly, until then, the best you can hope for is a hack like the one I will document below.
Bending Pinterest to your will (Almost)
When you include the Pinterest button on your page like they want you to, you include their javascript file:
http://assets.pinterest.com/js/pinit.js
and a simple link where you want the button to show up:
<a href="http://pinterest.com/pin/create/button/" class="pin-it-button"
count-layout="horizontal"><img border="0"
src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>All well and good… BUT when the pinterest javascript executes, it takes the simple link, removes it from your DOM, and replaces it with an IFRAME. (an embedded html document right in your page where the button goes) So the pin it button is not actually a button. Rather, it’s a small html file loaded from Pinterest’s CDN embedded in your page. The transformed code looks like this:
<iframe scrolling="no" frameborder="0"
src="http://pinit-cdn.pinterest.com/pinit.html?url=http%3A%2F%2Fmysite.com&media=http%3A%2F%2Fmysite.com%2Fpic.jpg&description=Neat+Pic&layout=vertical"></iframe>Because they put it in an IFRAME, it’s like putting a brick wall around the button. The IFRAME is pointing to http://pinit-cdn.pinterest.com/pinit.html, which is obviously different than your domain… Thus, you run up against the browser’s same origin policy (A security measure browsers implement which ensures scripts from two different domains can not interact with each other.). So, I was stuck. I could not get through the IFRAME brick wall, so I decided to go around it completely.
Looking at the code contained in the IFRAME, you’ll see it’s just a tiny html document, which only contains the button. If you examine this code with Firebug, you can get the css styling, images, etc that give it its look:
As you can see from the code, the pinterest button is basically just a couple images and some css styling. Thus with a little bit of jquery magic, I created my own function to embed the button on my own domain.
The Pinterest Button Hack
First, I stripped out all references to the pinterest button. It’s important to NOT include the pinterest javascript file.
Next, I created a small javascript file with two functions: loadPinterest and updatePinterestCount. I chose to create this as an individual file, so that I could simply include it on any page I wanted a “pin it” button on.
var updatePinterestCount = function() {
$.ajax({
url: 'http://api.pinterest.com/v1/urls/count.json?callback=?',
data: {
url: document.URL
},
success: function(data) {
$('.PinCountBubble').html(data.count);
},
dataType: 'jsonp'
});
};
var loadPinterest = function(buttonSelector, imageUrl, description, onPinItClickCallback) {
var pinUrl = "http://pinterest.com/pin/create/button/?url=";
pinUrl += encodeURIComponent(document.URL);
pinUrl += "&media=" + encodeURIComponent(imageUrl);
pinUrl += "&description=" + encodeURIComponent(description);
var css = "position: absolute; background: url('http://assets.pinterest.com/images/pinit6.png');";
css += "left:0px;top:40px;font: 11px Arial, sans-serif; text-indent: -9999em; font-size: .01em;";
css += "color: #CD1F1F; height: 20px; width: 43px; background-position: 0 -7px;";
var html = "<div style='position:relative;margin:0;padding:0;width:43px;height:45px;display:block;'>";
html += '<a class="pinner" href="' + pinUrl + '" count-layout="vertical">Pin It</a>';
html += '<div>';
css = "background-position: 0 0; height: 7px;top: 31px; width: 41px;";
css += "background: url('http://assets.pinterest.com/images/pinit6.png') repeat scroll 0 0 transparent;";
css += 'color: #FFFFFF;font-size: 0.01em;position: absolute;text-indent: -9999em;z-index: 1;';
html += '<div class="PinCountPointer"></div>';
css = "font: 12px/12px Arial,Helvetica,sans-serif; height: 21px;left: 1px;padding: 9px 0 0;text-align: center;width: 39px;";
css += "background-color: #FCF9F9;border: 1px solid #C9C5C5;border-radius: 1px 1px 1px 1px;color: #777777;position: absolute;";
html += '<div class="PinCountBubble">0</div>';
html += "</div>";
html += "</div>";
$(buttonSelector).html(html);
$('.pinner').click(function() {
window.open($(this).attr("href"), 'signin', 'height=300,width=665');
if (typeof(onPinItClickCallback) == "function") {
onPinItClickCallback();
}
return false;
});
$('.pinner').mouseenter(function() {
updatePinterestCount(opts);
});
$('.pinner').mouseleave(function() {
updatePinterestCount(opts);
});
updatePinterestCount();
};
The loadPinterest function uses jQuery to insert the button wherever you specify via a css selector. E.g <div id=”pinit”></div>
You can pass this function:
- CSS selector of the page elements you want to become pinterest buttons
- The url of your image
- A description of the image
- a callback function, so that when someone clicks on the pin it button,
you can take some action.
When the pin it button is clicked the following things happen:
- A popup window opens http://pinterest.com/pin/create/button/ just as
it does with the offical pinit button. - The window displays the options to “pin it” based on the parameters
you passed the loadPinterest function. - The callback is called. What action you decide to take is up to you.
The best you can do is detected when the pint button is clicked.
Unfortunately, there’s no way to know that the user actually pinned
anything or closed the window. - The updatePinterestCount function accesses pinterest to get the
current pin count with an ajax jsonp request. So at the very least we
can keep track of the pin count on the button.
The button’s count is updated when:
- The page first loads
- The user mouses over the pinit button
So, then, to include the button you simply need to call the pinterest like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="pin-me.js"></script>
<script type="text/javascript">
$(document).ready(function(){
loadPinterest('#pinit', $('#pinImg').attr("src"), $('#desc').html(), doSomethingOnPinClick);
});
function doSomethingOnPinClick() {
//do whatever you want here
alert("You clicked the Pin It button!");
}
</script>
</head>
<body>
<h3 id="desc">My Cool Picture</h3>
<img id="pinImg" src="http://bobtantlinger.com/social/pic.jpg" />
<div id="pinit"></div>
</body>
</html>And here is the working demo of the above code. The pinterest button is not being loaded from pinterest at all, and you can detect when the user clicks on it.
Limitations
This is ultimately a kludge until Pinterest releases its API. As mentioned above, there is still no way to detect if the user actually completed a pin. Only that he or she clicked on the pin it button. Until there is an official API from Pinterest, that is probably the best one can hope for.
In addition, the html + css for the button only does the vertical (count bubble on top) version of button because that’s what I needed. It should be straight forward to change if you need other button styles.
Current references: Pinterest Analytics and Measurement · Pinterest Conversion API · Web Marketing
