Ask us a question!

Web Moves Blog

Web Moves News and Information

14
May
2012

Tracking Pins With The Pinterest Button

Pinterest Logo

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:

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:

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:

Firebug Pinterest Button Analysis

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.

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:

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.