23

我正在尝试在页面加载后创建和操作 Pin It 按钮。当我用 js 更改按钮属性时，应该重新渲染它以获得固定动态加载图像的功能。那么，Pinterest 有没有类似 Facebook 的 B.XFBML.parse() 函数的方法？

谢谢...

4

13 回答 13

47

只需将data-pin-build属性添加到SCRIPT标签：

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

这导致pinit.js将其内部build函数作为函数暴露给全局window对象parsePinBtns。

然后，您可以使用它来解析隐式元素中的链接或页面上的所有链接：

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

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

提示：显示零计数只需添加data-pin-zero="1"到SCRIPT标签。

于 2014-01-06T13:37:00.757 回答
14

最好的方法是：

  1. 删除您要操作的 Pin It 按钮的 iframe
  2. 为新按钮附加 html 以根据需要进行操作

  3. 重新编写他们的脚本 - 即使用 jQuery：

    $.ajax({ url: 'http://assets.pinterest.com/js/pinit.js', dataType: 'script', cache:true});
于 2012-02-23T18:03:13.263 回答
9

要在页面加载后呈现 pin-it 按钮，您可以使用：

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

当然，假设assets.pinterest.com/js/pinit.js已经加载到页面上。渲染对象还有一些其他有用的方法，如buttonBookmark、buttonFollow、ebmedBoard、embedPin、embedUser。

于 2012-11-17T20:38:48.163 回答
4

我以 Derrek 的解决方案（并修复了未声明的变量问题）为基础，使动态加载 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 按钮出现的文档中，只需添加一个 id 为 pinterestOption 的元素，即

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

希望对某人有所帮助！

于 2012-05-14T08:58:45.180 回答
3

这就是我所做的。

首先，我查看了 pinit.js，并确定它用 IFRAME 替换了特殊标记的锚标记。我想我可以编写 javascript 逻辑来获取生成的 iframe 上的 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>

然后，紧接着，我插入了一个脚本，从注入的 iframe 中获取 pinterest CDN 的主机名。

//
// 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);
于 2012-03-21T17:31:41.530 回答
3

我重写了 Pinterest 按钮代码以支持在加载 AJAX 内容后解析 Pinterest 标签，类似于 FB.XFBML.parse() 或 gapi.plusone.go()。作为奖励，项目中的备用 JavaScript 文件支持 HTML5 有效的语法。

查看GitHub 上的 PinterestPlus 项目。

于 2012-06-21T19:03:42.210 回答
2

尝试阅读这篇文章http://dgrigg.com/blog/2012/04/04/dynamic-pinterest-button/它使用一点 javascript 将 pinterest iframe 替换为新按钮，然后重新加载 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);
}
于 2012-04-04T20:28:14.000 回答
2

这是我所做的.. 对@Derrick Grigg 稍作修改，使其在 AJAX 重新加载后可以在页面上的多个 pinterest 按钮上工作。

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;
}
于 2013-04-18T14:47:49.123 回答
2

官方的做法是在加载脚本时设置“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 中呈现它们。

于 2014-03-17T00:01:43.757 回答
1

他们的pinit.js文件，在他们的“Pin it”按钮文档中引用，没有公开任何全局变量。它运行一次，除了它创建的 iframe 之外不会留下任何痕迹。

您可以再次注入该文件以“解析”新按钮。class="pin-it-button"他们的 JS 在运行时会查看所有锚标签，并用他们的 iframe 按钮替换这些标签。

于 2012-02-21T05:15:23.890 回答
0

这对我来说很好：http ://www.mediadevelopment.no/projects/pinit/它会收集点击事件的所有数据

于 2012-03-07T20:00:56.830 回答
0

我试图调整他们的代码以同样的方式工作（加入，然后忘记它），此外，您可以调用 Pinterest.init() 以在页面上拥有任何“新”按钮（例如 ajax 'd in，动态创建等）变成了正确的按钮。

项目：https ://github.com/onassar/JS-Pinterest 原始：https ://raw.github.com/onassar/JS-Pinterest/master/Pinterest.js

于 2012-10-12T20:54:14.147 回答
0

截至 2020 年 6 月，Pinterest 将 pin js 代码更新为 v2。这就是为什么 data-pin-build 可能无法正常工作的原因 <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>

于 2020-06-02T03:56:49.790 回答