移动端点击Facebook sharer.php如何直接唤起App而非浏览器新标签页

当前已上线的Facebook、Twitter分享链接基础功能正常，代码如下：

<a href="https://www.facebook.com/sharer/sharer.php?u={{ myURL | urlencode }}" target="_blank"><i class="fa fa-facebook-square fa-2x"></i></a>

<a href="https://twitter.com/share?url={{ myURL | urlencode }}&text={{ article }}" target="_blank"><i class="fa fa-twitter-square fa-2x"></i></a>

移动端场景下，点击Twitter分享可以直接唤起客户端，但点击Facebook的sharer.php链接时，Safari会新开标签跳转到Facebook网页登录页，需要实现点击Facebook分享直接唤起App、和Twitter交互一致的效果。

完全可以通过纯前端HTML+少量JS实现，不需要服务端配合改造。

• 现有sharer.php是Facebook的网页端分享入口，没有配置默认唤起客户端的通用链接规则，因此Safari会直接加载网页内容，不会主动触发App唤起。
• Facebook客户端在所有移动端系统都注册了专属URL Scheme fb://，通过这个协议可以直接打开App并跳转到对应分享界面；针对未安装Facebook App的设备，加一层超时判断回退到原有网页分享页即可，不会影响功能可用性。

<a href="https://www.facebook.com/sharer/sharer.php?u={{ myURL | urlencode }}" target="_blank" id="fbShareBtn">
  <i class="fa fa-facebook-square fa-2x"></i>
</a>

<script>
const fbShareBtn = document.getElementById('fbShareBtn');
fbShareBtn.addEventListener('click', function(e) {
  // 仅移动端触发唤起逻辑，桌面端保持原有网页分享逻辑
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (!isMobile) return;

  e.preventDefault();
  const targetShareUrl = encodeURIComponent('{{ myURL }}');
  const fbAppScheme = `fb://facewebmodal/f?href=${targetShareUrl}`;
  
  const triggerTime = Date.now();
  // 先尝试唤起App
  window.location.href = fbAppScheme;

  setTimeout(() => {
    // 300ms后页面仍未切走，说明设备未安装Facebook App，回退到网页分享
    if (Date.now() - triggerTime < 500 && !document.hidden) {
      window.open(this.href, '_blank');
    }
  }, 300);
})
</script>

• 不要直接把a标签的href替换为fb://协议地址，否则未安装App的用户点击后会出现无响应的错误，必须搭配超时回退逻辑使用。
• 300ms的超时是移动端验证过的合理值，不会出现已经成功唤起App后还强制跳网页的问题。
• 逻辑只在移动端生效，桌面端用户点击仍然保持原有打开网页分享窗口的体验，不需要做额外兼容。
• 不需要引入Facebook官方SDK，代码轻量，不会增加额外的页面加载开销。

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