Facebook Url Schemes On A Mobile Website, Open App If Its Installed, Otherwise Go To The Webpage

I am creating a hybrid desktop/mobile website that all share the same pages, aka I do not have two separate URLs for desktop and mobile. I am trying to get Facebook links to open

Solution 1:

A Simple way would be CSS Media Queries.

Show the fb:// link for small device widths. and a regular http:// link for larger screen sizes.

EDIT

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

Then using CSS Media queries hide one of the links depending on the size of the screen.

UPDATE

Instead of using CSS a more satisfying user experience can be created with javascript by attempting to open the deep link URL directly after opening the HTTP URL after X seconds in a timeout.

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

The HTTP URL will always load, but in the case that deep links are not available, attempting to open one will silently fail, falling back to the web version.

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

Solution 2:

You can use navigation to check if the mobile has app installed if not you can simply use a link

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