Comment puis-je rerender bouton Pin It de Pinterest?

Question

Je suis en train de créer et de manipuler le bouton Pin après chargement de la page. Quand je change les propriétés du bouton avec js, il devrait être d'obtenir la nouveau rendu de fonctionnalité épingler des images chargées dynamiquement. Alors, ne Pinterest a une méthode comme la fonction B.XFBML.parse () Facebook?

Merci ...

Answer 1

Il suffit d'ajouter l'attribut data-pin-build à la balise SCRIPT:

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

qui provoque pinit.js d'exposer sa fonction build interne à l'objet global de window en fonction de parsePinBtns.

Ensuite, vous pouvez l'utiliser pour analyser les liens dans l'élément implicite ou tous les liens sur la page:

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

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

Conseil:. pour afficher le nombre zéro il suffit d'ajouter data-pin-zero="1" tag à SCRIPT

Answer 2

La meilleure façon de le faire:

1. Retirez le iframe du bouton Pin It vous voulez manipuler
2. Append le code html pour le nouveau bouton manipuler comme vous le souhaitez

3. Realod leur script - à savoir en utilisant jQuery:

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

Answer 3

Pour rendre une pin-il bouton après une page chargée, vous pouvez utiliser:

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

En supposant bien sûr le assets.pinterest.com/js/pinit.js est déjà chargée sur la page. Le rendu de l'objet a d'autres méthodes utiles comme buttonBookmark , buttonFollow , ebmedBoard , embedPin , embedUser .

Answer 4

Je construit sur la solution de Derrek (et numéro de variable non déclarée fixe) pour permettre de charger dynamiquement le bouton pinterest, donc il ne peut pas ralentir éventuellement les temps de charge. Qu'indirectement liée à la question initiale, mais je pensais que je partage en tout cas.

à la fin du document:

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

dans le document fonction prêt:

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

dans votre document où vous voulez que le bouton pinterest apparaisse, il suffit d'ajouter un élément avec l'id pinterestOption, i.e..

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

espoir qui aide quelqu'un!

Answer 5

Voici ce que je faisais.

D'abord, je regardais pinit.js, et a déterminé qu'il remplace les balises d'ancrage spécialement marqués IFRAME. Je me suis dit que je pouvais écrire une logique javascript pour obtenir le nom d'hôte utilisé par l'attribut src sur les iframes générés.

Alors, j'inséré le balisage selon les recommandations normales par pinterest, mais je mets la balise d'ancrage dans 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>

Puis, immédiatement après, j'inséré un script pour slurp le nom d'hôte du CDN pinterest, de l'iframe injecté.

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

Alors,

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

Et utilisez-le de jQuery comme ceci:

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

Answer 6

Je réécrit le code du bouton Pinterest pour soutenir l'analyse syntaxique des balises Pinterest après chargement du contenu AJAX, similaire à FB.XFBML.parse () ou gapi.plusone.go (). En prime, un fichier JavaScript autre dans le projet prend en charge une syntaxe HTML5 valide.

Consultez la PinterestPlus projet sur GitHub.

Answer 7

Voici ce que je l'ai fait .. Une légère modification sur @Derrick Grigg pour le faire fonctionner sur plusieurs boutons sur la page pinterest après un rechargement 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

Essayez de lire ce post http://dgrigg.com/blog / 2012/04/04 / dynamique pinterest bouton / il utilise un peu javascript pour remplacer le pinterest iframe avec un nouveau bouton et le fichier recharge de pinit.js. Ci-dessous le javascript pour faire l'affaire

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

pinit.js , référencé dans leur "bouton Pin It" docs , ne met pas en globals. Il fonctionne une fois et ne laisse pas de trace autre que l'iframe crée.

Vous pourriez injecter ce fichier à nouveau à de nouveaux boutons « parse ». Leurs JS Examine tous les balises d'ancrage lorsqu'il est exécuté et remplace tous les avec class="pin-it-button" avec leur bouton iframe'd.

Answer 10

La façon officielle de le faire est en définissant l'attribut « data-pin-build » lors du chargement du script:

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

Ensuite, vous pouvez rendre vos boutons dynamiquement comme ceci:

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

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

Il y a aussi une autre méthode sur ce site qui vous permet de RENDENT en JavaScript sans balise de script .

Answer 11

cela fonctionne bien pour moi: http://www.mediadevelopment.no/projects/pinit/ Il ramasse toutes les données sur événement click

Answer 12

J'ai essayé d'adapter leur code pour la même manière (baisse, et oublier), avec l'ajout que vous pouvez faire pour avoir des boutons « nouveaux » sur la page un appel à Pinterest.init () ( par exemple. ajax'd dans, créé dynamiquement, etc.) transformé en le bouton approprié.

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