CODEWITHSUNDEEP
javascriptjqueryiframepinterest
Cheeso
Cheeso

Reputation: 192577

How to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?

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:

This is fine on a static webpage but:

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

One idea I had was:

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.

Upvotes: 4

Views: 2969

Answers (1)

Cheeso
Cheeso

Reputation: 192577

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

Upvotes: 3

Related Questions