¿Cómo puedo rerender el botón Pinterest Pin It?

Question

Estoy tratando de crear y manipular el botón PIN IT después de la carga de la página. Cuando cambio las propiedades del botón con JS, debe volver a reproducirse para obtener la funcionalidad de fijar imágenes cargadas dinámicamente. Entonces, ¿Pinterest tiene algún método como la función B.XFBML.Parse () de Facebook?

Gracias...

Answer 1

Solo agrega data-pin-build atributo al SCRIPT etiqueta:

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

Que causa pinit.js para exponer su interno build función a lo global window objetar como parsePinBtns función.

Luego, puede usarlo para analizar los enlaces en el elemento implícito o en todos los enlaces en la página:

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

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

Insinuación: Para mostrar el recuento cero solo agregar data-pin-zero="1" a SCRIPT etiqueta.

Answer 2

La mejor manera de hacer esto:

1. Elimine el iframe del botón pin it que desea manipular
2. Agregue el HTML para el nuevo botón que lo manipula como lo desee como desee

3. Realod su guión, es decir, usando jQuery:

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

Answer 3

Para representar un botón PIN-IT después de que se haya cargado una página, puede usar:

<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>

Asumiendo, por supuesto, el assets.pinterest.com/js/pinit.js ya está cargado en la página. El objeto Render tiene algunos otros métodos útiles como Buttonbookmark, avance, tabla de ebmed, incrustación, incrustante.

Answer 4

Construí sobre la solución de Derrek (y solucionó el problema de la variable no declarada) para que sea posible cargar dinámicamente el botón Pinterest, por lo que no puede ralentizar los tiempos de carga. Solo se relacionó tangencialmente con la pregunta original, pero pensé en compartir de todos modos.

Al final 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>

en la función de documento listo:

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

En su documento donde desea que aparezca el botón Pinterest, simplemente agregue un elemento con la identificación de PinterestOption, es decir

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

¡Espero que eso ayude a alguien!

Answer 5

Esto es lo que hice.

Primero miré Pinit.js y determiné que reemplaza etiquetas de anclaje especialmente marcadas con iframes. Pensé que podría escribir JavaScript Logic para obtener el nombre de host utilizado por el atributo SRC en los iframes generados.

Entonces, inserté el marcado de acuerdo con las recomendaciones normales de Pinterest, pero puse la etiqueta de anclaje en una div.

<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>

Luego, inmediatamente después de eso, inserté un script para sorber el nombre de host para el Pinterest CDN, del iframe inyectado.

//
// 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));

Después,

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;
}

Y luego úsalo de jQuery como este:

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

Answer 6

Reescribo el código del botón Pinterest para admitir el análisis de las etiquetas Pinterest después de cargar contenido de Ajax, similar a fb.xfbml.parse () o gapi.plusone.go (). Como beneficio adicional, un archivo JavaScript alternativo en el proyecto admite una sintaxis HTML5-Válido.

Revisar la Proyecto PinterestPlus en GitHub.

Answer 7

Esto es lo que hice ... una ligera modificación en @Derrick Grigg para que funcione en múltiples botones de Pinterest en la página después de una recarga de 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

Intenta leer esta publicación http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ Utiliza un pequeño JavaScript para reemplazar el pinterest iframe con un botón nuevo y luego vuelve a cargar el archivo pinit.js. A continuación se muestra el JavaScript para hacer el truco

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

Sus Pinit.js archivo, referenciado en su Documentos del botón "Pin it", no expone ningún globals. Se ejecuta una vez y no deja un rastro que no sea el iframe que crea.

Podría inyectar ese archivo nuevamente para "analizar" nuevos botones. Su JS mira todas las etiquetas de anclaje cuando se ejecuta y reemplaza las class="pin-it-button" con su botón iframe'd.

Answer 10

La forma oficial de hacerlo es establecer el atributo "Data-Pin-Build" al cargar el script:

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

Entonces puedes renderizar tus botones dinámicamente así:

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

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

También hay otro método en este sitio que le permite Renderalos en JavaScript sin la etiqueta de script.

Answer 11

Esto funciona bien para mi: http://www.mediadevelopment.no/projects/pinit/ Recoge todos los datos en el evento de clic

Answer 12

Traté de adaptar su código a funcionar de la misma manera (presione y olvidélo), con la adición de que puede hacer una llamada a pinterest.init () para tener cualquier botón "nuevo" en la página (por ejemplo, AJAX 'D in, creado dinámicamente, etc.) se convirtió en el botón adecuado.

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