javascript - plugin - ¿Cómo puedo reenviar el botón Pin It de Pinterest?

share on pinterest html code

Question

Estoy tratando de crear y manipular el botón Pin It después de cargar la página. Cuando cambio las propiedades del botón con js, se debe volver a enviar para obtener la funcionalidad de anclar imágenes cargadas dinámicamente. Entonces, ¿Pinterest tiene algún método como la función B.XFBML.parse () de Facebook?

Gracias...

Answer 1

Construí sobre la solución de Derrek (y solucioné el problema de la variable no declarada) para hacer posible cargar dinámicamente el botón pinterest, por lo que no es posible que ralentice los tiempos de carga. Sólo tangencialmente relacionado con la pregunta original, pero pensé que lo compartiría 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 el documento donde desea que aparezca el botón pinterest, simplemente agregue un elemento con el id pinterestOption, es decir,

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

Espero que ayude a alguien!

Answer 2

Esto es lo que hice.

Primero miré a pinit.js y determiné que reemplaza las etiquetas de anclaje especialmente marcadas con IFRAME. Pensé que podría escribir la lógica javascript para obtener el nombre de host utilizado por el atributo src en los iframes generados.

Entonces, inserté el marcado según las recomendaciones normales de pinterest, pero puse la etiqueta de anclaje en un div invisible.

<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 absorber el nombre de host para el CDN pinterest, desde el 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));

Entonces,

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 así:

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

Answer 3

Esto es lo que hice. Una pequeña modificación en @Derrick Grigg para que funcione en varios botones de interés 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 4

Intenta leer esta publicación http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ usa un pequeño javascript para reemplazar el iframe pinterest con un nuevo botón 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 5

La forma oficial de hacerlo es estableciendo el atributo "data-pin-build" al cargar el script:

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

Luego 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 renderizarlos en JavaScript sin la etiqueta de script .

Answer 6

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 manipulándolo 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 7

Para representar un botón pin-it después de que una página se haya cargado, puede utilizar:

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

Suponiendo que, por supuesto, el asset.pinterest.com/js/pinit.js ya está cargado en la página. El objeto de renderizado tiene algunos otros métodos útiles como buttonBookmark , buttonFollow , ebmedBoard , embedPin , embedUser .

Answer 8

Reescribí el código del botón de Pinterest para admitir el análisis de las etiquetas de Pinterest después de cargar contenido AJAX, similar a FB.XFBML.parse () o gapi.plusone.go (). Como beneficio adicional, un archivo JavaScript alternativo en el proyecto admite una sintaxis válida para HTML5.

Echa un vistazo al proyecto PinterestPlus en GitHub.

Answer 9

Su archivo pinit.js , al que se hace referencia en sus documentos del botón "Pin it" , no expone ninguna pinit.js . Se ejecuta una vez y no deja un rastro que no sea el iframe que crea.

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

Answer 10

Traté de adaptar su código para que funcione de la misma manera (ingrese y olvídese de él), 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 ''en, creado dinámicamente, etc.) se convirtió en el botón adecuado.

Proyecto: https://github.com/onassar/JS-Pinterest Raw: https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js

Answer 11

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

Answer 12

Solo agrega el atributo data-pin-build a la etiqueta SCRIPT :

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

Eso hace que pinit.js exponga su función de build interna al objeto de window global como función parsePinBtns .

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

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

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

Sugerencia: para mostrar el conteo de cero, simplemente agregue data-pin-zero="1" a la etiqueta SCRIPT .