Come posso rinfrescare il pulsante Pin It 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 eseguita per ottenere la funzionalità di pinning di immagini caricate dinamicamente. Quindi, Pinterest ha qualche metodo come la funzione b.xfbml.parse () di Facebook?

Grazie...

Answer 1

Basta aggiungere data-pin-build attributo a SCRIPT etichetta:

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

Che causa pinit.js per esporre il suo interno build funzione al globale window oggetto come parsePinBtns funzione.

Quindi, puoi usarlo per analizzare i collegamenti nell'elemento implicito o tutti i collegamenti 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 il conteggio zero basta aggiungere data-pin-zero="1" a SCRIPT etichetta.

Answer 2

Il modo migliore per farlo:

1. Rimuovi il pulsante iframe del pin che si desidera manipolare
2. Aggiungi l'HTML per il nuovo pulsante che lo manipola come desideri

3. Realizzare la loro sceneggiatura - cioè usando jQuery:

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

Answer 3

Per rendere un pulsante pin-it dopo la carica di una pagina è 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>

Supponendo ovviamente il Assets.pinterest.com/js/pinit.js è già caricato sulla pagina. L'oggetto render ha alcuni altri metodi utili come BOCKSBOOKMARK, Buttonfollow, ebmedboard, incorporare, incorporamento.

Answer 4

Ho costruito sulla soluzione di Derrek (e risolto il problema variabile non dichiarato) per consentire di caricare dinamicamente il pulsante Pinterest, quindi non può eventualmente rallentare i tempi di caricamento. Solo tangenzialmente correlato 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>

Nella funzione pronta per documenti:

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

Nel tuo documento in cui si desidera visualizzare il pulsante Pinterest, basta aggiungere un elemento con ID Pinterestoption, cioè

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

Spero che questo aiuti qualcuno!

Answer 5

Ecco cosa ho fatto.

Per prima cosa ho guardato Pinit.js e ho determinato che sostituisce tag di ancoraggio appositamente segnati con iFrames. Ho pensato che avrei potuto scrivere JavaScript Logic per ottenere il nome host usato dall'attributo SRC sugli iframe generati.

Quindi, ho inserito il markup secondo le normali raccomandazioni di Pinterest, ma ho messo 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>

Quindi, immediatamente dopo, ho inserito uno script per bloccare il nome host per Pinterest CDN, dall'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));

Quindi,

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 usalo da jQuery in questo modo:

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

Answer 6

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

Dai un'occhiata al Progetto Pinterestplus su GitHub.

Answer 7

Ecco cosa ho fatto .. una leggera modifica su @Derrick Grigg per farlo funzionare su più pulsanti Pinterest sulla pagina dopo una ricarica di 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 8

Prova a leggere questo post http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ Utilizza un piccolo JavaScript per sostituire Pinterest iFrame 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 9

I loro pinit.js file, referenziato nel loro Pulsante "Pin it", non espone alcun globale. Funziona una volta e non lascia una traccia diversa dall'iframe che crea.

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

Answer 10

Il modo ufficiale di farlo è impostando l'attributo "Data-Pin-Build" quando si carica lo script:

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

Quindi puoi rendere i tuoi pulsanti in modo dinamico così: così:

// 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 consente renderli in javascript senza il tag script.

Answer 11

Questo funziona bene per me: http://www.mediadevelopment.no/projects/pinit/ Raccoglie tutti i dati sull'evento Click

Answer 12

Ho provato ad adattare il loro codice per funzionare allo stesso modo (entrare e dimenticarlo), con l'aggiunta che puoi fare una chiamata a pinterest.init () per avere qualche pulsante "nuovi" sulla pagina (ad es. Ajax 'd in, creato in modo dinamico, ecc.) trasformato nel pulsante corretto.

Progetto: https://github.com/onassar/js-pinterestCrudo: https://raw.github.com/onassar/js-pinterest/master/pinterest.js