javascript - Pinterest 按钮链接到错误的内容

Question

在我的网站上，我通过以下方式生成了一个 Pinterest“图钉”按钮:

<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 这个 url: https://example.com/blog/st-louis-aiga-website-interactive-chair/

附加说明:
1. 并非所有博客条目都有这种不正确的行为。许多其他帖子“固定”到正确的条目。
2. 网站已通过 Pinterest 验证。
3. 这个站点有一些我认为可能导致问题的 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:
根据@Paolo 的回答，我实际上尝试了不同的格式，但结果相同。

这是导致相同结果的不同格式的 pin:

<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编码导致的问题，所以我在没有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>

我也用完全相同的混合错误描述尝试过此 pin:

<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属性。您的代码中缺少。

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

最后，我将指定直接指向页面/图像/资源的 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 可能缓存数据(URL、描述等)并显示不良行为，即使您的网页代码已修复。我建议，在代码修复后，在新页面上测试正确的行为。

---

编辑:(2)

(1) AFAIK 属性应该不进行 URL 编码。

所以 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) 再试一次代码的原始“无属性”版本，该版本将参数附加到 URL。

但是这次对参数进行不同的编码，与您在 Pinterest 的文档示例中看到的编码方式相同(请参阅答案顶部的链接)

我在 URL 中插入了换行符以提高可读性，它们应该被省略

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

基本上，在 URL 参数中，您只转义与号、空格和 %20和双引号。