Facebook 应用程序中的深层链接有什么问题？答案

【问题标题】：What is wrong with deep links in Facebook app?Facebook 应用程序中的深层链接有什么问题？
【发布时间】：2020-07-22 09:01:37
【问题描述】：

我已经尝试了几个小时为我的客户在 Facebook 应用程序中运行的应用程序创建深层链接，但我不知道我做错了什么，但它仍然无法正常工作。这是我的 HTML，如果需要更多信息来帮助回答（如应用名称等），我很乐意私下告诉您。

这个 index.html 的 URL 是 ELEMENT_URL，我在 https://developers.facebook.com/tools/debug/ 中尝试了这个 URL，它显示一切正常。

在 Facebook 应用程序之外，一切都按预期工作：重定向、应用程序打开、使用自定义方案或使用通用链接。一切都很好。除了 Facebook。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{ELEMENT_TITLE}</title>
  <meta name="description" content="Find this in my app">
  <meta property="og:title" content="{ELEMENT_TITLE}" />
  <meta property="og:url" content="{ELEMENT_URL}" />
  <meta property="og:description" content="Find this in my app">
  <meta property="og:image" content="{ELEMENT_PICTURE}" >
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="fr_FR" />
  <meta property="fb:app_id" content="{FACEBOOK_APP_ID}" />
  <meta property="al:ios:url" content="myapp://element/{ELEMENT_ID}" />
  <meta property="al:ios:app_store_id" content="{APP_STORE_ID}" />
  <meta property="al:ios:app_name" content="MyApp" />
  <meta property="al:android:url" content="myapp://element/{ELEMENT_ID}" />
  <meta property="al:android:app_name" content="MyApp" />
  <meta property="al:android:package" content="com.myapp" />
  <meta property="al:web:url" content="{ELEMENT_OUTSIDE_URL}" />
  <meta property="al:web:should_fallback" content="false" />
  <script>
    function redirect() {
      var userAgent = navigator.userAgent || navigator.vendor || window.opera;
      var ios = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
      var language = /fr|FR/.test(navigator.language) ? 'fr' : 'en'
      if (ios) {
        window.location.replace('https://itunes.apple.com/se/app/my-app/{APP_STORE_ID}')
        return
      }
      var android = /android/i.test(userAgent);
      if (android) {
        window.location.replace('https://play.google.com/store/apps/details?id=com.myapp&hl=' + language)
        return
      }
      window.location.replace('{ELEMENT_OUTSIDE_URL}')
    }
    redirect()
  </script>
</head>
<body>
</body>
</html>

【问题讨论】：

你在使用 Facebook Messenger 吗？
Facebook 应用中没有

标签： android ios facebook deep-linking applinks

【解决方案1】：

好的，对于像我这样在这个深度链接上花费数小时的人，我找到了 Facebook 和 Messenger 的修复程序，感谢 https://stephenradford.me/link-to-url-scheme-or-not-and-force-out-of-the-app-youre-in/

想法是在JS脚本window.location = myapp://element/{ELEMENT_ID}中添加自定义scheme url，如果什么都没发生，则在几毫秒后重定向。

所以整个脚本是：

I've tried for hours to make a deep link for my client's app working in Facebook app, and I don't know what I did wrong but it is still not working. Here is my HTML, and if some more information is needed to help answer (like the app name and so on), I'll be more than pleased to give you in private.

The URL for this index.html is ELEMENT_URL, and I tried this url in https://developers.facebook.com/tools/debug/ which showed everything alright.

Outside Facebook app, everything works as expected : the redirection, the app opening, with the custom scheme or with the universal link. Everything good. Except Facebook.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{ELEMENT_TITLE}</title>
  <meta name="description" content="Find this in my app">
  <meta property="og:title" content="{ELEMENT_TITLE}" />
  <meta property="og:url" content="{ELEMENT_URL}" />
  <meta property="og:description" content="Find this in my app">
  <meta property="og:image" content="{ELEMENT_PICTURE}" >
  <meta property="og:type" content="article" />
  <meta property="og:locale" content="fr_FR" />
  <meta property="fb:app_id" content="{FACEBOOK_APP_ID}" />
  <meta property="al:ios:url" content="myapp://element/{ELEMENT_ID}" />
  <meta property="al:ios:app_store_id" content="{APP_STORE_ID}" />
  <meta property="al:ios:app_name" content="MyApp" />
  <meta property="al:android:url" content="myapp://element/{ELEMENT_ID}" />
  <meta property="al:android:app_name" content="MyApp" />
  <meta property="al:android:package" content="com.myapp" />
  <meta property="al:web:url" content="{ELEMENT_OUTSIDE_URL}" />
  <meta property="al:web:should_fallback" content="false" />
  <script>
    function redirect() {
      var userAgent = navigator.userAgent || navigator.vendor || window.opera;
      var ios = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
      var language = /fr|FR/.test(navigator.language) ? 'fr' : 'en'
      if (ios) {
        window.location = myapp://element/{ELEMENT_ID};
        window.setTimeout(() => {
          window.location.replace('https://itunes.apple.com/se/app/my-app/{APP_STORE_ID}');
        }, 25)
        return
      }
      var android = /android/i.test(userAgent);
      if (android) {
        window.location = myapp://element/{ELEMENT_ID};
        window.setTimeout(() => {
          window.location.replace('https://play.google.com/store/apps/details?id=com.myapp&hl=' + language);
        }, 25)
        return
      }
      window.location.replace('{ELEMENT_OUTSIDE_URL}')
    }
    redirect()
  </script>
</head>
<body>
</body>
</html>

【讨论】：