9

有没有办法创建一个动态的 Pinterest 按钮？我正在尝试将 Pinterest 支持添加到主要内容是动态的网站，因此我将在页面源中只有一个 Pin It 按钮来固定当前内容。

我想不出使用预建的 Pin It 按钮的方法，因为它要求您提前指定硬编码的 URL。

但是，还有一个 Pin It 小书签可以达到我想要的效果——但这需要用户手动将其添加到他们的书签栏。

有什么方法可以（a）修改 Pin It 按钮，或者（b）以某种方式将小书签集成到我的页面中，这样它就可以固定当前页面的任何内容？

4

7 回答 7

17

对于任何感兴趣的人，这就是我所做的：

HTML：

<a href="#" id="pinit">Pin It</a>

JS：

$(document).ready(function(){
    $("#pinit").click(function(){
        $("#pinmarklet").remove();
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('id','pinmarklet');
        e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
    });
});

通常，当您单击浏览器书签栏中的 Pin It 小书签时，它会动态插入一个脚本pinmarklet.js（

我对此进行了修改，以便在单击链接时插入脚本（#pinit）。我还在id脚本中添加了一个#pinmarklet（$("#pinmarklet").remove();

无论如何，最终效果是您正在做与小书签相同的事情，只是在页面内。因此，它以相同的方式工作并提取当前页面内容，这意味着您可以动态更改其他内容，并且它将被同一个“Pin It”链接拾取。

于 2012-06-21T13:50:47.403 回答
1

Pinterest 的动态链接

下面的代码将为不同的页面生成动态 pinterest 按钮。

<a href="http://pinterest.com/pin/create/button/?url=http://www.printe-z.com/booked-forms.html&amp;media=http://www.printe-z.com/image/cache/data/newImages/business_forms_Booked-200x120.jpg&amp;description=description will come here" class="pin-it-button" count-layout="none">
 <img src="http://assets.pinterest.com/images/PinExt.png" data-cfsrc="//assets.pinterest.com/images/PinExt.png" title="Pin It" border="0">
</a>
于 2013-08-30T09:26:42.417 回答
0

我在 GitHub 上构建了一个改进的 Pinterest 按钮，它支持 HTML5 有效的语法。

使用此解决方案的方式取决于您的站点是在服务器端（使用 PHP 或其他一些后端语言）还是通过 JavaScript 和 AJAX 方法在客户端动态填充页面。

对于服务器端，您将生成 HTML5并在模板中填写<div>其属性，然后在.data-*pinterest-plus-html5.min.js<script><body>

对于客户端，您需要加载pinterest-plus-html5.min.js文件，或者使用<script>标签中的标签<head>或通过异步加载，如文档中所述。接下来，您将使用 JavaScript 生成 HTML5 <div>，在页面上动态插入或替换 Pinterest 按钮标签，然后调用PinterestPlus.pinit()将其转换<div>为 Pinterest 按钮<iframe>。

我希望这有帮助！

于 2012-06-26T16:32:20.137 回答
0

一个简单的服务器端解决方案可能比客户端更好。 代码在这里（PHP、WordPress 或 ASP）

于 2013-01-17T11:57:28.983 回答
0

pintrest 按钮的引脚由按钮的 href 中的参数控制。

于 2013-05-17T04:29:06.210 回答
0

Pinterest 为构建动态按钮提供了“构建”功能。这意味着您可以动态生成 Pinterest 锚点并使用此函数将其转换为 Pinterest 按钮，就像 pinit.js 在加载时所做的那样。

这里解释了如何指定函数的名称：http: //porizi.wordpress.com/2013/11/07/dynamic-pinterest-button/

于 2013-11-11T12:27:29.833 回答
0

我有一个带有全屏画廊的页面，页面底部只有一个pinterest按钮，我最终在此页面中寻找解决方案。没有成功，我想出了这个：

var imgurl = player.children(".gallery-image").eq(next).css("background-image").match(/\((.+)\)/)[1];
$(".pintrest-container > a").attr("data-pin-href", "//www.pinterest.com/pin/create/button/?url=http://mywebsite.com/&media=" + imgurl + "&description=My Website");

正则表达式/\((.+)\)/对于解析背景属性中的图像 url 很有用，因为它的格式是url('image.jpg')，所以正则表达式删除了url('')并且只给出了路径。

然后我只是用我的新图像设置属性data-pin-href，效果很好！

于 2014-09-11T15:43:44.463 回答