移动端Facebook分享按钮跳转APP并分享链接的实现问题

你之前用fb://sharer.php的路径不对，Facebook APP的分享协议已经更新，正确格式得用fb://share，且只需要传入href参数（APP会自动抓取目标链接的OG标题、描述等信息，不用手动传title）。

另外还要考虑用户没装Facebook APP的情况，得做降级处理——如果APP打不开，自动跳回网页版分享。

完整的响应式实现代码 #

function shareFacebook() {
  const shareUrl = 'https://stackoverflow.com/';
  const encodedUrl = encodeURIComponent(shareUrl);
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  if (isMobile) {
    // 尝试唤起Facebook APP分享
    const appShareUrl = `fb://share?href=${encodedUrl}`;
    const startTime = Date.now();
    
    window.open(appShareUrl, '_blank');
    
    // 检测APP是否唤起成功，失败则跳转网页版
    setTimeout(() => {
      if (Date.now() - startTime < 1000) {
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, 'pop up name', 'width=600, height=600');
      }
    }, 300);
  } else {
    // PC端直接跳转网页版分享
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, 'pop up name', 'width=600, height=600');
  }
}

// React按钮部分
return (
  <button onClick={() => shareFacebook()}><img src={facebook} alt="Share on Facebook" /></button>
)

关键说明 #

• 移动端使用fb://share?href=xxx是Facebook官方支持的APP分享路径，能直接唤起分享界面并携带目标链接。
• 加入的APP唤起检测逻辑：通过时间差判断——若APP成功唤起，浏览器会失去焦点，时间差会超过阈值；若未唤起则自动跳转网页版。
• 移除手动传title的逻辑，因为Facebook分享会优先读取目标链接的OG元标签（比如<meta property="og:title" content="xxx">），这样分享内容更规范。

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