2
<a class="grey-text text-lighten-3" target="_blank" href="javascript:void(0);" onclick="document.write(yourOS())">Instagram</a>



function yourOS() {
var ua = navigator.platform.toLowerCase();
if (ua.indexOf("android") != -1) {
    document.write(.link("instagram://user?username=owendunnigan"));
} else {
    .link("http://www.instagram.com/OwenDunnigan");
}
}

I am trying to deep link apps into my website, but I can't figure out how to have it go to regular old Instagram on the computer, but then go to the app on Android or iOS device. I know that the links work because I tried them out individually.

Owen Dunnigan
  • 35
  • 1
  • 1
  • 6

3 Answers3

5

I would approach this in a different manner. Instead of onclick checking the source, I would do this onload. So:

    <script>
    function onLoad(){
       var urlLink = "http://www.instagram.com/OwenDunnigan";
       var urlLink2 = "http://www.twitter.com/OwenDunnigan";
       var urlLink3 = "http://www.facebook.com/OwenDunnigan";
       var ua = navigator.userAgent.toLowerCase();
       var isAndroid = ua.indexOf("android") > -1;
       if(isAndroid) {
          urlLink = "instagram://user?username=owendunnigan";
          urlLink2 = "twitter://user?username=owendunnigan";
          urlLink3 = "facebook://user?username=owendunnigan";
       }
       document.getElementById('yourLink').setAttribute('href', urlLink);
       document.getElementById('yourLink2').setAttribute('href', urlLink2);
       document.getElementById('yourLink3').setAttribute('href', urlLink3);
    }
    window.onload = onLoad;
    </script>
    
    <a id="yourLink" class="grey-text text-lighten-3" target="_blank">Link</a>

I tested this on my android device / laptop and it worked for both.

Edit: Down and dirty way. You could make a more OOP style by having a function for the onload function to call passing in the variables, but for simplicity, this does the trick.

Edit2:

<script>
        function getMobileOperatingSystem() {
           var userAgent = navigator.userAgent || navigator.vendor || window.opera;
           if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
           {
              return 'iOS';
           }
           else if( userAgent.match( /Android/i ) )
           {
              return 'Android';
           }
           else
           {
              return 'unknown';
           }
        }

        function onLoad(){
           var urlLink1 = "http://www.instagram.com/OwenDunnigan";
           var urlLink2 = "http://www.twitter.com/OwenDunnigan";
           var urlLink3 = "http://www.facebook.com/OwenDunnigan";
           switch(getMobileOperatingSystem()){
               case 'Android':
                    urlLink1 = "instagram://user?username=owendunnigan";
                    urlLink2 = "twitter://user?username=owendunnigan";
                    urlLink3 = "facebook://user?username=owendunnigan";
                    break;
               case 'iOS':
                    urlLink1 = "instagram://user?username=owendunnigan";
                    urlLink2 = "twitter://user?username=owendunnigan";
                    urlLink3 = "facebook://user?username=owendunnigan";
                    break;
               default:
                    break;
            }
           document.getElementById('yourLink1').setAttribute('href', urlLink1);
           document.getElementById('yourLink2').setAttribute('href', urlLink2);
           document.getElementById('yourLink3').setAttribute('href', urlLink3);
        }
        window.onload = onLoad;
        </script>
        
        <a id="yourLink1" class="grey-text text-lighten-3" target="_blank">Link1</a>
        <a id="yourLink2" class="grey-text text-lighten-3" target="_blank">Link2</a>
        <a id="yourLink3" class="grey-text text-lighten-3" target="_blank">Link3</a>

Cleaned up the code and rolled in the function from here: Detecting iOS / Android Operating system You can add other systems by simply expanding the detect function and adding case statements. Granted, I didn't add a default case statement which you normally do, but I invoked the variables first, so no reason to reset them in my opinion, but you could do a lot more with it. Let me know if this doesn't work.

Munsterlander
  • 1,356
  • 1
  • 16
  • 29
  • So, I was trying to add 2 more sites, I have a Tumblr and twitter I would like to link to, so I added different id's to all the links, set the links to different addresses but it will only set the property for the last script wich is twitter. Do I need to change something for it to work with multiple properties going to different places? – Owen Dunnigan Jan 31 '16 at 23:13
  • I edited the above. There is a much more elegant way of doing it, but for a quick and dirty way, this gets the job done. – Munsterlander Jan 31 '16 at 23:17
  • So, for iOS, would I jsut switch it to isiOS where it says isAndroid and then switch "android" to "iOS"? – Owen Dunnigan Feb 01 '16 at 00:09
  • No, that won't work as the user-agent isn't iOS, it's more specific than that. I have added code to the solution above. – Munsterlander Feb 01 '16 at 05:14
1

The switch from Munsterlander solution could be written like this in order to avoid duplicates:

switch(getMobileOperatingSystem()){
               case 'Android':
               case 'iOS':
                    urlLink1 = "instagram://user?username=owendunnigan";
                    urlLink2 = "twitter://user?username=owendunnigan";
                    urlLink3 = "facebook://user?username=owendunnigan";
                    break;
               default:
                    break;
            }

Sorry for not replying to the solution above but I can't.

pustiul500
  • 55
  • 11
0

you can use branch.io which it way easier to implement deeplink

MOHD DANISH
  • 11
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – skr Aug 02 '22 at 16:44