4

Related: How can i rerender Pinterest's Pin It button?


The design of pinterest "pin it" button for websites, shown on their goodies page, calls for a web designer to insert a specially-marked anchor tag into their web page. Then the page must invoke the pinit.js boilerplate.

The special anchor tag must be like this:

<a href="http://pinterest.com/pin/create/button/?
    url=http%3A%2F%2Fpage%2Furl
    &media=http%3A%2F%2Fimage%2Furl" 
   class="pin-it-button" count-layout="horizontal"></a>

and the pinit.js boilerplate must look like this, and must be placed after the last pin.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>

As far as I can tell, what the pinit.js code does is this:

  • scans the page for anchor tags
  • looks for the special markings, specifically the "pin-it-button" class and the href prefix
  • replaces the anchor tags with reformatted IFRAMEs. The src attributes for these iframes get normalized URLs that point to a different server, not pinterest.com, but rather a server from the CDN that pinterest uses.

This is fine on a static webpage but:

  • it doesn't work on a dynamic page where "pin it" buttons might be dynamically generated via jquery logic and injected into the page markup in response to user actions.
  • it requires one iframe per "pin it" button, which means one HTTP GET per "pin it" button. If you have 10 photos, each with a pinit button, then there are 10 HTTP GETs to pinterests' CDN. All of these GETs are for similarly-named resources, but they are all slightly different, based on the url of the image to be pinned, and as such cannot be cached.

What I would like to do is eliminate the excessive GETs. Any ideas?


One idea I had was:

  • insert exactly one anchor tag, within a div styled as display:none;.
  • invoke pinit.js, which results in the magic replacement of that anchor tag, and the loading of a new iframe. It is invisible, because it still resides in the invisible div.
  • run some additional JS logic to inspect the URL on the src attribute for the generated iframe, saving the hostname for the pinterest CDN.
  • ?

I can then generate the "normalized" URLs for the pinterest CDN, but... if I simply use them as src for an iframe my logic generates, then I have the same problem with excessive GETs. All I have done is eliminated the successive calls to pinit.js (which is cacheable anyway).

Has anyone confronted this?

I have to believe this design is going to change - it seems not scalable for pinterest the way it works now.


EDIT

I read elsewhere that pinterest provides an "asynchronous" mechanism for "pin it" buttons on a page, suitable for use when there are lots of "pin it" buttons. Not sure what that is; I couldn't find it.

1 Answer 1

3

I am answering my own question.

I looked but could not find any detailed doc from pinterest that describes how to approach this problem. I think their API is simply too new, too immature to cover this.

The problem I found was that for each "pin it" button, there was a single IFRAME, and that iframe loaded source from the pinterest CDN. 10 images meant 10 iframes and 10 HTTP GETs.

I did find a way to insert a single button on a webpage that allows a user to pin any of the 10 images. This was via the pinmarklet.js script, provided by pinterest. But, that script didn't work for me, and it had several bugs, so I modified it to suit my purposes.

Now when I click a "pin it" button, it fills only one IFRAME, requires just one HTTP GET, regardless of how many photos are available on a page. The UI looks like this:

enter image description here

...although you could make it anything you like, I guess.

What problems did I fix?

The pinmarklet was

(a) kludgy. It defined an anonymous script, and a page would need to re-request the JS every time it needed to popup the pinterest interaction form. No need for that. Let's just do it once.

(b) broken. There were several bugs, including a race condition in the code that tries to determine the natural size of an image. Because of that bug, the pinmarklet form would not show, sometimes. Lame!

I modified the code to fix these things, and it works well now, for me.

http://pastebin.com/y5fBRJHc

2
  • There is no need to edit Pinterest's JS. Check out the linked question and/or this Feb 10, 2014 at 0:57
  • There is a need to edit the JS if you want to avoid the race condition I mentioned. But maybe pinterest has fixed this problem in the 2 years since I answered this question. It's quite possible.
    – Cheeso
    Feb 19, 2014 at 2:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.