Question

当我点击其中一个wordpress帖子的分享按钮时，会成功打开一个弹出窗口。它显示正确的缩略图图像，标题和摘要文本也是正确的。

然而，当我实际去看看facebook上的分享时，缩略图是不正确的。出于某种原因，Facebook总是会显示我为每一个分享所做的第一次分享的缩略图。

标题和摘要总是正确的，这有点奇怪，但我无法让缩略图正常工作。

以下是我用于Facebook共享按钮的代码：

<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=This Is The Title Of My Post&amp;p[summary]=This is the summary of my post.&amp;p[url]=http://www.mywebsite.com/individual-wordpress-post/&amp;p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>

在阅读以下答案here后，我将此代码放在一起。

任何想法为什么标题和摘要总是正确的，但缩略图永远不对？请记住，当我点击分享按钮时，缩略图在弹出窗口中是正确的，但当我去看看Facebook上的分享时，缩略图是不正确的。

感谢您的帮助，我真的很感激。

Answer 1

Facebook使用Open Graph protocol来确定共享网页时显示的信息。问题很可能不在于您的链接，而是缺少Open Graph标记。

要调试问题，请将您正在测试的网址复制/粘贴到Facebook Open Graph Debugger，然后按“调试”按钮。调试器将显示Faceebook在共享特定URL时将使用的信息。

例如，Stackoverflow主页的Open Graph标记为：

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&amp;A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>

Open Graph调试器的输出如下所示。

Stackoverflow Open Graph Debug Output

要解决您的问题，您可以：

在每个帖子/页面上将您的Wordpress主题更改为output the Open Graph tags。
安装插件以输出Open Graph标记。 Facebook have an official plugin或者您可以使用Wordpress for SEO输出Open Graph标记以及Twitter的元数据标记。

Answer 2

要解决此问题，您只需编辑主题header.php并在代码下方设置此代码：

<?php
if ( has_post_thumbnail())
     {
     $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
?>
<meta property="og:image" content="<?php echo $fb_image[0];?>" />

使用Facebook分享按钮时缩略图图像错误

2 个答案: