FB.ui分享设置标题、消息和图片

Question

我正在使用 FB.ui 将页面分享到 Facebook，并且我正在尝试设置标题和消息（如果可能，请使用图片但不重要）。我的网站标题中有这个

<meta property="og:title" content="Your title here" />
<meta property="og:description" content="your description here" />

我的 javascript 代码是

FB.ui({
      method: 'share',
      href: document.URL,
    }, function(response){

        //TODO Proper response handling
        log(response); 
        if (typeof response != 'undefined') {
            alert('Thanks for sharing');
        }
    }); 

根据我的阅读，我只需要 og:title 和 og:description 来设置标题和消息，但这似乎不起作用。

当前标题要么来自部分标题的一部分，要么来自图像上的 alt 标签，并且消息仅来自随机段落标签。

Answer 1

Facebook 文档说“share”方法只有 href 参数，但我发现它不是真的。您可以使用与“feed”方法非常相似的参数。这是我使用和工作的：

    FB.ui(
    {
        method: 'share',
        href: 'your_url',     // The same than link in feed method
        title: 'your_title',  // The same than name in feed method
        picture: 'path_to_your_picture',  
        caption: 'your_caption',  
        description: 'your_description',
     },
     function(response){
        // your code to manage the response
     });

Answer 2

您使用的代码已弃用。您可以使用以下 使用动态覆盖的属性共享对话：

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  display: 'popup',
  action_properties: JSON.stringify({
    object: {
      'og:url': 'https://your-url-here.com',
      'og:title': 'Title to show',
      'og:description': 'The description',
      'og:image': 'https://path-to-image.png'
    }
  })
}, function(response) {
  // Action after response
});

如需详细的工作示例，请查看：http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript。

如果您在 Facebook 上共享网页（具有 og 元标记）并稍后更新标题和描述等，它们将不会在 Facebook 上立即更新，因为它会缓存您的网页并在 2 天后再次废弃该页面。

因此，如果您想立即更新 Facebook 上的标题、描述等，则需要使用 Facebook debug 工具再次报废网页。

Answer 3

截至 2018 年 1 月 1 日，这适用于我，使用 share-open-graph 方法。这可行，但似乎很神奇，而且没有记录，所以请注意编码器。

shareOnFB: function() {
    var img = "image.jpg";
    var desc = "your caption here";
    var title = 'your title here';
    var link = 'https://your.link.here/';

    // Open FB share popup
    FB.ui({
        method: 'share_open_graph',
        action_type: 'og.shares',
        action_properties: JSON.stringify({
            object: {
                'og:url': link,
                'og:title': title,
                'og:description': desc,
                'og:image': img
            }
        })
    },
    function (response) {
        // Action after response
    });

Answer 4

元数据可能会被 Facebook 缓存。尝试在 Facebook 调试器中输入您的网址：https://developers.facebook.com/tools/debug/

这将清除缓存。

图片使用这个：

<meta property="og:image" content="http://yourimage">

Facebook recommends using images with a min size of 1200x630 pixels

Answer 5

我找到了这篇文章并尝试实施上述步骤。浪费了几个小时后，我看到了上面@SMT 的评论......

我在 v2.10 中肯定不再工作了。

我的客户已经在等待此功能，因此我必须找到解决方法。 请注意：我为 WordPress 编写了此解决方案，因此您可以更改几行以使其在您的网站上运行。

让我们从我的 HTML 代码开始 包含图像和按钮的包装器：

<div class="my-image-container">
    <img src="http://example.com/image.jpg">
    <a href="#" class="fb-share-image">Share</a>');
</div>

在我的 JS 代码中，我将图像 url 作为参数添加到我要共享的 URL：

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

    $( '.fb-share-image' ).click(function(e){
        e.preventDefault();
        var image = $(this).siblings('img').attr('src');

        FB.ui(
                {
                    method: 'share',
                    href: $(location).attr('href') + '?og_img=' + image,
                },
                function (response) {

                }
            );
    })
};

(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'));

下一步是处理 URL 参数。此代码适用于 YOAST 的 WordPress 和 WordPress SEO，但您可以简单地将其更改为与您的 CMS 一起使用。 将此添加到您的 functions.php：

add_filter('wpseo_opengraph_image',function( $img ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $_GET['og_img'];
    return $img;
});

add_filter('wpseo_opengraph_url',function( $url ){
    if( array_key_exists( 'og_img', $_GET ) )
        return $url . '?og_img=' . $_GET['og_img'];
    return $url;
});

一般的想法是为每张图片创建一个单独的 URL，只更改 OG 参数，因此 Facebook 必须单独抓取每个图片。 为避免任何 SEO 问题，您应该在标头中添加一个指向原始 URL 的规范标签。这是complete article。

Answer 6

如果您有公共存储桶，但仍然无法与 facebook 分享您的图片，请检查您的后端 s3 存储桶图片上传代码。

var data = {
    Bucket: bucketName,
    Key: fileName,
    Body: buf,
    ContentEncoding: 'base64',
    ContentType: 'image/jpeg',

};
s3Bucket.putObject(data, function(err, data){
    if (err) {
        console.log(err);
        console.log('Error uploading data: ', data);
        callback(err);
    } else {
        console.log('succesfully uploaded the image!');
        callback(null,"");
    }
});

从数据对象中删除ContentType: 'image/jpeg',。