javascript - 我网站的 Pinterest 按钮 - 我真的也需要他们的 Javascript 吗？

Question

我正在将 Pinterest PinIt 按钮添加到我网上商店的产品中。这就是 Pinterest 希望我这样做的方式：

http://business.pinterest.com/widget-builder/#do_pin_it_button

我已经成功地为页面上的所有产品实现了按钮，并且工作正常。关于他们要我添加的脚本，我真的需要吗？它是干什么用的？不包括它可以吗？我想知道，因为它似乎干扰了我正在做的一些 AJAX 提交（不知道为什么），并且按钮似乎在没有脚本的情况下工作正常。

Answer 1

加载的 JavaScriptpinit.js构建了五个不同的小部件，而不仅仅是 Pin It 按钮。如果它干扰 AJAX 提交，请在页面底部检查它是否只加载一次。（我是代码的作者，很想了解更多关于我们如何破坏您的页面的信息；有没有我可以查看的 URL？）

接受的答案使用的代码可能不起作用，因为第二个和第三个参数（媒体和描述）之间的与号已转换为 HTML 实体。

一旦 & 号被修复，接受答案中的代码将导致 Pin It 弹出窗口出现在主浏览器窗口中，这很丑陋，并且会将用户从您的页面中拉开，这确实不是您想要的。Pinterest 用户知道弹出窗口应该是什么样子，并且如果它是错误的，他们往往不会固定。

要复制 Pinterest 体验，您应该添加以下内联 JavaScript：

onclick="window.open(this.href, '_pinIt', 'status=no,resizable=yes,scrollbars=yes,personalbar=no,directories=no,location=no,toolbar=no,menubar=no,width=632,height=270,left=0,top=0');return false;" 

我强烈建议您不要手动删减您的网址；它们很脆，几乎肯定最终会破裂。如果您想要一些更具前瞻性的东西，您可以尝试使用 JavaScript 触发 Pinterest 小书签代码，就像我们的工具栏小书签一样。看起来像这样：

<a style="cursor:pointer;" onclick="var d=document;var e=d.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','utf-8');e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);d.body.appendChild(e);"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

重要提示：由于使用与方案无关的 URL，如果您通过将 HTML 拖到浏览器中进行测试pinit.js，它会尝试查找下面的内容。file://确保您在服务器上运行它。

Answer 2

不，我只有一个链接 - 工作正常。

<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fproduct%3Fmodel%3DEQEA&amp;media=http%3A%2F%2Fwww.example.com%2Fimg_c%2F14ngton%2Fdesign%2F232.jpg&amp;description=Dack+Earth" class="pin-it-button" count-layout="horizontal" target="_blank">
    <img src="http://example.com/images/pin_icon.png" title="Pin It">
</a>

如果您还希望计数器出现在每个按钮旁边，则只需要该脚本。