A deep link is a link that opens up a specific section of a mobile app. If the app is not installed, I will show you how to then fallback to the equivalent website link or open the app store page.
You can generate an accurate deep link using this tool: https://app.urlgeni.us
Below are some of the available Deep Links for Facebook and Twitter
fb://profile fb://friends fb://notifications
twitter://timeline twitter://user?id=12345 twitter://status?id=12345
How to fallback in case the app isn’t installed
If you don’t do anything else except sticking the deep link into your href, then it will automatically take you to the app store if you don’t have that particular app already installed.
If you want your users to be take to the equivalent website page, you will have to use javascript. I use the mobile-detect.js library to detect if the device is an Android or Non-Mobile. By default the link points to the iOS Facebook app deep link. If it detects AndroidOS it will point to the android compatible deep link. And, if it detects non-mobile, it will point to the facebook fan page on the website.
<script src=”//cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.3.0/mobile-detect.min.js”></script>
window.onload = function() {
var md = new MobileDetect(window.navigator.userAgent);
if (!md.mobile()) {
document.querySelector('a').href = "https://facebook.com/allurewebsolutions";
return false;
}
if (md.os() === "AndroidOS") {
document.querySelector('a').href = "fb://page/150385858312170";
return false;
}
}
Here’s a little playground to see how it works with our Facebook fan page:
See the Pen Link to Mobile App with Website Fallback by Mike Doubintchik (@allurewebsolutions) on CodePen.
Hi,
This solution seems to not work if the application is not yet installed on the device. I am using an Iphone 4S and clicking on this link does pretty much nothing. Do you have a solution if the application is not installed?
If the application is not installed, just make the default link go to the Facebook website (the one in the HTML). That will work in all cases, even when the mobile app is not installed.
For my CodePen example, I just used the iOS link as default in order to show how to detect non-mobile or Android devices and change the link in those scenarios.
If you need any help with specific code, just let me know 🙂