Question

在我的网站上，我按以下方式生成Pinterest“pin”按钮：

<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fblog%2Fphotography-website-redesign%2F&description=Photography+Website+Redesign" onclick="__gaTracker('send', 'event', 'outbound-article', 'https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fblog%2Fphotography-website-redesign%2F&amp;description=Photography+Website+Redesign', '');" data-pin-do="buttonPin" data-pin-count="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

在head中加载以下脚本：

<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

问题：
在这种情况下（以及其他一些类似的），点击它时错误地提供了Pin这个网址： https://example.com/blog/st-louis-aiga-website-interactive-chair/

附加说明：
1.并非所有博客条目都有这种不正确的行为。许多其他帖子“固定”到正确的条目。
2.使用Pinterest对网站进行验证 这个网站有一些htaccess重定向，我认为可能会导致问题。我已经调整/测试过，并且不相信它们是一个因素，但值得一提的是：它将“/ blog /”url重定向到其中没有“/ blog /”。此外，它重定向到强制https和非www。例如：
HTTP：WWW .// example.com/blog/st-louis-aiga-website-interactive-chair/
将重定向到
https://example.com/st-louis-aiga-website-interactive-chair/

更新
问题仍然存在，但我在这里审查开发人员代码时花费了大量时间尝试不同的选项。

而且，事实证明，即使图像正确，说明也是错误的。

有任何提示/建议吗？

编辑/更新1：
根据Per @ Paolo的回答，我实际上尝试了不同的格式，但结果相同。

以下是不同格式的引脚，它会产生相同的结果：

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonPin"
    data-pin-media="https%3A%2F%2Fexample.com%2Fwp-content%2Fuploads%2Fhip-photography-web-design.jpg"
    data-pin-url="https%3A%2F%2Fexample.com%2Fphotography-website-redesign%2F"
    data-pin-description="Photography+Website+Redesign"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

请注意我想知道URL编码是否会导致问题，所以我在没有网址编码的情况下尝试了它，行为也不同，但结果是正确的。

编辑/更新2：
我决定尝试使用buttonBookmark，我在某些图像上看到的错误行为。

它可以正确获取所有图像，但某些图像的描述是正确的，某些图像的描述不正确。

这是pin（带有匿名URL）：

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonBookmark"
    data-pin-url="http://www.example.com/blog/photography-website-redesign"
    data-pin-description="Photography Website Redesign"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

我也尝试过使用完全相同的混合错误描述的这个引脚：

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonBookmark"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

Answer 1

作为第一个建议，我会查看Pinterest的文档：

https://developers.pinterest.com/docs/widgets/save/

如果您data-pin-do="buttonPin"，则需要使用media属性指定图片网址。您的代码中缺少。

此外，我会使用属性指定url和description。在我看来，您的代码中没有错误，但我的方法肯定会阻止URL编码错误。

最后，我会指定直接指向页面/图片/资源而不重定向的网址。

总结一下：

<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonPin"
data-pin-media="the-url-of-the-image-here"
data-pin-url="https://www.example.com/photography-website-redesign/"
data-pin-description="Photography Website Redesign"
data-pin-count="beside">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

为了便于阅读，我故意删除了Google Analytics onclick脚本。

我希望这会有所帮助。

编辑：（1）

一方面注意：Pinterest 可能缓存数据（网址，说明等），即使您的网页代码修复后也会显示不良行为。在修复代码后，我建议在新页面上测试正确的行为。

编辑：（2）

（1） AFAIK属性应不进行网址编码。

所以data-pin-url="http://www.example.com/blog/photography-website-redesign"很好。

（2）我会坚持使用data-pin-do="buttonPin"小部件，因为它可以让您指定图像。此外，随着事情的解决，任何小部件都应该正常工作。

（3）脚本加载代码应放在</body>结束标记之前，并具有defer选项：

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

（4）再试一次原始＆＃34;无属性＆＃34;代码的版本，带有附加到URL的参数的代码。

但是这次编码参数的方式不同，就像你在Pinterest的文档示例中看到的一样（参见答案顶部的链接）

我已在网址中插入可读性换行符，但应省略它们

<a data-pin-do="buttonPin"
href="https://www.pinterest.com/pin/create/button/
?url=https://www.example.com/photography-website-redesign/&
&media=https://www.example.com/your-image-url-goes-here.jpg&
description=Photography%20Website%20Redesign"
></a>

基本上在网址参数中，您只会转换＆符号，空格%20和双引号。

Pinterest按钮链接到错误的内容

1 个答案: