Opening Android app using tag in html

Question

Using <a> tag and window.location(), how to open the android app when the link is clicked else use the browser.

For example, i have the facebook link: fb://profile/10001901208 and https://www.facebook.com/profile.php?id=10001901208.I tried onclick() method but it seems to work differently.

<script>
window.onload = function() {
  if(navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    window.location = "<TWITTER MOBILE DEEPLINK>"; 
    setTimeout(function(){
        window.location = "<LINK TO TWITTER ONLINE>";
    }, 50);   
  } else {
    window.location = "<LINK TO TWITTER ONLINE>";
  }
}
</script>

I tried @media screen and hide and show the tag but it didnt work as expected. Since it is predetermined, if the app is not installed it says; Page couldnt load.

<a href="fb://profile/10001901208" target="_blank" class="mobile"><li class="fa fa-facebook"></li></a>

<a href="https://www.facebook.com/profile.php?id=10001901208" target="_blank" class="web"><li class="fa fa-facebook"></li></a>

I expect the output of opening the app if installed else open in the browser using window.location() and if possible with <a> tag.

https://stackoverflow.com/questions/50565721/does-not-open-app-by-deep-link-in-browser-android try that — Benjamin, Jan 14 '19 at 14:48
@Benjamin that is Android man, what i mean is my website link opening Twitter profile if app is installed else just the browser. — Jose Harrison Batoctoy, Jan 14 '19 at 14:51
@Benjamin yes. Correct me if I am wrong, but I think that works in (custom)Android Apps — Jose Harrison Batoctoy, Jan 14 '19 at 14:54
@Benjamin i want to open Twitter profile in the Twitter App if installed else the browser. — Jose Harrison Batoctoy, Jan 14 '19 at 14:55
In the link you can found a HTML code who (look like) open app from deeplink, I think you can adapte that with twitter or any other app ( replace with the correct informations in link of course) — Benjamin, Jan 14 '19 at 14:59
@Benjamin I tried that but the thing is idont know how to write the code. If I use onclick() method the target="_blank" attribute will be neglected and I dont want that to happen — Jose Harrison Batoctoy, Jan 14 '19 at 15:10
@JoseHarrisonBatoctoy see [Detect if Android app has been installed on the device using a mobile web page](https://stackoverflow.com/questions/12856773/detect-if-android-app-has-been-installed-on-the-device-using-a-mobile-web-page). Believe the app is installed! — shingo, Jan 14 '19 at 15:15
@shingo so the window.location() code above mentioned will run the browser and the app? — Jose Harrison Batoctoy, Jan 14 '19 at 15:18
You can shorten your URL and do facebook.com/ID_HERE. However, you also need to make sure you have the right ID number....i just tested it, and it looks like you have the wrong ID number. if you were to right click on someones profile image, and then click copy link address. you will see that the URL has a fbid, an id, and a set=a. make sure you are using the id number and not the fbid number — letsCode, Jan 14 '19 at 15:19
@shingo one last question please how can I use window.location() using href attribute? — Jose Harrison Batoctoy, Jan 14 '19 at 15:19
@soldforapp thanks! does it work in mobile and desktop browser? — Jose Harrison Batoctoy, Jan 14 '19 at 15:20
@soldforapp so if I click the link for my facebook page using my mobile browser it will open the facebook app? — Jose Harrison Batoctoy, Jan 14 '19 at 15:23
you have to detect its a mobile phone first. (looks like you are doing that). if its a mobile device, make the link be < a href ="fb://...." otherwise the link can be href="facebook.com/...." — letsCode, Jan 14 '19 at 15:24
@soldforapp yeah but the thing is if I use the window.location() the target="_blank" attribute will not work. LIke this — Jose Harrison Batoctoy, Jan 14 '19 at 15:26
@JoseHarrisonBatoctoy I'm not talking about or location, I mean you can't detect if an app is installed. So if you want to open the app, use fb:// url, and believe the user always have facebook installed. — shingo, Jan 14 '19 at 15:27
@shingo yes we cant detect now. I tried the code above and i think i will do both its just that the app is a priority — Jose Harrison Batoctoy, Jan 14 '19 at 15:31

letsCode · Answer 1 · 2019-01-14T15:36:37.843

0

You need to find out if the user is using a cell phone, or a computer.

This is how I do it.

<script>
    function getMobileOperatingSystem() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        var putLinksInDiv = document.getElementById('putLinksInDiv');
        //Windows Phone or Android or iOS
        if (/windows phone/i.test(userAgent) || /android/i.test(userAgent) || (/iPad|iPhone|iPod/.test(userAgent) &&!window.MSStream)) {
            putLinksInDiv.innerHTML = "<a href=\"fb://profile/123\">link</a>";
        } else {
           putLinksInDiv.innerHTML = "<a href=\"http://www.facebook.com/123\">link</a>";
        }
    }
</script>

In your body do this.

<body onload="getMobileOperatingSystem();">

And then in your HTML, add a div for the links.

<div id="putLinksInDiv"></div>

edited Jan 14 '19 at 15:36

answered Jan 14 '19 at 15:34

letsCode

2,774
1
13
37

too bad if the app isnt installed then it will say Page couldnt load – Jose Harrison Batoctoy Jan 14 '19 at 15:35
but thank you man, it really helped me. Like, it gives me an idea what the syntax looks like. Thanks! – Jose Harrison Batoctoy Jan 14 '19 at 15:36
@JoseHarrisonBatoctoy the easiest way to find the ID of a profile is to right click on their profile image. click on copy link address. Paste this URL somewhere. you will notice that the URL has 3 params (fbid/id/set). For the profile you are using, use the id param. i tested, it works. – letsCode Jan 14 '19 at 15:38

Opening Android app using tag in html

1 Answers1