Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am working on a mobile friendly website and liked the idea of having my URLs open in native apps; like say to Google Maps or Facebook using custom URI protocols eg fb:// or comgooglemaps://. Unfortunately on a desktop the browser (Chrome for example) doesn't know what fb:// means so those links do absolutely nothing. I need to add some sort of fall back like:

<a href="fb://profile?id=1234" fallback="http://facebook.com"> click here </a> 

Unfortunately spending all day on Google has turned up not a single solution. Currently the only work-a-round I can come up with is to make 2 sets of links and display or hide a given link based on media queries. This sounds like a sloppy solution, hopefully someone else here has a better idea.

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

I think I've got a working solution. (see http://stackoverflow.com/a/13675901/984234)

 <!-- 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.
https://gist.github.com/ChaseFlorell/5119047

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.