如何在移动端浏览器接入Facebook分享并在分享成功后调用指定函数

问题原因 #

移动端浏览器普遍对弹窗逻辑有严格限制，Facebook JS SDK的display: 'popup'参数在移动端会自动降级为新标签页打开分享页面，原页面的JS上下文被中断，因此回调函数无法正常触发。display: 'iframe'方案因为移动端浏览器的跨域iframe权限限制，也无法正常生效。

解决方案 #

采用「跳转回原页+本地存储标记」的兼容方案，同时兼容桌面端和移动端逻辑：

1. 修改FB分享调用代码 #

新增redirect_uri参数指向当前页面，同时在发起分享前存储本地标记：

// 标记用户发起了Facebook分享
localStorage.setItem('fb_share_initiated', 'true');

FB.ui({
  display: 'popup',
  method: 'share',
  href: 'https://www.mywebsite.com/mypage',
  // 移动端跳转地址，桌面端不影响原有弹窗逻辑
  redirect_uri: window.location.href
}, function(response) {
  // 桌面端正常走原有回调逻辑
  // 修正原判断逻辑：分享成功返回的response包含post_id属性，不是数组
  if (response && response.post_id) {
    loadAutoPopup_thanksfb();
    localStorage.removeItem('fb_share_initiated');
  }
});

2. 新增页面初始化判断逻辑 #

页面加载时校验是否为Facebook分享跳转回来的场景，满足条件则触发回调：

window.addEventListener('load', function() {
  const shareInitiated = localStorage.getItem('fb_share_initiated');
  const urlParams = new URLSearchParams(window.location.search);
  // Facebook分享成功跳转回原页时会携带post_id参数
  const hasFbPostId = urlParams.has('post_id');

  if (shareInitiated === 'true' && hasFbPostId) {
    // 执行指定回调
    loadAutoPopup_thanksfb();
    // 清除标记避免重复触发
    localStorage.removeItem('fb_share_initiated');
    // 可选：清除URL中的Facebook返回参数，避免刷新页面重复执行
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

注意事项 #

• 需要在Facebook开发者后台的应用配置中，把当前域名加入OAuth跳转白名单，否则redirect_uri会报错。
• 若需要区分用户取消分享的场景，可判断URL中的error参数，存在该参数时直接清除本地标记即可，不执行回调。

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