jonathantneal/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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>


## RECOMMENDATION.html
<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>
	<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>