使用自定义 Pinterest“Pin It”按钮显示帖子特色图片？答案

【问题标题】：Use a custom Pinterest "Pin It" button to display post feature image?使用自定义 Pinterest“Pin It”按钮显示帖子特色图片？
【发布时间】：2014-05-12 10:54:15
【问题描述】：

我正在尝试为 Pinterest 使用自定义“Pin It”按钮，该按钮出现在每个帖子上，并且从该帖子的特色图片中提取。

到目前为止，我有这个脚本可以成功提取帖子的特征图像，并在弹出窗口中显示它：

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

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

我希望这可以很好地解释它。我对 php 和 javascript 还是很陌生。感谢您提供的任何帮助。

【问题讨论】：

标签： javascript php button pinterest

【解决方案1】：

有多种 WordPress 插件可以在每个帖子上放置 Pinterest 按钮和其他社交分享按钮。如果您想在特色图片上显示 Pinterest 按钮悬停效果，这与在每个帖子的底部显示 Pinterest 按钮不同。您可以指定将哪张图片固定在元数据中，也可以指定在元数据中为所有主要社交网络共享哪张图片。

我已经好几个月没有弄乱我的博客了，但是我如何制作社交分享按钮以及如何在 Google Analytics（分析）中跟踪它们是detailed here。

如果您想了解有关结构元数据的更多信息，请访问a good Moz.com article。当I added structured meta data to my domain 时，我收集了更多的链接。

由于您使用的是 WordPress，并且没有在已有数十年历史的静态 HTML 中添加社交分享按钮，因此您应该真正研究一下插件。我的博客绝不是 WordPress 的最佳实践，但它已经过时了，我已经看到很多插件来来去去，这些是我目前使用的，包括 the ones I use 来帮助进行结构化元数据和社交共享。我最终也在我的主题中做了一些自定义的东西，因为我想要完美的东西。

祝你好运！

【讨论】：

【解决方案2】：

我试图做同样的事情，并在之前的堆栈溢出线程here 中找到了解决方案。我使用了courtimas的答案，效果很好。

我还在pinterest widget builder website 上发现了一些自定义选项，您可以使用不同的内置按钮选项生成源代码并合并到您自己的代码中。

我目前正在运行带有圆形按钮的基于小部件构建器的选项，对此我很满意。

标记

【讨论】：