Come posso rerender il pulsante Pin It di Pinterest?

Question

Sto provando a creare e manipolare il pulsante Pin It dopo il caricamento della pagina. Quando cambio le proprietà del pulsante con js, dovrebbe essere rerenderato per ottenere la funzionalità di pinning delle immagini caricate dinamicamente. Quindi, Pinterest ha qualche metodo come la funzione B.XFBML.parse() di Facebook?

Grazie ...

Answer 1

Basta aggiungere l'attributo data-pin-build al tag SCRIPT:

<script defer 
    src="//assets.pinterest.com/js/pinit.js" 
    data-pin-build="parsePinBtns"></script> 

Che provoca pinit.js per esporre il suo funzionamento interno build al window all'oggetto globale come parsePinBtns funzione.

Quindi, è possibile utilizzarlo per analizzare i collegamenti nell'elemento implicita o tutti i link sulla pagina:

// parse the whole page 
window.parsePinBtns(); 

// parse links in #pin-it-buttons element only 
window.parsePinBtns(document.getElementById('pin-it-buttons')); 

Suggerimento: per mostrare conteggio zero basta aggiungere data-pin-zero="1"-SCRIPT tag.

Answer 2

loro lima pinit.js, cui si fa riferimento nella loro "Pin it" button docs, non espone alcun globali. Funziona una volta e non lascia una traccia diversa dall'iframe che crea.

È possibile iniettare di nuovo quel file per "analizzare" i nuovi pulsanti. Il loro JS esamina tutti i tag di ancoraggio quando viene eseguito e sostituisce quelli con class="pin-it-button" con il loro pulsante iframe.

Answer 3

Il modo migliore per farlo:

1. Rimuovere l'iframe del pulsante Pin It si vuole manipolare
2. Aggiungere il codice HTML per il nuovo pulsante manipolare come si desidera

3. Realod loro lo script - vale a dire utilizzando jQuery:

   $.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true}); 
   

Answer 4

questo lavoro Per me va bene: http://www.mediadevelopment.no/projects/pinit/ Raccoglie tutti i dati sull'evento click

Answer 5

Ecco cosa ho fatto.

Prima ho guardato pinit.js e ho deciso che sostituisce i tag di ancoraggio appositamente contrassegnati con IFRAME. Ho pensato che potevo scrivere la logica javascript per ottenere il nome host usato dall'attributo src sugli iframe generati.

Quindi, ho inserito il markup in base ai normali consigli di pinterest, ma ho inserito il tag di ancoraggio in un div invisibile.

<div id='dummy' style='display:none;'> 
<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> 
</div> 
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"> 
</script> 

Poi, subito dopo, ho inserito uno script per slurp il nome host per il pinterest CDN, dal iframe iniettato.

// 
// pint-reverse.js 
// 
// logic to reverse-engineer pinterest buttons. 
// 
// The standard javascript module from pinterest replaces links to 
// http://pinterest.com/create/button with links to some odd-looking 
// url based at cloudfront.net. It also normalizes the URLs. 
// 
// Not sure why they went through all the trouble. It does not work for 
// a dynamic page where new links get inserted. The pint.js code 
// assumes a static page, and is designed to run "once" at page creation 
// time. 
// 
// This module spelunks the changes made by that script and 
// attempts to replicate it for dynamically-generated buttons. 
// 

pinterestOptions = {}; 

(function(obj){ 

    function spelunkPinterestIframe() { 
     var iframes = document.getElementsByTagName('iframe'), 
      k = [], iframe, i, L1 = iframes.length, src, split, L2; 

     for (i=0; i<L1; i++) { 
      k.push(iframes[i]); 
     } 
     do { 
      iframe = k.pop(); 
      src = iframe.attributes.getNamedItem('src'); 
      if (src !== null) { 
       split = src.value.split('/'); 
       L2 = split.length; 
       obj.host = split[L2 - 2]; 
       obj.script = split[L2 - 1].split('?')[0]; 
       //iframe.parentNode.removeChild(iframe); 
      } 
     } while (k.length>0); 
    } 

    spelunkPinterestIframe(); 

}(pinterestOptions)); 

Poi,

function getPinMarkup(photoName, description) { 
    var loc = document.location, 
     pathParts = loc.pathname.split('/'), 
     pageUri = loc.protocol + '//' + loc.hostname + loc.pathname, 
     href = '/' + pathToImages + photoName, 
     basePath = (pathParts.length == 3)?'/'+pathParts[1]:'', 
     mediaUri = loc.protocol+'//'+loc.hostname+basePath+href, 
     pinMarkup; 

    description = description || null; 

    pinMarkup = '<iframe class="pin-it-button" ' + 'scrolling="no" ' + 
     'src="//' + pinterestOptions.host + '/' + pinterestOptions.script + 
     '?url=' + encodeURIComponent(pageUri) + 
     '&media=' + encodeURIComponent(mediaUri); 

    if (description === null) { 
     description = 'Insert standard description here'; 
    } 
    else { 
     description = 'My site - ' + description; 
    } 

    pinMarkup += '&description=' + encodeURIComponent(description); 
    pinMarkup += '&title=' + encodeURIComponent("Pin this " + tagType); 
    pinMarkup += '&layout=horizontal&count=1">'; 
    pinMarkup += '</iframe>'; 
    return pinMarkup; 
} 

E poi usarlo da jQuery in questo modo:

var pinMarkup = getPinMarkup("snap1.jpg", "Something clever here"); 
    $('#pagePin').empty(); // a div... 
    $('#pagePin').append(pinMarkup); 

