Skip to content

Instantly share code, notes, and snippets.

@jonathantneal
Last active Oct 9, 2017
Embed
What would you like to do?
External Schemes

External Schemes

An external scheme is a link on a webpage that moves you to an application outside of the browser.

Most links use the http or https scheme, which is handled inside of the browser.

<a href="http://example.com">Visit example.com</a>

We use external schemes all the time, not always knowing what to call them. You’ve probably written one to draft an email.

<a href="mailto:me@example.com">Email me@example.com</a>

Or maybe you’ve written one to place phone calls.

<a href="tel:+17146334816">Call (714) 633-4816</a>

Maybe you’ve even written one to launch your phone’s map application.

<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Locate 112 E Chapman Ave Orange, CA 92866</a>

Without further adieu, let’s get to know common external schemes and what they do.

Common External Schemes

Mailto

The mailto: scheme lets you automatically draft an email. It saves you the time and effort of copying an email address into your email application.

Syntax

mailto:[address]?[options]
  • address: the comma-separated list of email addresses getting the message.

Options:

  • subject: the title or description of the message.
  • body: the content of the message.
  • cc: the comma-separated list of addresses getting a copy of the message.
  • bcc: the comma-separated list of hidden addresses getting a copy of the message.

Examples

An email.

<a href="mailto:me@example.com">Email me@example.com</a>

An email with a subject.

<a href="mailto:me@example.com?subject=Bears">Email me about Bears</a>

An email with CCs.

<a href="mailto:me@example.com?subject=Bears&cc=spouse@example.com,kids@example.com">Email me about Bears and copy my family.</a>

An email with a subject.

<a href="mailto:me@example.com?subject=Bears&body=Bears+eat+beets.">Email me something important about Bears</a>

Tel

The tel: scheme lets you automatically dial a phone number. It save you the time and effort of copying a phone number into your phone application.

Syntax

tel:+[prefix][number];[options]
  • prefix: the international telephone prefix for the country being dialed. (USA is 1, UK is 44)

  • number: the telephone number to be dialed.

Options:

  • ext / postd: the numbers to be dialed after a connection has been made.

Examples

A telephone number.

<a href="tel:+17146334816">Call (714) 633-4816</a>

A telephone number with an extension.

<a href="tel:+17146334816;ext=1">Call (714) 633-4816 ext 1</a>

Notes

Callto

You may see an alternative callto: scheme floating around the interwebs. tel: is the official scheme for telephone numbers. callto: is a proprietary scheme used by Skype and Microsoft. Since most callto: links are appropriately parsed, some developers choose to use in the hope of expanding their compatibility. On this subject, Stuart Parr’s asks:

Do you encourage standards compliance by using tel: or pander to the embrace and extend ethos of Skype and Microsoft and use callto:?

The answer is simple; use tel:.

iOS Safari

iOS Safari searches for phone numbers in regular text and automatically marks them up as tel: links. If your site contains sequences of numbers that may be misinterpreted as phone numbers, consider disabling this feature by using the format-detection meta tag.

<meta name="format-detection" content="telephone=no">

Maps

The maps: scheme lets you automatically find a location on a map. It saves you the time and effort of copying an address or location into your map application.

Syntax

maps:?[options]

Options:

  • q: the address or location to find.
  • saddr: the source address to be used for driving directions.
  • daddr: the destination address to be used for driving directions.
  • near: the address or location near the address or location being found.
  • ll: the comma-separated latitude and longitude coordinates to center the map.
  • t: the type of map to display.
  • z: the level of zoom to use.

Examples

A location.

<a href="maps:?q=112+E+Chapman+Ave+Orange,+CA+92866">Find the Orange International Street Fair</a>

Driving directions.

<a href="maps:?daddr=112+E+Chapman+Ave+Orange,+CA+92866">Get directions to the Orange International Street Fair</a>

A location near another location.

<a href="maps:?q=Starbucks;near=112+E+Chapman+Ave+Orange,+CA+92866">Find a Starbucks near the Orange International Street Fair</a>

Proprietary Schemes

A proprietary scheme is an external scheme associated with specific, third-party application. Proprietary schemes are used infrequently on the web, because most computers and phones do not come with that particular third-party application installed. The best practice to launch proprietary schemes is to confirm the launch with the user.

Proprietary schemes are useful stopgaps for linking between a browser and an application, especially on mobile devices. For example, most mobile users aren’t logged into Facebook’s website because they use a proprietary Facebook app. Therefore, linking those users to your Facebook “web” page isn’t terribly useful. This is a situation when using a proprietary scheme is useful to automatically launch your Facebook page from within the Facebook app.

For an example of JavaScript appropriately launching a third-party scheme, see RECOMMENDATION.html.

For a list of hundreds of proprietary schemes, visit handleopenurl.com.

Facebook

The fb: scheme lets you automatically go to a page in the Facebook application. It saves you the time and effort of opening Facebook and searching or surfing for that page.

Syntax

fb://[options]

Options:

  • album/[ID]: the album with the corresponding ID.
  • chat/[ID]: the conversation with the user or group with the corresponding ID.
  • event/[ID]: the event with the corresponding ID.
  • post/[ID]: the post with the corresponding ID.
  • profile/[ID]: the user or group or page with the corresponding ID.
  • upload/checkin/[ID]: the checkin with the corresponding ID.
  • video/[ID]: the video with the corresponding ID.

Examples

A Facebook page. (use proprietary schemes with extreme caution)

<a href="fb://profile/119703784116">Orange International Street Fair on Facebook</a>

Twitter

The twitter: scheme lets you automatically go to a page in the Twitter application. It saves you the time and effort of opening Twitter and searching or surfing for that page.

Syntax

twitter:/[options]

Options:

  • user?screen_name=[SCREENNAME]: the user with the corresponding SCREENNAME

  • user?id=[ID]: the user with the corresponding ID

  • post?message=[TEXT]: the new post page populated with TEXT

  • in_reply_to_status_id=[ID]: the status with the corresponding ID being replied to

  • status?id=[ID]: the status with the corresponding ID

Examples

A Twitter page. (use proprietary schemes with extreme caution)

<a href="twitter:/user?screen_name=oisfinc">Orange International Street Fair on Twitter</a>

<h1>Working with third-party schemes</h1>
<p>Directly linking to third-party schemes is highly discouraged. Always link to the appropriate <code>http</code> resource, and use a <code>data-external</code> attribute to link to the alternative scheme.
<p><a href="//facebook.com/119703784116" data-alturi="fb://profile/119703784116">Facebook</a>
<p><a href="//foursquare.com/v/4e4b3090fa7671a85ce77d0e" data-alturi="foursquare://venues/4e4b3090fa7671a85ce77d0e">Foursquare</a>
<p><a href="//twitter.com/oisfinc" data-alturi="twitter:/user?screen_name=oisfinc">Twitter</a>
<p><a href="//yelp.com/biz/orange-international-street-fair-orange" data-alturi="yelp:/biz/orange-international-street-fair-orange">Yelp</a>
<p>Now, a simple onclick function can handle launching external uris.
<script>
window.addEventListener('click', function (event) {
var target = event.target;
// bubble up to the nearest anchor
while (target && target.nodeName !== 'A') {
target = target.parentNode;
}
// if an anchor exists with an alternative uri scheme and the user would like to launch it
if (target && target.hasAttribute('data-alturi') && confirm('Launch the external application?')) {
// cancel the href
event.preventDefault();
// launch it
location.href = target.getAttribute('data-alturi');
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment