17

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]

user1795832
  • 2,080
  • 8
  • 29
  • 50
  • iOS or Android or both? – Mika Tuupola Mar 08 '14 at 23:10
  • 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 Mar 09 '14 at 18:09
  • Is there any difference between the Fans Page and Personal Page? – Kelvin May 27 '21 at 01:15

2 Answers2

18

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

Connor Finn McKelvey
  • 542
  • 6
  • 16
  • How can a CSS media query change the href of a hyperlink? I've never seen that done before. – user1795832 Mar 16 '14 at 16:28
  • Is it possible to use the "fb:" syntax to open specific post? I have been unable to make it work – Niko Apr 02 '16 at 12:49
  • @Niko Please see the update that I posted, it should help you out. Not sure about linking to specific posts. – Connor Finn McKelvey Apr 03 '16 at 05:34
  • @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. – AmarjaPatil4 Jun 08 '16 at 09:35
  • @ConnorFinnMcKelvey I tried your solution but facebook official app got crashed with this code snipeet. any clue ? – Bharat Bhushan Jan 03 '19 at 06:15
  • 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. – Dawson B Jun 23 '20 at 14:16
1

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')) {
...
Rohan Kumar Thakur
  • 723
  • 6
  • 8