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

Question

Related: How can I rename Pinterest Pin It button?

---

The pinterest "pin it" button design for websites shown on their useful properties page requires a web designer to insert a specially marked anchor tag on their web page. Then the page should call the pinit.js template .

The special anchor tag should 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 plate should look like this and should be placed after the last output.

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

As far as I can tell what pinit.js code does:

• view page for anchor tags
• looking for special markings, in particular the pin-it-button class and the href prefix
• Replaces anchor labels with reformatted IFRAMEs. The src attributes for these iframes receive normalized URLs that point to a different server, not to pinterest.com, but to a server from the CDN that uses pinterest.

This is good on a static webpage, but:

• it does not work on a dynamic page, where the pin it buttons can be dynamically generated using jquery logic and entered into the page layout in response to user actions.
• it requires one iframe button per pin it button, which means one HTTP GET for the pin it button. If you have 10 photos, each with a pinit button, then there are 10 HTTP GETs for CDN pinterests. All of these GETs are for the same named resources, but they are all slightly different from each other, based on the URL of the image that needs to be pinned, and as such cannot be cached.

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

---

One of my ideas:

• insert exactly one anchor tag within the div designated as display:none; .
• invoke pinit.js, which magically replaces this anchor tag and loads a new iframe. It is invisible because it is still in an invisible div.
• run some additional JS logic to check the src attribute url for the generated iframe, keeping the host name for the CDN pinterest.
• ?

Then I can generate the “normalized” URLs for the CDN pinterest, but ... if I just use them as src for the iframe that my logic generates, then I have the same problem with excessive GETs. All I did was to exclude consecutive calls to pinit.js (which are cached anyway).

Has anyone come across this?

I have to believe that this project will change - it does not scale for pinterest the way it works now.

---

EDIT

I read elsewhere that pinterest provides an “asynchronous” mechanism for the pin it buttons on a page, suitable for use when there are many pin it buttons. Not sure what it is; I could not find him.

Answer 1

I answer my question.

I looked, but could not find a detailed document from pinterest, which describes how to approach this problem. I think their API is just too new, too immature to cover it.

The problem I discovered was that there was one IFRAME for each pin it button, and this iframe loaded the source code from the pinterest CDN. 10 images meant 10 frames and 10 HTTP GETs.

I found a way to embed a single button on a web page that allows the user to attach any of 10 images. This was through the pinmarklet.js script provided by pinterest . But, that the script didn’t work for me, and it had several errors, so I changed it in accordance with my goals.

Now, when I click the pin it button, it fills in only one IFRAME, requires only one HTTP GET, regardless of how many photos are available on the page. The user interface is as follows:

... although you can do anything, I think.

What problems have I fixed?

Pin card was

(a) kludgy. He defined an anonymous script, and the page would have to re-request JS whenever needed to pop up the pinterest interaction form. No need for this. Let me just do it once.

(b) is broken. There were several errors, including the state of the race in the code, which is trying to determine the natural size of the image. Because of this error, the pinmarket form sometimes did not appear. Lame!

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

http://pastebin.com/y5fBRJHc