如何通过Facebook分享div容器中的图片与文本？

看起来你已经搞定了Facebook JS SDK的初始化部分，这部分代码是没问题的。接下来咱们一步步实现分享指定div内的图文内容：

1. 完善SDK初始化代码（补全你代码里的省略部分） #

先把你提供的初始化代码补全，确保SDK能正常加载：

window.fbAsyncInit = function(){
  FB.init({
    appId: "xxxxxxxxxxx", // 替换成你的真实App ID
    status: true,
    cookie: true,
    xfbml: true,
    version: 'v18.0' // 指定SDK版本，建议用最新稳定版
  });
};

(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, false)); // 补全省略的参数

2. 编写分享函数，获取Div内的内容 #

假设你的目标div结构是这样的：

<div id="share-target">
  <p>这是要分享的文本内容</p>
  <img src="https://example.com/your-image.jpg" alt="分享图片">
</div>
<button onclick="shareDivContent()">分享到Facebook</button>

接着编写分享函数，自动抓取div里的文本和图片：

function shareDivContent() {
  // 获取目标div元素
  const shareDiv = document.getElementById('share-target');
  
  // 获取div内的文本内容（可根据你的实际DOM结构调整选择器）
  const shareText = shareDiv.querySelector('p').textContent.trim();
  
  // 获取div内的图片URL（注意：必须是公开可访问的网络地址，不能用本地路径）
  const shareImage = shareDiv.querySelector('img').src;
  
  // 调用Facebook分享弹窗
  FB.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
      object: {
        'og:url': window.location.href, // 分享的关联链接，建议用当前页面URL
        'og:title': '自定义分享标题', // 可自定义或从页面标题获取
        'og:description': shareText,
        'og:image': shareImage
      }
    })
  }, function(response){
    // 分享后的回调处理
    if (response && !response.error_message) {
      alert('分享成功！');
    } else {
      alert('分享取消或出现错误');
    }
  });
}

3. 关键注意事项 #

• 图片要求：分享的图片必须是公开可访问的HTTPS URL，尺寸建议至少1200x630像素，这样Facebook才能正确抓取并显示图片。
• App权限配置：确保你的Facebook App已开启网页平台权限，并且在App设置里添加了当前网站的域名。
• SDK版本：指定明确的SDK版本（比如v18.0），避免因版本兼容问题导致功能失效。
• 内容缓存问题：如果遇到分享内容无法正常显示的情况，可以使用Facebook官方的分享调试工具检测，该工具可帮你刷新平台的内容缓存，确保内容正确展示。

内容的提问来源于stack exchange，提问作者Rizwi