Wie kann ich Pinterests Pin It -Taste neu erwerben?

Question

Ich versuche die Pin -IT -Schaltfläche nach dem Laden zu erstellen und zu manipulieren. Wenn ich die Schaltflächeneigenschaften mit JS ändere, sollte es neu geschickt werden, um die Funktionalität des Pinnings dynamisch geladenen Bildern zu erhalten. Hat Pinterest also eine Methode wie die b.xfbml.parse () -Funktion von Facebook?

Vielen Dank...

Answer 1

Einfach hinzufügen data-pin-build Attribut auf die SCRIPT Schild:

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

Das verursacht pinit.js Um seine innere zu entlarven build Funktion zur globalen Funktion window Objekt als parsePinBtns Funktion.

Anschließend können Sie es verwenden, um Links im impliziten Element oder alle Links auf der Seite zu analysieren:

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

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

Hinweis: Um keine Anzahl zu zeigen, nur hinzufügen data-pin-zero="1" zu SCRIPT Schild.

Answer 2

Der beste Weg, dies zu tun:

1. Entfernen Sie den Iframe der Pin -IT -Taste, die Sie manipulieren möchten
2. Fügen Sie die HTML für die neue Schaltfläche hinzu, die sie so manipuliert, wie Sie möchten

3. Realod ihr Skript - dh JQuery verwendet:

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

Answer 3

Um eine Pin-IT-Schaltfläche nach dem Laden einer Seite zu rendern, können Sie verwenden:

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

Annahme natürlich die assets.pinterest.com/js/pinit.js ist bereits auf der Seite geladen. Das Renderobjekt hat einige andere nützliche Methoden wie Buttonbookmark, Buttonfollow, Ebmedboard, Einbettung, Einbeduser.

Answer 4

Ich habe die Lösung von DerRek (und das Problem der nicht deklarierten Variablen) aufgebaut, um die Pinterest -Taste dynamisch zu laden, sodass sie möglicherweise nicht die Ladezeiten verlangsamen kann. Nur tangential mit der ursprünglichen Frage verwandt, aber ich dachte, ich würde trotzdem teilen.

Am Ende des Dokuments:

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

In Dokumentbereitfunktion:

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

In Ihrem Dokument, in dem die Pinterest -Taste angezeigt werden soll, fügen Sie einfach ein Element mit der ID -Pinterestoption hinzu, dh

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

Hoffe das hilft jemandem!

Answer 5

Hier ist, was ich getan habe.

Zuerst habe ich mir Pinit.js angesehen und festgestellt, dass es speziell markierte Anker-Tags durch IFrames ersetzt. Ich dachte, ich könnte eine JavaScript -Logik schreiben, um den Hostnamen des SRC -Attributs auf den generierten IFRames zu erhalten.

Also habe ich Markup gemäß den normalen Empfehlungen von Pinterest eingefügt, aber ich stellte das Anker -Tag in eine unsichtbare 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>

Unmittelbar danach habe ich ein Skript eingefügt, um den Hostnamen für das Pinterest -CDN aus dem injizierten Iframe zu schließen.

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

Dann,

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

Und dann verwenden Sie es von jQuery wie folgt:

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

Answer 6

Ich habe den Pinterest -Taste -Code neu geschrieben, um die Analyse von Pinterest -Tags nach dem Laden von AJAX -Inhalten zu unterstützen, ähnlich wie bei FB.xfbml.parse () oder gapi.plusone.go (). Als Bonus unterstützt eine alternative JavaScript-Datei im Projekt eine HTML5-VALID-Syntax.

Probier das aus PinterestPlus -Projekt bei GitHub.

Answer 7

Hier ist, was ich gemacht habe. Eine leichte Änderung auf @derrick Grigg, damit es nach einem Ajax -Nachladen auf mehreren Pinterest -Schaltflächen auf der Seite funktioniert.

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

Versuchen Sie diesen Beitrag zu lesen http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ Es verwendet ein kleines JavaScript, um den Pinterest -Iframe durch eine neue Taste zu ersetzen und dann die Datei Pinit.js neu zu laden. Unten ist das JavaScript, um den Trick zu machen

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

Ihr pinit.js Datei, auf die in ihrem verwiesen wird Taste "Pin it" -Taste docs, Enthüllt keine Globalen. Es läuft einmal und hinterlässt eine andere Spur außer dem Iframe, den es erzeugt.

Sie könnten diese Datei erneut injizieren, um neue Schaltflächen zu "analysieren". Ihr JS sieht sich alle Anker -Tags an, wenn es ausgeführt wird, und ersetzt die durch class="pin-it-button" mit ihrer iframe'd -Taste.

Answer 10

Die offizielle Möglichkeit, dies zu tun, besteht darin, das Attribut "Data-Pin Build" beim Laden des Skripts festzulegen:

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

Dann können Sie Ihre Schaltflächen so dynamisch wie so rendern:

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

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

Auf dieser Website gibt es auch eine andere Methode, mit der Sie es Ihnen ermöglichen können Rendern Sie sie in JavaScript ohne das Skript -Tag.

Answer 11

Das funktioniert gut für mich: http://www.medidevelopment.no/projects/pinit/ Es nimmt alle Daten auf dem Click -Ereignis auf

Answer 12

Ich habe versucht, ihren Code so anzupassen, dass es genauso funktioniert (einstieg und ihn vergisst), mit dem Hinzufügen, dass Sie einen Anruf bei Pinterest.init () tätigen können, um "neue" Schaltflächen auf der Seite zu haben (z. B. Ajax 'D in, dynamisch erstellt usw.) verwandelte sich in die richtige Taste.

Projekt: https://github.com/onassar/js-pinterestRoh: https://raw.github.com/onassar/js-pinterest/master/pinterest.js