Answer 6

Provate a leggere questo post http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ usa un po 'di javascript per sostituire l'iframe Pinterest con un nuovo pulsante e quindi ricarica il file pinit.js. Di seguito è riportato il javascript per fare il trucco

refreshPinterestButton = function (url, media, description) { 
    var js, href, html, pinJs; 
    url = escape(url); 
    media = escape(media); 
    description = escape(description); 
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description; 
    html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'; 
    $('div.pin-it').html(html); 

    //remove and add pinterest js 
    pinJs = $('script[src*="assets.pinterest.com/js/pinit.js"]'); 
    pinJs.remove(); 
    js = document.createElement('script'); 
    js.src = pinJs.attr('src'); 
    js.type = 'text/javascript'; 
    document.body.appendChild(js); 
} 

Answer 7

ho costruito sulla soluzione di Derrek (e numero variabile non dichiarata fisso) per permettere di caricare dinamicamente il pulsante di Pinterest, in modo che non può assolutamente rallentare i tempi di caricamento. Solo in relazione tangenzialmente alla domanda originale, ma ho pensato di condividere comunque.

alla fine del documento:

<script type="text/javascript"> 
addPinterestButton = function (url, media, description) { 
    var js, href, html, pinJs; 
    pinJs = '//assets.pinterest.com/js/pinit.js'; 
    //url = escape(url); 
    url = encodeURIComponent(url); 
    media = encodeURIComponent(media); 
    description = encodeURIComponent(description); 
    href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description; 
    html = '<a href="' + href + '" class="pin-it-button" count-layout="vertical"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'; 
    $('#pinterestOption').html(html); 

    //add pinterest js 
    js = document.createElement('script'); 
    js.src = pinJs; 
    js.type = 'text/javascript'; 
    document.body.appendChild(js); 
} 
</script> 

nel documento funzione pronti:

addPinterestButton('pageURL', 'img', 'description');//replace with actual data 

nel documento in cui si desidera visualizzare il pulsante di Pinterest, basta aggiungere un elemento con l'id pinterestOption, vale a dire

<div id="pinterestOption"></div> 

speranza che aiuti qualcuno!

Answer 8

Ho riscritto il codice pulsante Pinterest per supportare l'analisi dei tag Pinterest dopo aver caricato il contenuto AJAX, simile a FB.XFBML.parse() o gapi.plusone.go(). Come bonus, un file JavaScript alternativo nel progetto supporta una sintassi valida per HTML5.

Scopri i PinterestPlus project at GitHub.

Answer 9

ho cercato di adattare il loro codice per funzionare allo stesso modo (drop in, e non pensarci più), con l'aggiunta che è possibile effettuare una chiamata a Pinterest.init() per avere tutti i pulsanti "nuovi" sulla pagina (ad esempio ajax'd in, creati dinamicamente, ecc.) sono stati convertiti nel pulsante appropriato.

Progetto: https://github.com/onassar/JS-Pinterest prima: https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js

Answer 10

Per effettuare il rendering di un pulsante pin-it dopo una pagina è stata caricata è possibile utilizzare:

<a href="..pin it link.." id="mybutton" class="pin-it-button" count-layout="none"> 
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" width="43" height="21" title="Pin It" /> 
</a> 
<script> 
    var element = document.getElementById('mybutton'); 
    (function(x){ for (var n in x) if (n.indexOf('PIN_')==0) return x[n]; return null; })(window).f.render.buttonPin(element); 
</script> 

assumendo ovviamente le assets.pinterest.com/js /pinit.js è già caricato nella pagina. L'oggetto renda ha alcuni altri metodi utili come buttonBookmark, buttonFollow, ebmedBoard, embedPin, embedUser.

Answer 11

Ecco cosa ho fatto .. Una leggera modifica su @Derrick Grigg per farlo funzionare su più pulsanti pinterest sulla pagina dopo un ricarico AJAX.

refreshPinterestButton = function() { 
    var url, media, description, pinJs, href, html, newJS, js; 
    var pin_url; 
    var pin_buttons = $('div.pin-it a'); 
    pin_buttons.each(function(index) { 
     pin_url = index.attr('href'); 
     url = escape(getUrlVars(pin_URL)["url"]); 
     media = escape(getUrlVars(pin_URL)["media"]); 
     description = escape(getUrlVars(pin_URL)["description"]); 
     href = 'http://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description; 
     html = '<a href="' + href + '" class="pin-it-button" count-layout="horizontal"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>'; 
     index.parent().html(html); 
    }); 

    //remove and add pinterest js 
    pinJs = '//assets.pinterest.com/js/pinit.js'; 
    js = $('script[src*="assets.pinterest.com/js/pinit.js"]'); 
    js.remove(); 
    js = document.createElement('script'); 
    js.src = pinJs; 
    js.type = 'text/javascript'; 
    document.body.appendChild(js); 
} 

}); 


function getUrlVars(pin_URL) 
{ 
    var vars = [], hash; 
    var hashes = pin_URL.slice(pin_URL.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

Answer 12

il mezzo ufficiale per fare questo è impostando l'attributo "data-pin-build" durante il caricamento dello script:

<script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script> 

Quindi è possibile rendere i pulsanti in modo dinamico in questo modo:

// render buttons inside a scoped DOM element 
window.parsePins(buttonDomElement); 

// render the whole page 
window.parsePins(); 

C'è anche un altro metodo su questo sito che ti permette di render them in JavaScript without the script tag.