StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I am answering my own question.</p> <p>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. </p> <p>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. </p> <p>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 <a href="http://assets.pinterest.com/js/pinmarklet.js" rel="nofollow noreferrer">the pinmarklet.js script, provided by pinterest</a>. But, that script didn't work for me, and it had several bugs, so I modified it to suit my purposes. </p> <p>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: </p> <p><img src="https://i.stack.imgur.com/f6oZG.png" alt="enter image description here"></p> <p>...although you could make it anything you like, I guess. </p> <p>What problems did I fix? </p> <p>The pinmarklet was</p> <p>(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.</p> <p>(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!</p> <p>I modified the code to fix these things, and it works well now, for me. </p> <p><a href="http://pastebin.com/y5fBRJHc" rel="nofollow noreferrer">http://pastebin.com/y5fBRJHc</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload