So you are developing your mobile site and were asked to open links inside of apps. Maybe you are just feeling ambitious!

Well this is my instructions for linking app protocols while not completely isolating people who don’t have the apps.

Lets start by discussing the main barriers we have. Inside of native apps we have the ability to test “canOpenURL” but this is lost in browsers. Browsers will not accept any protocols such as twitter:// or fb:// . So what really happens when you send those protocols is the phone does a GET, upon the response it sees the protocol is fb:// or twitter:// or any:// and if it is supported on the phone, it will trigger the respective app to open.

The browser will NEVER get a return from the GET it posted. So there is literally no current way to test if protocols are supported on a phone using any type of javascript or PHP that I know of. (NOTE: if YOU do, comment that would be awesome).

First lets set up our element links. Instead of using hrefs we are going to load both a browser link, and an app protocol link as data attributes. It’s mobile browsers so they should all support data attributes.

<a data-link="fb://profile/YOURID" data-browserLink="http://facebook.com/YOURPAGE" class="fbLink" target="_blank"><img src="<?php bloginfo( 'template_url' ); ?>/images/facebook.png"/></a>

So this is the basic link element. data-link is your link for people with the facebook app. data-browserLink is your link for people who don’t have Facebook. Now that you have that lets move onto the execution part of this. Use the class to trigger a click event in javascript/jQuery. We should also make a global variable and you will find out why in a little bit.

$(document).ready(function(){
			 $(".fbLink").click(testLink);

		   });
//This should trigger a function that you have named "testLink"

var webURL = '';

Now write your function.

What it should essentially do is:

Change your document location to your protocol link, triggering a GET.

Wait for a response and then offer the user the ability to open the link in their mobile browser.

function testLink(){
				//set webURL so that it still has it's definition in the timeout function.
				webURL = $(this).data('browserlink');
 			 document.location = $(this).data('link');
 				 setTimeout(function(){
			    if(confirm('You do not seem to have this app installed. Would you like to view it in your browser')){
 				     window.open(webURL);
 		   }
 			 }, 100);
			}

This is the fix I came up with.

One note: You will probably always get the option to open in browser from the confirm. That’s because the browser never seems to actually receive a response.