Question

我正在尝试使用自定义＆＃34; Pin It＆＃34;每个帖子上的Pinterest按钮，从该帖子的特色图片中拉出。

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

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

我无法弄清楚如何更改＆＃34; Pin It＆＃34;按钮到我自己的自定义按钮;每次我尝试我的按钮都会被覆盖。

我希望这能解释得很好。我对php和javascript仍然很新。感谢您提供的任何帮助。

Answer 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来帮助进行结构化元数据和社交共享。我最终也在我的主题中做了一些自定义的东西，因为我想让事情变得完美。

祝你好运！

Answer 2

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

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

我目前正在使用圆形按钮运行基于小部件构建器的选项，我很高兴。

标记

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

2 个答案: