javascript Facebook 共享未显示来自开放图元标签的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8814224/
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
Facebook share not showing image from open graph metatags
提问by cgrantham
I'm trying to integrate the Facebook share button to my employer's site, the title, url, description/intro are all displaying correctly, however no image is being attached. When the share dialog opens, an image container flickers and then disappears as though facebook is trying to process the image(s) but fails.
我正在尝试将 Facebook 分享按钮集成到我雇主的网站，标题、网址、描述/介绍都显示正确，但没有附加任何图像。当共享对话框打开时，图像容器闪烁然后消失，就好像 facebook 正在尝试处理图像但失败一样。
I'm using og:image and a link relation to try and specify the image to use for shared links:
我正在使用 og:image 和链接关系来尝试指定用于共享链接的图像：
<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
That image used to work (it scaled appropriately) but no longer does, I've also tried other images of differing size and format with no luck.
该图像曾经可以工作（它适当地缩放）但不再有效，我也尝试过其他不同大小和格式的图像，但没有成功。
Here's the open meta-tags I'm using in the header:
这是我在标题中使用的开放元标记：
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" itemscope itemtype="http://schema.org/Article" xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:type" content="landing page" />
<meta property="og:title" content="Social Media Test Page" />
<meta property="og:description" content="This is a page for testing the behavior of social media buttons..." />
<meta property="og:image" content="/images/logo_white_150px.png" />
<link rel="image_src" type="image/png" href="/images/logo_white_150px.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="<%=shortUrl%>" />
<meta property="og:site_name" content="site name" />
<meta property="og:medium" content="mult" />
</head>
Here's the JavaScript I'm using at the start of the body:
这是我在正文开头使用的 JavaScript：
<body>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
...
And here is how I'm using the button:
这是我使用按钮的方式：
<div class="left" style="text-align: center;">
<a name="fb_share" type="button" share_url="<%=shortUrl%>">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
Any help is much appreciated, thanks in advance
Chris.
非常感谢任何帮助，在此先感
谢克里斯。
回答by Sebastian
If everything is OK on the scraped result, try to fetch new scrap information using Facebook Debugger.
如果抓取的结果一切正常，请尝试使用Facebook Debugger获取新的剪贴信息。
This is because Facebook use its own cache for og:data.
这是因为 Facebook 使用自己的 og:data 缓存。
回答by Sam Rossetti
In my experience :
在我的经验中 ：
- All the URLs should be absolute (even the og:image value)
- If your image is served equally over https you should add a og:image:secure_url meta property with absolute url as well (if you serve everything only over https you can skip this)
- Add as well a og:image:width and og:image:height meta properties
- 所有的 URL 都应该是绝对的（甚至 og:image 值）
- 如果您的图片通过 https 提供同等服务，您还应该添加一个带有绝对 url 的 og:image:secure_url 元属性（如果您只通过 https 提供所有内容，则可以跳过此步骤）
- 添加 og:image:width 和 og:image:height 元属性
Main url redirection is very tricky, you should make absolutely sure your content is correctly (and fully) fetched, for complex dynamic content I often end up doing a detection in the .htaccess to serve FB's crawler appropriate content as follow :
主 url 重定向非常棘手，您应该绝对确保您的内容被正确（和完全）获取，对于复杂的动态内容，我经常最终在 .htaccess 中进行检测以提供 FB 的爬虫适当的内容，如下所示：
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/[0-9]
RewriteRule ^(.*)$ OG_GENERATOR_SCRIPT_HERE.php [L,QSA]
回答by DMCS
Without seeing the HTML output from your code, I could only make a guess as to the issue.
Don't use a relative url like <%=shortUrl%>, but be sure to use the fully-qualified Url....something that has the http(s):// on it.
没有看到您的代码的 HTML 输出，我只能猜测这个问题。不要使用像 的相对 url <%=shortUrl%>，但一定要使用完全限定的 Url.... 上面有 http(s):// 的东西。
Also, http://developers.facebook.com/docs/share/says that this share button is being deprecated. Please change over to using the Like button instead: http://developers.facebook.com/docs/reference/plugins/like/
此外，http: //developers.facebook.com/docs/share/表示此共享按钮已被弃用。请改为使用“赞”按钮：http: //developers.facebook.com/docs/reference/plugins/like/
