Databases
StackOverflow2013
Postsdbo
POHow to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?
    primarykey
    data
    text
    <blockquote> <p>Related: <a href="https://stackoverflow.com/questions/9352021/how-can-i-rerender-pinterests-pin-it-button">How can i rerender Pinterest&#39;s Pin It button?</a></p> </blockquote> <hr> <p>The design of pinterest <strong>"pin it" button for websites</strong>, shown on <a href="http://pinterest.com/about/goodies/" rel="nofollow noreferrer">their goodies page</a>, calls for a web designer to insert a specially-marked anchor tag into their web page. Then the page must invoke the <a href="http://assets.pinterest.com/js/pinit.js" rel="nofollow noreferrer">pinit.js boilerplate</a>. </p> <p>The special anchor tag must be like this: </p> <pre><code>&lt;a href="http://pinterest.com/pin/create/button/? url=http%3A%2F%2Fpage%2Furl &amp;media=http%3A%2F%2Fimage%2Furl" class="pin-it-button" count-layout="horizontal"&gt;&lt;/a&gt; </code></pre> <p>and the pinit.js boilerplate must look like this, and must be placed <em>after</em> the last pin. </p> <pre><code>&lt;script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"&gt; &lt;/script&gt; </code></pre> <p>As far as I can tell, what the pinit.js code does is this: </p> <ul> <li>scans the page for anchor tags</li> <li>looks for the special markings, specifically the "pin-it-button" class and the href prefix </li> <li>replaces the anchor tags with reformatted IFRAMEs. The <code>src</code> attributes for these iframes get normalized URLs that point to a <em>different</em> server, not pinterest.com, but rather a server from the CDN that pinterest uses.</li> </ul> <p>This is fine on a static webpage but:</p> <ul> <li>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. </li> <li>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.</li> </ul> <p>What I would like to do is eliminate the excessive GETs. Any ideas? </p> <hr> <p>One idea I had was: </p> <ul> <li>insert exactly one anchor tag, within a div styled as <code>display:none;</code>. </li> <li>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.</li> <li>run some additional JS logic to inspect the URL on the src attribute for the generated iframe, saving the hostname for the pinterest CDN.</li> <li>? </li> </ul> <p>I can then generate the "normalized" URLs for the pinterest CDN, but... if I simply use them as src for an iframe <em>my logic generates</em>, 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). </p> <p>Has anyone confronted this?</p> <p>I have to believe this design is going to change - it seems not scalable for pinterest the way it works now. </p> <hr> <p><strong>EDIT</strong> </p> <p>I read <a href="http://www.lunametrics.com/blog/2012/03/12/tracking-pinterest-event-tracking/" rel="nofollow noreferrer">elsewhere</a> 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. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USCheeso
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to eliminate the excessive HTTP requests when using pinterest "pin it" buttons?
      1. USPhil Derksen
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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