1

How do I make a link on a website that has two possible outcomes depending on which type of device you are using (mobile app vs. native).


Mobile 

<a href="fb://profile/6815841748">Facebook</a>
<a href="instagram://user?username=barackobama">Instagram</a>
<a href="twitter://813286">Twitter</a>

If clicked on desktop, I get: "There is no application set to open the URL"


Native 

<a href="https://www.facebook.com/6815841748">Facebook</a>
<a href="https://www.instagram.com/barackobama">Instagram</a>
<a href="https://www.twitter.com/813286">Twitter</a>

This redirects to social media site in browser; not in app for mobile.


I'm not sure if this is something I can do with pure HTML5 or use jQuery/Javascript?

I also don't know if I need to write mobile-app URLs specific to each OS (iOS/Android/Windows,etc). I only have iOS to test on.

Note: I'd prefer not to use CSS width, because I feel it is not best practice. This easily breaks if a desktop user clicks the link using split screen or a resized window.

user122552
  • 71
  • 3
  • 9

3 Answers3

3

The issue with using CSS media queries for this is that if the user do not have the app installed, it won't do anything (or in case of Android, it redirects the user to the app on the Play Store).

Hence my advice is to use Javascript, check the userAgent string, and set the links through that. Use a timeout delay or a timer to check to see if the user is still on the page after they clicked the link. If they are, that means they don't have the app installed, hence you can then redirect them to the regular page.

For examples or gists, see the following:

How i can make crossbrowser native-app urls with http url fallback on website?

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

https://webmasters.stackexchange.com/questions/47161/app-uri-scheme-fallback-urls

Community
  • 1
  • 1
trekforever
  • 3,914
  • 25
  • 29
1

You can use bootstrap Responsive-utilities class to achieve this:

http://getbootstrap.com/css/#responsive-utilities

<a class="visible-xs" href="fb://profile/6815841748">Facebook</a>
<a class="visible-xs"  href="instagram://user?username=barackobama">Instagram</a>
<a class="visible-xs" href="twitter://813286">Twitter</a>

Web

<a class="hidden-xs" href="https://www.facebook.com/6815841748">Facebook</a>
<a class="hidden-xs" href="https://www.instagram.com/barackobama">Instagram</a>
<a class="hidden-xs" href="https://www.twitter.com/813286">Twitter</a>
Afsar
  • 3,104
  • 2
  • 25
  • 35
-1

It can be done with css

Mobile

<a class="mobile" href="fb://profile/6815841748">Facebook</a>
<a class="mobile" href="instagram://user?username=barackobama">Instagram</a>
<a class="mobile" href="twitter://813286">Twitter</a>

Web

<a class="web" href="https://www.facebook.com/6815841748">Facebook</a>
<a class="web" href="https://www.instagram.com/barackobama">Instagram</a>
<a class="web" href="https://www.twitter.com/813286">Twitter</a>

CSS

.mobile{
  display:none;
}

@media only screen and (max-width: 1024px) {
  .mobile{
    display:block;
  }
  .web{
    display:none;
  }
}

Make sure you put both set of hyperlinks on the webpage.

Gary Holiday
  • 3,297
  • 3
  • 31
  • 72
  • What about tablets ? There is another possibility that user does not have specific application installed, not sure how browser will react! – Rayon Oct 30 '15 at 05:12
  • I updated my answer to include tablet detection. As for how the browser would react if the user does not have the application installed I suggest you simply try it out. Delete your facebook or instagram app and then click on the link. Personally I don't think it will be a problem. – Gary Holiday Oct 30 '15 at 05:17
  • I updated my answer and simplified the CSS. If this does not work then play around with the `max-width:` – Gary Holiday Oct 30 '15 at 05:23
  • My concern is not about CSS, its about later part of my comment! – Rayon Oct 30 '15 at 05:24
  • As for your second question I suggest creating a new post or research it because it is a completely different problem. – Gary Holiday Oct 30 '15 at 05:28