3

请通读整篇文章，然后再将其标记为Facebook Share Story Image Not Appear For First time或相关问题的副本。

我正在创建一个动态页面（具有唯一的 url 和图像），用户可以通过共享对话框在 facebook 上共享该页面。

根据https://developers.facebook.com/docs/sharing/best-practices#precaching，Facebook需要先抓取 og:image 中的 url，然后才能在共享对话框中显示。
这可以通过使用共享调试器或在共享页面上设置 og:image:width 和 og:image:height 元标记来完成。

由于我正在制作的网站可能会获得许多独特的页面和图像，因此我不想编写一个脚本以编程方式调用共享器调试器（或带有唯一 url 的 sharer.php）来完成这项工作。所以我正在尝试使用 og:image:width 和 og:image:height 元标记。

不幸的是，我无法完成这项工作。
第一次共享页面时，它不会显示 og:image 中指定的图像。第二次这样。

我创建了两个演示文件来备份它：

http://beerco.de/fbgifshare/urls_without_ts.php 此页面具有以下元标记和 fb.ui 代码：

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif"
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_without_ts.php'
    }, function(response){
        console.log(response);
    });

这将始终有效（在初始共享之后），因为共享的 href 和 og:image 是静态的。

http://beerco.de/fbgifshare/urls_with_ts.php此页面将始终共享一个唯一的 URL 和图像：

    <meta property="og:url" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:title" content="Lorem Ipsum">
    <meta property="og:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum lacinia nisl ut hendrerit. Sed elementum, urna id accumsan ultrices, lectus felis bibendum lectus, sed ornare velit elit eleifend ipsum.">
    <meta property="og:image" content="http://beerco.de/fbgifshare/test.gif?ts=1484855521">
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    ...
    FB.ui({
        method: 'share',
        href: 'http://beerco.de/fbgifshare/urls_with_ts.php?ts=1484855521'
    }, function(response){
        console.log(response);
    });

共享对话框在我第一次打开提要对话框时不会显示图像预览，但如果我再次尝试（不重新加载页面）它可能会显示它，因为 facebook 然后已经抓取了图像。

如果我刷新页面并尝试再次共享，则不会显示预览，因为 url 有一个新的时间戳。

我在这里遗漏了什么还是 facebook 文档有误？
我需要在用户第一次共享页面时显示图像预览。
实现这一目标的最佳方法是什么？

在 og:image 和 og:url 中都有 image-url 的原因是因为我希望在共享页面时在 facebook 中内联播放动画 gif（就像 giphy 一样）。

请查看两个演示文件的源代码以查看所有 OG 标签和 FB.ui 代码。

所有帮助表示赞赏！

4

0 回答 0