如何在 Blogger 上为 Pinterest 创建直接“pin-it”链接？答案

【问题标题】：How to create a direct 'pin-it' link for Pinterest on Blogger?如何在 Blogger 上为 Pinterest 创建直接“pin-it”链接？
【发布时间】：2015-11-12 06:50:55
【问题描述】：

我正在尝试在我的博客上添加一个 Pinterest 的“分享”按钮，就像 Facebook 或 Twitter 分享按钮一样，现在您通常可以在大多数博文的后页脚中找到该按钮。

我做了一些研究，发现了以下代码：

<a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'>Share to Pinterest</a>

这是 Pinterest 的非官方“分享按钮”。目前可以在我的博客上看到它。

它非常适合我的博客，因为我可以选择一个自定义/自行设计的社交媒体图标来配合此代码，以便共享按钮的整体外观与我博客的其余部分设计完美契合。

我在这段代码中遇到的问题是，“分享按钮”不会自动选择所述博文的第一张图片，而是让读者可以在整个可用的所有图片中进行选择博客，其中包括社交媒体图标本身。我想要一个分享按钮，它会自动选择博文的第一张图片，并将图片打开到读者的 Pinterest 帐户中，以便他们添加标题和/或 Pin-It。

我已多次尝试更改编码以适应我的喜好，但无济于事。

【问题讨论】：

标签： javascript html

【解决方案1】：

在 Pinterest 的开发者页面 here 上有一个资源。基本上，Pinterest 提供的代码允许您指定 URL、图像和描述以供用户固定。

这是您将包含在 html 中的代码：

<a href="https://www.pinterest.com/pin/create/button/
    ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
    &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
    &description=Next%20stop%3A%20Pinterest"
    data-pin-do="buttonPin"
    data-pin-config="above">
    <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>

在结束正文标记之前的行中包含此内容：

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

【讨论】：