Archive for the ‘Media’ Category
Tracking Pins With The Pinterest Button
Monday, May 14th, 2012
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"
style="border: medium none; width: 43px; height: 58px;"></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:
Click to Enlarge!
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 + '" style="' + css + '" count-layout="vertical">Pin It</a>';
html += '<div style="display:block;">';
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" style="' + css + '"></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" style="' + css + '">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.