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

17
votes

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]

2
htmlfacebookmobile-website
iOS or Android or both? – Mika Tuupola
Both. It's not an "app" I'm developing, it's an HTML website (still figuring out whether the person I'm doing it for supports JDK or PHP).I've tested fb://page/[pageid] as a regular href hyperlink on both iOS and Android browsers, they all open the Facebook app if it is installed. The problem is desktop browsers or if they don't have the app installed. – user1795832
Is there any difference between the Fans Page and Personal Page? – Kelvin

2 Answers

17
votes

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

0
votes

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