Facebook 分享未将图像发布到用户墙答案

【问题标题】：Facebook share not posting image to user wallFacebook 分享未将图像发布到用户墙
【发布时间】：2015-08-24 06:05:49
【问题描述】：

我正在尝试将网页中的图像和内容分享到用户的 FB 墙，但它没有发布。图像显示在共享弹出窗口中，但未显示在用户墙中。为此，我有以下代码。在头部我有

<meta property="og:url" content="http://objdevelopment.com/notice/ddfdf" />
<meta property="og:type" content="website" />
<meta property="og:title"  content=" Notice of Passing" />
<meta property="og:description"   content="Notice of Passing " />
<meta property="og:image" content="http://objdevelopment.com/notice/wp-content/uploads/65a4465e9258729f8085c4d780700dad.jpg" />

在 HTML 中我有

 <div id="fb-root"></div>

 <script type='text/javascript'>

  (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 = "http://connect.facebook.net/en_US/sdk.js#version=v2.3&appId=937475996303874&status=true&cookie=true&xfbml=true";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<!-- Your share button code -->
<div class="fb-share-button" data-href="http://objdevelopment.com/notice/onope/ddfdf/" 
    data-layout="button_count">
</div>

它是这样显示的http://www.awesomescreenshot.com/image/510674/5e1cdc7572ab3946a36a23ff2c49b014

单击“共享”按钮会打开以下窗口 https://drive.google.com/file/d/0B54OjkhFLGPXNXI2MWgya1RRWFU/view?usp=sharing

在墙上显示是这样的http://www.awesomescreenshot.com/image/510678/ca4fc6be51aed2db5049b96546a6cd99

我的期望是： https://drive.google.com/file/d/0B54OjkhFLGPXdGluaF9PNzdEakk/view?usp=sharing

如需实时测试，请访问

http://objdevelopment.com/notice/onope/ddfdf/

【问题讨论】：

标签： php wordpress facebook facebook-graph-api facebook-javascript-sdk

【解决方案1】：

在网上找到了一些资源并修复了这个问题。我已经使用以下代码来解决这个问题

HTML

<a class="fb-share-button fb_share"  href="#" data-href="[page_url]"  data-image="[image_url]" data-title="[Post_title]  " data-desc="[Post_description]" >   <i class="fa fa-facebook"></i> </a>

Javascript

<script>
/**FB SHARE**/

window.fbAsyncInit = function() {
FB.init({
    appId: 937475996303874,
    status: true,
    cookie: false,
    xfbml: true
});
};

(function(d, debug){var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];if   (d.getElementById(id)) {return;}js = d.createElement('script'); js.id = id; js.async = true;js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";ref.parentNode.insertBefore(js, ref);}(document, /*debug*/ false));

function postToFeed(title, desc, url, image) {
var obj = {method: 'feed',link: url, picture: image,name: title,description: desc};
function callback(response) {}
FB.ui(obj, callback);
}

var fbShareBtn = document.querySelector('.fb_share');
//fbShareBtn.addEventListener('click', function(e) {
jQuery('.fb_share').click(function(e){
e.preventDefault();
//alert();
var title = fbShareBtn.getAttribute('data-title'),
    desc = fbShareBtn.getAttribute('data-desc'),
    url = fbShareBtn.getAttribute('href'),
    image = fbShareBtn.getAttribute('data-image');
//console.log(image+ "Hello");
postToFeed(title, desc, url, image);

return false;
});
/**FB SHARE**/
</script>

在 Html 中，将 [ ] 之间的文本替换为您自己的值。

【讨论】：

【解决方案2】：

我查看了所提供页面的来源，发现没有打开的图形元标记。您应该确保打印这些元标记。

您在共享框上看到了正确的图像，因为您在共享按钮的 data-image 属性中指定了路径。但是 Facebook 使用爬虫从您的页面中提取内容以显示在墙上，并且该爬虫依赖于缺少的开放图元标记

【讨论】：

感谢您提醒我。我在 stackoverflow 上找到了另一篇文章，并且没有使用 og 元标记。

【解决方案3】：

我认为你必须调试你的网站 url，在这里你可以看到 facebook 分享的图片。 (https://developers.facebook.com/tools/debug/)。请尝试一下。

【讨论】：