Что не так с глубокими ссылками в приложении Facebook? - PullRequest
Новая
       73

Что не так с глубокими ссылками в приложении Facebook?

0 голосов
/ 09 апреля 2020

Я часами пытался сделать глубокую ссылку на приложение моего клиента, работающее в приложении Facebook, и я не знаю, что я сделал неправильно, но оно все еще не работает. Вот мой HTML, и если для ответа потребуется дополнительная информация (например, имя приложения и т. Д.), Я буду более чем рад предоставить вам конфиденциально.

URL-адрес для этого index. html - ELEMENT_URL, и я попробовал этот URL в https://developers.facebook.com/tools/debug/, который показал все в порядке.

За пределами приложения 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>

1 Ответ

0 голосов
/ 10 апреля 2020

Хорошо, для тех, кто, как я, который часами занимался этой глубокой связью, я нашел исправление для Facebook и Messenger, благодаря https://stephenradford.me/link-to-url-scheme-or-not-and-force-out-of-the-app-youre-in/

Идея состоит в том, чтобы добавить кастом URL схемы в сценарии JS window.location = myapp://element/{ELEMENT_ID} и перенаправление через несколько мсек, если ничего не произошло.

Итак, весь сценарий: 

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