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?

Answer 1

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.