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
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
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>
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.