Native URL Schemes
To open an app directly from a website, you can use native URL schemes. You may be familiar with the mailto scheme which launches an email client on the user's device via a url like mailto:myemail@mydomain.com, but may not know that this concept also extends to third-party apps.
By using native URL schemes, you can make social sharing links on mobile and tablet devices open directly into specific views within apps. For example, this url would open the native Twitter app to a profile page on iOS and Android: twitter://user?screen_name=chrisawren.
This approach is the most direct way to deliver a user to a native app, but it comes at the price of a potential alert on iOS, a 404 page on Android, or a prompt to search for an app on Windows Phone 8 if the user doesn't have the app.
On the leftabove are the results of a user clicking on a native link without having the corresponding native app installed:
iOS Smart Banners
Websites can link into their corresponding apps on iOS using smart banners. Smart banners are smart in the sense that they are aware if you have an app installed so that they either prompt you to open the app or install it.
A cool feature of smart banners, which is not implemented on many major social media platforms today, is the ability to map a web url to a specific view within a native app. For example you could link someone to your Twitter profile page on the web and allow them to optionally open your profile in the iOS app if Twitter implemented smart banners withapp-arguments metadata.
Android Intents
Android has a concept called intents where apps register what types of URLs they can respond to, and whenever a user requests a resource that matches one of the intents, the app is listed among other apps for the user to open.
To the left is the result of clicking on a link with the mailto URL scheme on a Samsung Galaxy S3.
As a developer this is helpful, because you can use regular http:// web URLs for social media apps that support http URL intents and allow the user to choose between opening the link via a browser or app. It also gracefully degrades to going directly to the website if the user doesn't have a particular app installed, eliminating the problem of potential error pages when using native URLs.
Browser Sharing Icons
Some sites display popups on iOS Safari to coach the user about using the browser's native social sharing button to add their site to their phone's home screen. On the left is an example from the Financial Times web app.
Typically this has been used to remind users that they can add a site to their home screen for easy access, but it could also be used as a technique to remind the user about the native share provided by the browser.
On Android this is particularly advantageous, because it lets the user choose how to share based on the apps they have installed, whereas iOS only provides you a few sharing options. However, the location and appearance of the icon for native browser sharing is not as predictable on Android since it is such an open OS with many hardware vendors and versions in the wild.
Browser/OS Native Sharing icons
You can detect the browser via window.navigator.userAgent and use the appropriate browser icon if you opt to use this sharing technique. Click here to download a .zip with all the below browser sharing icons.
iOS7 Safari
Android Chrome
iOS6 Safari
Windows Phone 8
Native app entry points for major social media websites
| Mobile Website | iOS smart banners | Mobile site auto redirects to app | Mobile site prompts users to open app |
|---|---|---|---|
| m.facebook.com - 1/26/14 | |||
| m.twitter.com - 1/26/14 | Prompts user to install | ||
| touch.www.linkedin.com - 1/26/14 | Prompts user to install | ||
| m.pinterest.com - 1/26/14 | After user agrees to open web links within app | Prompts user to open links with app in future | |
| tumblr.com - 1/26/14 | Prompts user to install or open | ||
| instagram.com - 1/26/14 | Prompts user to install or open |
