What is wrong with deep links in Facebook app?

Question

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.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>

Are you trying in Facebook Messenger? – Mohit Kumar Apr 09 '20 at 17:00 — Mohit Kumar, Apr 09 '20 at 17:00

score 0 · Answer 1 · answered Apr 10 '20 at 15:20

Alright, for those like me who spent hours on this deep linking, I found a fix for Facebook and Messenger, thanks to https://stephenradford.me/link-to-url-scheme-or-not-and-force-out-of-the-app-youre-in/

The idea is to add the custom scheme url in the JS script window.location = myapp://element/{ELEMENT_ID}, and the redirect a few ms after if nothing happened.

So the whole script is:

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>

What is wrong with deep links in Facebook app?

1 Answers1