Javascript 使用自定义Pinterest“Pin It”按钮显示post功能图像？

我正在尝试为Pinterest使用一个定制的pinit按钮，该按钮出现在每篇文章上，并从该文章的特色图片中提取

到目前为止，我已经有了这个脚本，它成功地提取了文章的特征图像，并将其显示在弹出窗口中：

 <script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

下面是我在single.php中使用的代码：

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a  href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>

我不知道如何将pinit按钮更改为我自己的自定义按钮；每次我尝试时，我的按钮都会被覆盖

---

我希望这能很好地解释这一点。我对php和javascript还是很陌生。感谢您提供的帮助。

有各种各样的WordPress插件，可以在每篇文章上放置Pinterest按钮和其他社交分享按钮。如果您想在特色图片上使用Pinterest按钮悬停效果，而不是在每篇文章的底部显示Pinterest按钮。您可以指定在元数据中固定哪个图像，您可以指定在元数据中为所有主要社交网络共享哪个图像

我已经好几个月没有弄乱我的博客了，但我如何使用我的社交分享按钮，以及如何在谷歌分析中跟踪这些按钮是个难题

如果您想了解更多有关结构元数据的信息，可以使用。我收集了更多的链接时

由于您使用的是WordPress，而不是将社交共享按钮添加到已有数十年历史的静态HTML中，所以您应该真正研究插件。我的博客绝对不是WordPress的最佳实践，但它很古老，我看到很多插件来来去去去，这些都是我目前使用的插件，包括用于帮助进行结构化元数据和社交共享的插件。最后我在我的主题中也做了一些定制的东西，因为我想要完美的东西

---

祝你好运

我也试着这么做，并在以前的堆栈溢出线程中找到了解决方案。我使用了courtsimas的答案，效果很好

我还发现了一些自定义选项，您可以使用不同的内置按钮选项生成源代码，并将其合并到您自己的代码中

我目前正在运行一个圆形按钮的基于widget builder的选项，我对它很满意

标记