Как я могу перерисовать кнопку Pinterest Pin It?

Я использовал решение Деррека (и исправил проблему с необъявленными переменными), чтобы сделать возможной динамическую загрузку кнопки pinterest, чтобы она не могла замедлить время загрузки. Только косвенно связано с исходным вопросом, но я все равно решил поделиться.

в конце документа:

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

в функции готовности документа:

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

в вашем документе, где вы хотите, чтобы кнопка pinterest отображалась, просто добавьте элемент с идентификатором pinterestOption, т.е.

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

надеюсь, что это поможет кому-то!

Вот что я сделал.

Сначала я посмотрел на pinit.js и определил, что он заменяет специально помеченные теги привязки на IFRAME. Я подумал, что могу написать логику javascript, чтобы получить имя хоста, используемое атрибутом src в сгенерированных фреймах.

Итак, я вставил разметку по обычным рекомендациям pinterest, но якорный тег поместил в невидимый 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>

Затем, сразу после этого, я вставил скрипт, чтобы получить имя хоста для CDN pinterest из внедренного iframe.

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

Потом,

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

А затем используйте его из jQuery следующим образом:

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

Я переписал код кнопки Pinterest для поддержки синтаксического анализа тегов Pinterest после загрузки содержимого AJAX, аналогично FB.XFBML.parse() или gapi.plusone.go(). В качестве бонуса альтернативный файл JavaScript в проекте поддерживает допустимый синтаксис HTML5.

Ознакомьтесь с проектом PinterestPlus на GitHub.

Вот что я сделал. Небольшая модификация @Derrick Grigg, чтобы заставить его работать с несколькими кнопками pinterest на странице после перезагрузки 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;
}

Попробуйте прочитать этот пост http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/ он использует небольшой javascript, чтобы заменить iframe pinterest новой кнопкой, а затем перезагружает файл pinit.js. Ниже приведен javascript, чтобы сделать трюк

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

Официальный способ сделать это — установить атрибут «data-pin-build» при загрузке скрипта:

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

Затем вы можете динамически отображать свои кнопки следующим образом:

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

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

На этом сайте также есть другой метод, который позволяет вам рендерить их в JavaScript без тега script< /а>.

Их файл pinit.js, ссылка на который содержится в их документация кнопки "Закрепить", не предоставляет никаких глобальных переменных. Он запускается один раз и не оставляет следов, кроме создаваемого iframe.

Вы можете снова ввести этот файл, чтобы «разобрать» новые кнопки. Их JS просматривает все теги привязки при запуске и заменяет их на class="pin-it-button" с помощью кнопки iframe.

у меня это отлично работает: http://www.mediadevelopment.no/projects/pinit/ Он собирает все данные о событии клика

Я попытался адаптировать их код, чтобы он работал таким же образом (зашел и забыл об этом), с добавлением того, что вы можете сделать вызов Pinterest.init(), чтобы иметь любые «новые» кнопки на странице (например, ajax добавлено, создано динамически и т. д.) превратилось в правильную кнопку.

Проект: https://github.com/onassar/JS-Pinterest Сырье: https://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js

По состоянию на июнь 2020 года Pinterest обновил пин-код js до версии 2. Вот почему сборка данных может не работать на <script defer="defer" src="//assets.pinterest.com/js/pinit.js" data-pin-build="parsePins"></script>

Теперь работает на pinit_v2.js <script async defer src="//assets.pinterest.com/js/pinit_v2.js" data-pin-build="parsePins"></script>