javascript 使用 Facebook 分享按钮时出现错误的缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21719149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrong thumbnail image when using facebook share button
提问by user3117509
When I click the share button for one of my wordpress posts, a popup window successfully opens. It displays the correct thumbnail image, and the title and summary text are correct as well.
当我单击我的一篇 wordpress 帖子的共享按钮时，会成功打开一个弹出窗口。它显示正确的缩略图图像，标题和摘要文本也正确。
However, when I actually go and look at the share on facebook, the thumbnail is not correct. For some reason facebook always shows the thumbnail for the first share I ever made for every single share I make.
但是，当我实际去查看 facebook 上的共享时，缩略图不正确。出于某种原因，facebook 总是显示我为我所做的每一次分享所做的第一次分享的缩略图。
What's weird is the title and summary are always correct, but I just can't get the thumbnail to work properly.
奇怪的是标题和摘要总是正确的，但我就是无法让缩略图正常工作。
Here is the code I use for my Facebook share buttons:
这是我用于 Facebook 分享按钮的代码：
<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=This Is The Title Of My Post&p[summary]=This is the summary of my post.&p[url]=http://www.mywebsite.com/individual-wordpress-post/&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>
I put this code together after reading the following answers here.
我把这个代码放在一起阅读下面的答案后这里。
Any ideas why the title and summary are always correct, but the thumbnail is never right? Remember, when I click the share button, the thumbnail is correct in the popup window but not the same when I go and look at the share on facebook.
任何想法为什么标题和摘要总是正确的，但缩略图永远是正确的？请记住，当我单击共享按钮时，弹出窗口中的缩略图是正确的，但当我去查看 facebook 上的共享时就不一样了。
Thanks for the help I really appreciate it.
感谢您的帮助，我真的很感激。
回答by Jonathan
Facebook uses the Open Graph protocolto determine what information is displayed when sharing a web page. The problem is more than likely not with your link but with missing Open Graph tags.
Facebook 使用开放图谱协议来确定共享网页时显示的信息。问题很可能不是您的链接，而是缺少 Open Graph 标签。
To debug the problem, copy/paste the URL you're testing into the Facebook Open Graph Debuggerand press the 'Debug' button. The debugger will display the information Faceebook will use when sharing that specific URL.
要调试问题，请将您正在测试的 URL 复制/粘贴到Facebook Open Graph Debugger 中，然后按“调试”按钮。调试器将显示 Facebook 在共享该特定 URL 时将使用的信息。
As an example, the Open Graph tags for the home page of Stackoverflow are:
例如，Stackoverflow 主页的 Open Graph 标签是：
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>
The output for the Open Graph debugger is shown below.
Open Graph 调试器的输出如下所示。
To resolve your problem, you can:
要解决您的问题，您可以：
- Change your Wordpress theme to output the Open Graph tagson each post/page.
- Install a plugin to output the Open Graph tags. Facebook have an official pluginor you can use Wordpress for SEOwhich will output Open Graph tags and also meta-data tags for Twitter.
- 更改您的 Wordpress 主题以在每个帖子/页面上输出 Open Graph 标签。
- 安装插件以输出 Open Graph 标签。Facebook 有一个官方插件，或者您可以使用Wordpress 进行 SEO，它将输出 Open Graph 标签以及 Twitter 的元数据标签。
回答by Brane
To solve this problem you need just to edit your theme header.phpand set this code below the tag:
要解决此问题，您只需编辑主题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];?>" />
