在我们的应用程序中,我们使用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 Sharing调试器调试时,我得到了这样的错误信息。
og:image'属性应该是显式提供的,即使一个值可以从其他标签中推断出来。
请看一下 开放图形协议网站.
这是他们提供的一个坚如磐石、超级通俗的例子。
<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
到你的形象,等等,等等。 有很多属性。 看看什么对你有用。
开放图协议很好玩! 谁不想学这个呢?