Link to open facebook app if app exists, else webpage

Question

I'm looking for a solution to the following. We're looking to send a html mailer out next week and currently having some issues. This is the first one we've tried to do like this, and the main difference is that it now contains buttons which link to our facebook.

The mailer is responsive and so we are looking for a solution which will open the desktop version of the site in browser, and when viewing from a mobile, check if the app is installed and open it, and if not open the link in the browser instead.

Through extensive search online and Stack Overflow I've come to realise that there is a difference between how Android and iOS allow this. See below the solutions I have tried so far:

.mobile-link {
   display: none;
}

@media screen and (max-device-width: 767px) and (orientation: portrait) {
    .desktop-link {
        display: none;
    }
    .mobile-link {
        display: block;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
    .desktop-link {
        display: none;
    }
    .mobile-link {
        display: block;
    }
}

<a class='mobile-link' onclick='
setTimeout(function () { window.location = 'www.facebook.com/profileid'; }, 2500);
window.location = 'fb://facewebmodal/=pagename';'>
    <img src='some.url' />
 </a>
 <a class='desktop-link' href='www.facebook.com/profileid'>
    <img src='some.url' />
 </a>

This is not working on iPhone although my previous attempt was (I changed it to make it work for Android, which still doesn't work). In my previous attempt I had :

<a class='mobile-link' onclick='
    setTimeout(function () { window.location = 'www.facebook.com/profileid'; }, 2500);
    window.location = 'fb://profile/id';'>
        <img src='some.url' />
     </a>

Which worked for iOS but not for Android.

From what I understand facebook seems to change how users can target the app in this manner regularly.

Can anyone provide me with the most recent way to target both the iOS and Android app in a link of this kind please?

Have you tried using `fb://facewebmodal/f?href=<<>>`? That works for me on iPhone and Android. This will do absolutely nothing, though, if the user doesn't have the FB app... so I don't know how to work around that. — Daevin, Dec 15 '16 at 16:46
read this [SO post](https://stackoverflow.com/questions/37946195/when-using-facebook-deep-url-to-open-app-both-app-and-webpage-open-together) — Rahul Khurana, Feb 20 '18 at 10:25
Have you tried branch.io? This is the best solution that I found so far, but I don't know if you will accepted use a third part solution — Canato, Feb 20 '18 at 13:19
When you say that you have this working, do you mean that its actually working in the HTML email? Or just testing locally in a browser? I am just a little puzzled by executing JavaScript in an email, since that has generally _never_ worked for me. — mootrichard, Feb 21 '18 at 01:07

score 1 · Accepted Answer · answered Feb 21 '18 at 06:30

Here are the couple of links where you can find your suitable answer:

First you need to check browser is in mobile device or in desktop then apply below link code as per your requirement. here is the browser detect link : - Detecting a mobile browser

1) http://findnerd.com/list/view/How-to-detect-if-an-app-is-installed-in-IOS-or-ANDROID-with-the-help-of-javascript-and-Deep-Linking/4287/

2) How to check if an app is installed from a web-page on an iPhone?

3) iPhone browser: Checking if iPhone app is installed from browser

Let me know if you still need anything else.

Link to open facebook app if app exists, else webpage

1 Answers1