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

我使用FB.ui与Facebook共享页面，并试图设置标题和消息（图像如果可能但不重要）。我有这个在我的网站页眉FB.ui共享设置标题，消息和图像

<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：描述设置标题和消息，但这似乎并不奏效。

当前标题要么来自部分标题的一部分，要么来自图像上的alt标记，并且该消息仅从随机段落标记中填充。

来源

2014-05-21 Tom Hart

元数据可能被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

来源

2014-05-21 11:28:55 intCoffee

高速缓存的调试工具整理出来，谢谢:) –

汤姆，我有同样的问题，并寻找解决的办法，我发现您的文章。也许你已经解决了它，但我想分享我发现的情况，以防它可能对其他人有用。 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 
    });

来源

2015-11-25 18:47:46 Janbalik

这应写在文档中。谢谢。 – ucheng

令人敬畏的信息。感谢您分享这一点！ – suther

很高兴看到它是有用的;） – Janbalik

我发现这篇文章，并试图执行上述步骤。浪费了几个小时之后，我已经看到@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; 
});

总的想法是创建每个只能改变OG参数，使Facebook拥有单独刮他们每个人的图像的个别URL。为了避免任何搜索引擎优化问题，您应该在标题中指定原始网址的规范标记。这是complete article。

来源

2017-07-23 07:47:12 Hannes

看起来像我一直在寻找的解决方法，因为自定义图像参数已失去其功能。但是，当我按照描述的方式执行所有操作时，单击我的共享按钮将打开一个消息窗口，显示“无效的应用程序ID：0难道我完全误解了这个解决方案吗？我试图在一个普通的Wordpress生成的页面上实现它。不知道Facebook应用是什么等 – Garavani

您需要创建自己的Facebook应用程序和在线插入你的APP ID 3.只需要几分钟的时间：https://developers.facebook.com/docs/apps/register/ – Hannes

谢谢！完成所有这些并调整你的脚本。仍然只能获得标准的共享窗口内容（与站点og相同）。你确定可以在同一页面上为不同的分享按钮实现单独的图像吗？ – Garavani

您正在使用的代码已被弃用。您可以使用动态覆盖属性如下份额对话：

FB.ui({ 
    method: 'share_open_graph', 
    action_type: 'og.shares', 
    display: 'popup', 
    action_properties: JSON.stringify({ 
    object: { 
     'og:url': override_url, 
     'og:title': override_title, 
     'og:description': override_description, 
     'og:image': override_image_url' 
    } 
    }) 
}, function(response) { 
    // Action after response 
});

有关详细的工作示例，结账：http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript。

如果您在Facebook上共享一个网页（包含meta标签）并在稍后更新标题和说明等，它们将不会在Facebook上立即得到更新，因为它在2天后缓存您的网页并再次取消该页面。

所以，如果你想即时更新的标题，描述等在Facebook上，你需要使用Facebook debug工具再次报废的网页。

来源

2017-09-07 06:51:19

这对我的作品为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 
    });

来源

2018-01-01 22:24:56 OxC0FFEE

这对我来说非常适合。非常感谢您拯救我的一天！ :) –

如果您有公共存储桶，但仍无法与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',。

来源

2018-02-27 16:46:42

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

回答

相关问题