Question

我试图将Facebook分享按钮集成到我的雇主的网站，标题，网址，说明/介绍都正确显示，但没有附加图像。当共享对话框打开时，图像容器会闪烁然后消失，就像facebook正在尝试处理图像但失败一样。

我使用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" />

该图像曾经起作用（它适当缩放）但不再适用，我还尝试过其他尺寸和格式不同的图像而没有运气。

这是我在标题中使用的开放式元标记：

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

这是我在身体开始处使用的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>
  ...

以下是我使用按钮的方式：

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

非常感谢任何帮助，提前谢谢克里斯。

Answer 1

如果抓取的结果一切正常，请尝试使用Facebook Debugger获取新的剪贴信息。

这是因为Facebook为og：data使用了自己的缓存。

Answer 2

如果没有看到代码中的HTML输出，我只能猜测问题。不要使用<%=shortUrl%>之类的相对网址，但请务必使用完全合格的网址....上面有http（s）：//的内容。

此外，http://developers.facebook.com/docs/share/表示此分享按钮已被弃用。请切换为使用“赞”按钮：http://developers.facebook.com/docs/reference/plugins/like/

Answer 3

根据我的经验：

所有网址都应该是绝对的（即使是og：图片值）
如果你的图片是通过https平均提供的，你应该添加一个带有绝对网址的og：image：secure_url元属性（如果你只通过https提供服务，你可以跳过这个）
添加og：image：width和og：image：height meta properties

主网址重定向非常棘手，您应该确保内容被正确（并且完全）获取，对于复杂的动态内容，我经常最终在.htaccess中进行检测，以便为FB的抓取工具提供适当的内容，如下所示： / p>

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/[0-9]
RewriteRule ^(.*)$ OG_GENERATOR_SCRIPT_HERE.php [L,QSA]

Facebook分享没有显示开放图元标记的图像

3 个答案: