Facebook URL schemes on a mobile website, open app if its installed, otherwise go to the webpage

Question

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 in the native Facebook app, if possible, otherwise go to the regular URL. Is there something out there in the Facebook schemes that handles that automatically?

Basically, if mobile app is not installed or if the user is on a desktop, go here: https://www.facebook.com/pages/[pageid]

If mobile app is installed, then go here:

fb://page/[pageid]

Answer 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

<a href="https://facebook.com/page" class="large-screen">Clicky</a>
<a href="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

Answer 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

You might see a dialog box on windows, to override that behavior we can update the "if statement" as follows

...
if (navigator.share && !navigator.userAgent.includes('Win')) {
...