如何实现网站内Facebook页面链接在移动端跳转至Facebook App打开

API 探路者

2026-10-11

实现移动端点击Facebook链接唤起原生APP的解决方案

核心实现逻辑

Facebook原生APP支持自定义URI协议唤起页面，你只需要给原有链接加设备检测逻辑，移动端优先走APP唤起协议，不满足条件时自动降级到原网页链接，不影响桌面端使用体验。

实现步骤（无需额外插件）

1. 提前获取Facebook页面ID

你需要先获取目标Facebook页面对应的数字ID，可直接在Facebook页面的「关于」板块底部找到。

2. 修改原有链接代码

给原有a标签添加自定义类名，方便后续JS识别控制，修改后示例代码如下：

<a href="https://www.facebook.com/FacebookIndia" target="_blank" class="fb-page-link">Open my Page</a>

3. 插入设备检测+唤起逻辑JS代码

你可以将以下JS代码添加到WordPress后台「外观-自定义-额外CSS/JS」的自定义JS区域，也可以通过子主题的functions.php文件用wp_footer钩子插入到站点底部：

document.addEventListener('DOMContentLoaded', function() {
  const fbLinks = document.querySelectorAll('.fb-page-link');
  // 替换为你自己的Facebook页面数字ID
  const fbPageId = '你获取到的页面数字ID';
  
  fbLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      // 仅移动端执行唤起逻辑
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (!isMobile) return;
      
      e.preventDefault();
      // 尝试唤起Facebook原生APP
      window.location.href = `fb://page/${fbPageId}`;
      // 2秒后未唤起说明没装APP，降级到网页打开
      setTimeout(() => {
        window.open(this.href, '_blank');
      }, 2000);
    });
  });
});