How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed

Question

I am hoping there might be some way of detecting whether or not an uri:scheme is registered on a mobile device from within the browser.

IE: I'd like to check if the facebook, twitter, pinterest apps are installed and can be launched from their associated uri:scheme.

if(fb_isInstalled) {     // href="fb://profile/...." } else {     // href="http://m.facebook.com/..." } 

Basically if the user has installed facebook, then launch the app, but fall back to the mobile version of the fb website if the app is not installed.

Answer 1

I think I've got a working solution.

 <!-- links will work as expected where javascript is disabled-->  <a class="intent"        href="http://facebook.com/someProfile"        data-scheme="fb://profile/10000">facebook</a> 

And my javascript works like this.
note: there's a little jQuery mixed in there, but you don't need to use it if you don't want to.

(function () {      // tries to execute the uri:scheme     function goToUri(uri, href) {         var start, end, elapsed;          // start a timer         start = new Date().getTime();          // attempt to redirect to the uri:scheme         // the lovely thing about javascript is that it's single threadded.         // if this WORKS, it'll stutter for a split second, causing the timer to be off         document.location = uri;                  // end timer         end = new Date().getTime();          elapsed = (end - start);          // if there's no elapsed time, then the scheme didn't fire, and we head to the url.         if (elapsed < 1) {             document.location = href;         }     }      $('a.intent').on('click', function (event) {         goToUri($(this).data('scheme'), $(this).attr('href'));         event.preventDefault();     }); })(); 

I also threw this up as a gist that you can fork and mess with. You can also include the gist in a jsfiddle if you so choose.

---

Edit

@kmallea forked the gist and radically simplified it. https://gist.github.com/kmallea/6784568

// tries to execute the uri:scheme function uriSchemeWithHyperlinkFallback(uri, href) {     if(!window.open(uri)){         window.location = href;     } } 

// `intent` is the class we're using to wire this up. Use whatever you like. $('a.intent').on('click', function (event) {     uriSchemeWithHyperlinkFallback($(this).data('scheme'), $(this).attr('href'));     // we don't want the default browser behavior kicking in and screwing everything up.     event.preventDefault(); });