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：titleand og：description来设置标题和消息，但这似乎不起作用。

当前标题来自部分标题的一部分，或者是图像上的alt标记，并且该消息仅来自一个随机的段落标记。

Answer 1

汤姆，我遇到了同样的问题并寻找解决方案，我找到了你的帖子。也许你已经解决了它，但我想分享我发现的东西，以防它对其他人有用。 Facebook文件说“分享”方法只有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

使用share-open-graph方法，这对我来说是2018-01-01。这是有效的，但似乎是神奇的，没有记录，所以需要注意。

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代码中，我将图片网址作为参数添加到我想要分享的网址中：

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;
});

一般的想法是为每个只更改OG参数的图像创建一个单独的URL，以便Facebook必须单独删除每个参数。为避免任何SEO问题，您的标题中应该有一个指向原始网址的规范标记。这是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',。

FB.ui分享设置标题，消息和图像

6 个答案: