移动网站上的 Facebook URL 方案，如果已安装则打开应用程序，否则转到网页答案

【问题标题】：Facebook URL schemes on a mobile website, open app if its installed, otherwise go to the webpage移动网站上的 Facebook URL 方案，如果已安装则打开应用程序，否则转到网页
【发布时间】：2014-04-12 01:56:35
【问题描述】：

我正在创建一个共享相同页面的混合桌面/移动网站，也就是说，我没有两个单独的桌面和移动 URL。如果可能，我正在尝试让 Facebook 链接在本机 Facebook 应用程序中打开，否则转到常规 URL。 Facebook 方案中有什么东西可以自动处理吗？

基本上，如果未安装移动应用或用户在桌面上，请访问此处：https://www.facebook.com/pages/[pageid]

如果安装了移动应用程序，请转到此处：

fb://page/[pageid]

【问题讨论】：

iOS 或 Android 或两者兼而有之？
两者。这不是我正在开发的“应用程序”，它是一个 HTML 网站（仍在弄清楚我正在为它做的人是否支持 JDK 或 PHP）。我已经测试了 fb://page/[pageid] 作为常规iOS 和 Android 浏览器上的 href 超链接，如果安装了 Facebook 应用程序，它们都会打开。问题在于桌面浏览器，或者他们没有安装应用程序。
粉丝专页和个人专页有区别吗？

标签： html facebook mobile-website

【解决方案1】：

您可以使用导航来检查手机是否安装了应用程序，如果没有，您可以简单地使用链接

 onShare() {
    const title = 'Title';
    const url = 'https://www.facebook.com/';
    const text = "Share";
    if (navigator.share) {
      navigator
        .share({ title: `${title}`, url: `${url}`,text: `${text}`})
        .then(() => {
          console.log('Shared');
        })
        .catch(console.error);
    } else {
      window.location.replace(
        `https://www.facebook.com/sharer.php?u=${url.trim()}&quote=${text}`
      );
    }
  } //onShare ends here

【讨论】：

【解决方案2】：

一种简单的方法是 CSS 媒体查询。

为小设备宽度显示 fb:// 链接。以及用于更大屏幕尺寸的常规 http:// 链接。

编辑

<a href="https://facebook.com/page" class="large-screen">Clicky</a>
<a href="fb://page/mypage" class="small-screen">Clicky</a>

然后使用 CSS 媒体查询根据屏幕大小隐藏其中一个链接。

更新

通过尝试在超时 X 秒后打开 HTTP URL 后直接打开深层链接 URL，可以使用 javascript 创建更令人满意的用户体验，而不是使用 CSS。

setTimeout(function () { window.location = "https://www.facebook.com"; }, 25);
window.location = "fb://";

HTTP URL 将始终加载，但在深层链接不可用的情况下，尝试打开一个会静默失败，退回到网络版本。

来源：https://www.quora.com/How-does-Bitlys-Deep-Linking-detect-if-the-user-already-has-the-app-installed

【讨论】：

CSS媒体查询如何改变超链接的href？我以前从未见过这样做。
是否可以使用“fb:”语法打开特定帖子？我一直无法让它工作
@Niko 请查看我发布的更新，它应该可以帮助您。不确定是否链接到特定帖子。
@ConnorFinnMcKelvey，此代码运行良好，但请您详细说明其工作原理。当我为已安装在移动设备上的名为“test”的应用程序尝试此操作时。那么如何打开我的“测试”。我对此一无所知，请帮助。
@ConnorFinnMcKelvey 我尝试了您的解决方案，但 facebook 官方应用程序因此代码片段而崩溃。有什么线索吗？