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]

Catalonia

iOS or Android or both? – Tedra

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

Is there any difference between the Fans Page and Personal Page? – Tootsie

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

Andalusite

How can a CSS media query change the href of a hyperlink? I've never seen that done before. – Catalonia

Is it possible to use the "fb:" syntax to open specific post? I have been unable to make it work – Elconin

@Elconin Please see the update that I posted, it should help you out. Not sure about linking to specific posts. – Andalusite

@ConnorFinnMcKelvey, this code works very well, but can you please elaborate how this works. As I tried this for my application named 'test' which is already installed on mobile. So how can I open my 'test'. I don't have any kinda knowledge about this, plz help. – Doxology

@ConnorFinnMcKelvey I tried your solution but facebook official app got crashed with this code snipeet. any clue ? – Amelina

In June 2020, Safari does not work with the updated method. It throws a "Safari cannot open the page because the address is invalid" and does not fallback properly to the browser URL. – Corrigan

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')) {
...

Tella