分享到 facebook 时，分享预览不可用答案

【问题标题】：While Sharing to facebook,Share preview is not available分享到 facebook 时，分享预览不可用
【发布时间】：2019-12-16 22:17:27
【问题描述】：

在我们的应用程序中，我们使用 facebook 分享功能将帖子、文章分享到 Facebook。目前，facebook分享预览不可用。在某些情况下，分享时显示错误的图像

分享到 facebook 时，分享弹出窗口包含错误的图像，有时没有显示。

我在这里使用 facebook share_open_graph 属性将帖子分享到 facebook，但 og:image 属性没有正确替换

Code Samples

window.fbAsyncInit = function() {
    FB.init({
        appId            : '498695457184189',
        status           : true,
        cookie           : true,
        version          : 'v2.10'                
    });


    $(document).on('click' , '#fbShare' ,  function(){

        var ids = $(this).attr('id');

        var id = ids.split('-');
        var url = "{{url('wds_article_view', {slug: article.slug})}}";
        var image = 'https://www.agrideo.com/uploads/articles/{{article.coverPhoto}}';

        FB.ui({
            method: 'share_open_graph',
            action_type: 'og.shares',
            action_properties: JSON.stringify({
                object : {
                    'og:url':url,
                    'og:title':'{{article.title}}',
                    /*'og:description': '{{article.content|excerpt(100)}}',*/
                    'og:description': '{{article.title}}',
                    'og:image': image
                }
            })
        }, function(response){
                addNotification();
            });
    });
};

(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/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

在使用 Facebook 共享调试器进行调试时，我收到了这个错误

应该显式提供“og:image”属性，即使可以从其他标签推断出值。

【问题讨论】：

Facebook 不久前已经取消了在共享时指定任何这些属性的可能性，并且使用share_open_graph 方法是最后剩下的解决方法——他们现在显然也已经删除了。当您共享的 URL 被请求时，您的服务器必须通过 OG 元标记返回所有必要的值，这是唯一的方法。
您能否分享一个示例，当请求 URL 共享时，如何通过 OG 元标记返回所有必要的值
您的服务器需要返回一个包含必要 OG 元标记的文档。我不知道你想要什么样的“例子”……

标签： facebook share preview

【解决方案1】：

看看Open Graph Protocol site。

这是他们提供的一个坚如磐石且超级简单的示例：

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

因此，对于您的情况，当您共享时，将og:title 设置为您的标题，将og:image 设置为您的图像等。有很多属性。看看什么对你有用。

Open Graph Protocol 很有趣！ 谁不想学习这个？

【讨论】：