Sharing Links from IE10 on Windows 8


Sharing a link to a Web page is a common activity on the PC, and it gets better with IE10 on Windows 8. One of the new features on Windows 8 is the Share charm, which allows you to seamlessly send content between apps on your PC. Previously, if you wanted to share an interesting article with your friend, or post a funny picture on your blog, you’d copy the link from the address bar, switch to a different site or app, and then paste it. Now, with the Windows 8 Share charm, you can share directly from the browser without ever leaving your current page.

When you use the Share charm to share a site from the browser, IE10 creates two data formats that contain relevant content – the URI, and some HTML that includes a rich representation of the page. Here are two examples of data that get shared for a YouTube video:

The URI (of the current site)

https://www.youtube.com/watch?v=4DbgiOCTQts

The HTML (with a link preview)

An example of IE10's rich preview of Web pages
An example of IE10’s rich preview of Web pages

Both of these data formats are created for an “implicit” share, which is the name for what happens when you share the site that you are currently viewing. Since Web pages can be represented as hyperlinks or a rich HTML link preview, IE10 includes both types of data. Of course, if you aren’t sharing the whole page, but rather, some content that you’ve highlighted, IE10 will share the HTML of your selection instead of the URI and the link preview. In this case, sharing a selection would be called an “explicit” share, and does not include the link. This post describes the link sharing case, how IE10 participates in the Windows 8 Share contract using HTML, and how Web developers can create link previews with just a few meta-tags.

The Share Charm and IE10

Here’s a video of how a user might share links from the browser to an app that uses HTML.


Sharing from IE10: Link Previews in Action

In this video, “Stash” is a sample link saving app that makes use of the Windows share charm with HTML. The sample app simply supports the HTML data format for sharing, and IE provides the link preview. Link previews are HTML that contains a title, image, and description for every shared link. This makes it easy for you to recognize the site content. If you have Windows 8 Consumer Preview and Visual Studio 11 Beta, you can download and run Stash on your own PC. Stash integrates with the Windows 8 Share contract as a target app, as you can see below. Below, you can see a high-level diagram that shows how links are shared from IE10.

Diagram showing sharing a link from IE10 to target apps, using the Share charm’s data package
Diagram: Sharing a link from IE10 to target apps, using the Share charm’s data package

Windows 8 Share charm handles the coordination between the source and target apps to provide an integrated sharing experience across all apps. This removes the need for target and source apps to be aware and coordinate between each other.

Sharing the Web is Better, Start to Finish

The Web is made up of HTML. That’s why HTML is one of the most important data formats in IE10’s integration with the Share contract. IE10 creates link previews to both provide a better sharing experience for users, and to help connect Web developers to Windows 8 Share. With a little extra meta-data markup, sites can define what information is included in their link previews. On the other end of the share contract, target apps that support the HTML data format can get the full experience of contextual Web hyperlinks without having to parse a single site. The end result is a rich, modern, and fluid sharing experience, from end to end.

Screenshot of target apps available in Share pane
Screenshot of target apps available in Share pane

Screenshot of Stash’s Share Pane
Screenshot of Stash’s Share Pane

When you share a Web site, IE10 parses that site to create a link preview. In the example above, it’s a short snippet of content that represents a movie page on IMDb. The goal of sharing HTML, in addition to the URI, is to share the best possible representation of what the user intended to share, so IE10 creates link previews for all implicit shares. The benefits of HTML are that it can include more information than a URI, and the content of the HTML is more meaningful than a hyperlink. In the words of Leslie Knope, no one wants to share that “complicated nonsense.”

Frame grab from the NBC show Parks and Recreation. Character Ron Swanson is holding a Knope for City Council sign most of which is long, complicated URL. Character Leslie Knope is saying, "So, as you can imagine, we would have never ordered a sign with all this complicated nonsense because, you know, we’re not insane."
From NBC’s Parks and Recreation, Season 4, Episode 16

So, as you can imagine, we would have never ordered a sign with all this complicated nonsense because, you know, we’re not insane.

Depending on the target app, though, sometimes rich content is not the best kind of data, and a URI is more useful. For example, blogging apps can take advantage of rich HTML content, and SMS apps would do best to use the URI. Developers of Metro style apps choose the data format(s) that make most sense for their app to receive, following the Windows 8 Share guidance.

Sites Use Markup to Define What IE10 Shares

Since IE10 uses existing markup meant for sharing on the Web, many sites will already look great when sharing HTML link previews on Windows 8. We support the Open Graph protocol as a simple way to add meta-data about the page. When users share sites on Facebook and through Windows 8 and IE10, you can use OpenGraph to control the way your Web page appears to others.

Here’s an example of an IE test drive demo that uses this markup:

<head>

<meta name=”description” content=”Brick Breaker TestDrive Demo Game, Performance and Touch benchmark” />

<title>Brick Breaker</title>

<meta property=”og:image” content=”Views/Homepage/Icons/BrickBreaker.png” />

</head>

IE looks for the following tags in the site’s markup to create the page’s link preview.

Property HTML tag Character limit
Title 1 <meta name=”title” content=”Insert Site Title Here” /> 160
Title 2 <title>Insert Site Title Here</title> 160
Description <meta name=”description” content=”Insert Site Description Here” /> 253
Image 1 <meta property=”og:image” content=”insert_image_link_here” /> 2,048 (limit for image URI)
Image 2 <link rel=”image_src” href=”insert_image_link_here” /> 2,048 (limit for image URI)
Image 3 <meta name=”image” content=”insert_image_link_here” /> 2,048 (limit for image URI)
Image 4 <meta name=”thumbnail” content=”insert_image_link_here” /> 2,048 (limit for image URI)

Note that this is the order in which we parse for each attribute. For example, if both Image 1 and Image 2 tags are present, we’ll use the Image 1 tag. Additionally, if more than one tag of any type is present, we use the first one you list in your markup.

For character limits, if the description is longer than the maximum length, IE will put a “…” at the end in the preview.

Make sure to include at least one of each property in your site markup to get your pages looking great for sharing in Windows 8. See this demo on the IE Test Drive site for more on how the markup works.

Apps Get the Benefit of a Powerful Web Browser

If your app supports the Share target app contract, you should consider whether it makes sense for it to support HTML as a shared data format. Apps that use HTML can benefit from the link previews shared by IE10 because IE10 does all of the heavy lifting. It parses the site and puts together a short and informative link preview, and all your app needs to do is display and host the HTML. The hyperlink is embedded within the preview, so it functions just like a Uri, but looks much better. This way, apps that don’t have the resources to parse the Web to condense pages into small, rich previews, can still display contextual links as HTML.

Many apps, in addition to IE10, will share HTML. Target apps that accept HTML must be agnostic about the source of the shared data. As noted above, IE10 shares HTML for both implicit and explicit sharing scenarios, so sometimes the HTML is a link preview, and sometimes it’s a user selection. In either case, the content of the HTML is the best possible representation of what the user intended to share. Here’s a snippet of what the link preview HTML generated by IE10 will look like when it’s added to the Share charm’s Data Package:

<html>

<body>

<!–StartFragment–>

<style>

/* IE10\uc1\u8217?s metro-style CSS attributes */

</style>

<a class=”snippet-URL” href=”http://site_link_goes_here”>Website Title goes here</a>

<table>

<tr>

<td class=”snippet-image”>

<img src=”image_link_goes_here” />

</td>

<td class=”snippet-text”>Website description goes here </td>

</tr>

</table>

<!–EndFragment–>

</body>

</html>

For an example of an app that uses HTML from IE10, download the sample app “Stash” seen in the video above. This app demonstrates how a Metro style app can use HTML data as a share target.

Here’s a code snippet from the app, which shows how Stash uses HTML sent from the Share charm.

function activatedHandler(eventArgs) {

// In this sample we only do something if it was activated with the Share contract

if (eventArgs.detail.kind

=== Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {

// We receive the ShareOperation object as part of the eventArgs

var shareOperation = eventArgs.detail.shareOperation;

if (shareOperation.data.contains(

Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {

shareOperation.data.getHtmlFormatAsync().then(

function (htmlFormat) {

// Extract the HTML fragment from the HTML format

var htmlFragment = Windows.ApplicationModel.DataTransfer

.HtmlFormatHelper.getStaticFragment(htmlFormat);

// Display the HTML in the Share pane.

id(“htmlArea”).innerHTML = htmlFragment;

});

}

}

}

The above code lets Stash accept HTML when the user selects it as their Share target. For more on developing a Share target app on Windows 8, see the MSDN Quickstart page for receiving shared content.

Happy sharing!

—Alex Feldman, Program Manager, Internet Explorer

Comments (37)

  1. temp says:

    Out of scope but I needed to ask about that. I want my tracking protection list to be synchronized automatically on all my windows 8 machines and also my windows phone. Yes I said my windows phone too.

    Add also paste & go in IE because IE is not always the default browser and when I want to open a link in IE have to do copy > cut > press enter to open the website….

  2. Arieta says:

    @temp: while IE9 has no paste and go, it does have a "jump to copied address" in the context menu. It is cleverly hidden, since it doesn't pop up on highlighted text – you have to copy your address, and then click on an empty part of the site. This is completely backwards thinking, but hey.

    As for the IE Team, I spent all day today looking for workarounds the lack off XMLHttpRequest FormData, so I kind of don't care about some pointless and stupid "share a site with graphics" widget, that takes the title, favicon, and meta description from a site. Also, it would be nice if you'd improve the developer toolbar, it is catastrophic as it is right now compared to Firebug or the built-in Chrome toolbar.

  3. @arieta says:

    the big problem with "jump to copied address" is that it works in the current tab. I'll prefer to open a link in a new tab

  4. JairJy says:

    @Arieta, Thank you so much! I didn't knowing that IE has that feature until you tell us, thank you. I used to use an accelerator for that but since the last redesign of the plugins page for IE I lost track of it, but this solution fixes my problem.

    Sinofsky, please, add a more obvious way to "copy and go" from both IE10 and Desktop IE10. Also, make IE10 shows the tab menu just by hovering the mouse to the top of the screen, I'm getting tired of right-clicking on an empty space. Think about touchpad users!.

    And one more, please let me sort pinned sites on the new tab page, and made a favorites bar or something. Firefox Metro will include one, think about the competence!

  5. So what's new here? The feature already exist on Desktop version of IE. File -> Send.

  6. whale says:

    Is <meta name="og:title" content="Insert Site Title Here” /> supported?

  7. Aaron Powell says:

    Ahhh where was this post yesterday! I spent like an hour trying to work out how to get the HTML and URL from IE that's been shared into my app :P.

    The only thing that you're code snippet doesn't include is dismissing the share operation otherwise it just hangs around (although the MSDN docs I found cover it).

  8. Brenno says:

    Am I happy Microsoft is following its Security Development Lifecycle or this would sound like a potentially bad idea security-wise.

    Making links into HTML is a great way to enhance ones HTML mail, which is the best thing after sliced bread.

  9. Well, I am feeling myself extremely desiring to watch videos on Youtube, share links to WordPress.com, but you should know there is a barrier between them and me which I could not climb over, and why are you, but just challenging my desires? I feel hungry now.

  10. Dave says:

    This is all very interesting but once again Microsoft has majorly missed the mark.

    If I'm highlighting and sharing a snippet of a page I want to share the snippet, AND the URL and possibly even the author… But your tool doesn't handle that.

    Links built into web pages (like we've had and what has worked for the past 5-7 years) work better because you link to other websites in the browser where you are already logged in – this is what plagues mobile apps right now.

    More importantly MSFT has been busy adding fluffy features like this when they could have been fixing IE or the developer tools to work better.

    Why doesn't autocomplete work properly in IE?!?! This has been busted since it was first introduced… Why did this not get fixed first!

    Has windows 8 finally added a start button to the desktop yet? Have all the documented epic failures of windows 8 usage not convinced MSFT that desktop != tablet

    Has Microsoft released the privacy policy on charms yet?! I wouldnt share a thing until I know that MSFT is not tracking my use, compiling analytics etc.

  11. Ric says:

    Many of the OGP meta tags are missing the og: prefix for example:

    <meta name="title" content="Insert Site Title Here” />

    <meta name="og:title" content="Insert Site Title Here” />

    As specified here: http://ogp.me/

  12. NoContent says:

    The assumption here is that I can see the content I want to share. Not having a streaming media player for flash and your own Silverlight video kills Metro IE 10 for me. You may make the excuse that you can always use the desktop version of IE but that's the last thing I want to do on a tablet. People will keep on hating IE with this sort of "support".

  13. John Schroedl says:

    I still believe that the Share charm is out-of-sight, out-of-mind.  I've been using Win8 since the developer preview and have not once even thought to use the Share Charm. Instead, I always go with copy/paste.

  14. Rico Alexander says:

    So how do you simply save an image from a website to your computer in metro ie?

  15. Brian LePore says:

    Will the Opera Speed Dial syntax also be supported for thumbnail images? It's just subbing in "icon" for "image_src" in Image 2's format.

  16. Windows 888 says:

    Although Windows 8 is better, please offer Windows 7 a little early.

    Since it was good for it to be fairly early when a pre-trial was carried out, it is pleasure.

    I will need your help early also for one day! Does it continue using IE9 till then.

    It is strict observance during 2012!!

  17. Greg says:

    So will the ARM tablets be clearly labeled and identified so that we can avoid accidentally buying them?  E.g. will they have stickers on the box indicating that they won't run mobile Firefox or other browser upgrades?

    Likewise for desktop Windows 8 can Microsoft confirm that users will have the ability to completely disable the "Meh"-tro  UI and just load a standard, usable, desired desktop instead?  All we keep seeing is sample videos of Win8 on tablets… the only videos of Win8 on desktops are the fail videos where we get to watch users pull their hair out trying to figure out how on earth to make this new version usable.

  18. Xero says:

    @Greg, some of the WOA tablets are listed here: blogs.msdn.com/…/experiencing-windows-8-touch-on-windows-7-hardware.aspx

    and counting.. if you own lconia you may run WOA on it.. forum.xda-developers.com/showthread.php

    also if you want windows 8 on ipad: http://www.zollotech.com/…/run-windows-8-on-ipad

    Hope this help 8-)

  19. Sean Holmes says:

    Your comment form is broken – now hopefully my browser saved a copy of my post or I'll be very angry

  20. Sean Holmes says:

    Woah woah woah wait!!

    So hold up – your telling us that the real feature of a windows tablet over all the other tablets is that you can flip back into desktop mode to use all your standard desktop apps – BUT that several windows 8 tablets on launch will not only NOT be able to run these existing windows apps BUT will also NEVER RUN existing, purchased Windows apps unless we re-pay for and re-download re-compiled ARM versions of these apps ***IF*** the vendors are so kind enough to even do a re-compiled version of their apps!?!?!?!

    This is atrocious! Beyond despicable software development practices!

    These tablets either need to be yanked from production immediately or Microsoft needs to

    Go back to the drawing board ASAP and find a solution to get these apps working on all windows tablets!

    Failing that Microsoft is going to have to work damn hard to ensure these tablets are clearly labeled as windows tablets ***WITHOUT*** any desktop windows support. "these tablets will NOT run your existing windows applications – only new apps designed for metro.

    For a company that prides itself on backwards compatibility this is an ultimate failure.

    We would much rather have all windows tablets be 100% metro (with flash) vs. only have partial (and not clearly documented) desktop support!

    Sean

  21. Xero says:

    @Sean Holmes, I don't understand why would anyone count on Flash, when the world-wide-web is seariously geared towards HTML5. Even Adobe has released tools to migrate your Flash applications to HTML5. Backward compatibility flash? Well thats a good point but still biz-world wont be hurt without flash now. I would say we should concentrate on giving feedback about HTML5, the missing W3's finalized standards in IE10.

  22. Google Chrome says:

    Chrome has overtaken Internet Exploder as the most used browser in the world

  23. Martijn says:

    Does it have to take up half the screen??

  24. andy says:

    Microsoft Policies in some thing is very mistake .IE is not in windows XP !

    google all users steer to chrome . next stage. steer to android os.with this easy way !

    and Microsoft Becomes :(

    Micro$oft is in thought , how to sell windows 7 or windows 8 ? windows XP don't have any money for our !

    but google on the windows XP sell most Innovation and it's best  kit for google.

    when one user used one APP of any corporation . this user become one partial of that APP and corporation.

    you fail in IE , fail in all thing !

    you fail in innovation , fail in …

  25. andy says:

    I am paid by google for this propoganda.. google rip off the privacy of their users and it supports the evil agenda..sell their consumers privacy, i dont care because im the fanboy of whoever pays me… i will blow that green evil bot if they pay me right!

  26. Walter says:

    @xero while I fully agree HTML5 is a better option there already exists millions of sites using flash for video, Audio, games, font substitution animations, ads etc.

    Steve Jobs had a tiff with adobe and flash and decided to bail on it on iOS.  I own many devices including several tablets that support flash.  On those tablets I get the full web, no compromise .. No separate links to download videos, full sound cloud, etc.  I get royally ticked off when I use my iPad and then hit a wall when the content I want doesnt work on the iPad.

    I think the lack of full web on the iPad is probably one of the main reasons why I prefer my PlayBook tablet over the iPad (true multitasking being the obvious second).

    I am however concerned like most that windows 8 on the desktop is slated to be a massive failure if MSFT insists on forcing desktop users to use Metro.

  27. Nathan says:

    @Walter, I have been experiencing Metro UI since Windows 8 developer preview and worked on some metro style app development as well. All I see is a great merger of desktop and metro UI.

    I am sure the engineers at Microsoft will be happy to take advice from anyone on this site that has ever designed and brought into production so much as a pencil eraser. Until then……. SHHHHHH… The grown-ups are working.

    Aero is old style. Next is Metro. If you dont like it, don't buy it. Besides millions of people out there like the change & "start thinking outside the square"

    I would suggest you to try it out and make your own impartial/unbiased impression about it. Trolls will always oppose whatever Microsoft would develop. So dont read too much of their nonsense… unless you are one of them?

  28. Joey says:

    First off your comment form is broken still – please get one of you thousands of staff members that actually has a clue about web app architecture to have a look at this ASAP!!!

    @Nathan maybe you were absent during all the usability studies done over the past 10 years that clearly indicate that "discoverability" is one of the key factors in having a successful UI.

    Users are going to be stuck on day 1 wondering how on earth to Bo back to the main screen! (as was I until I googled it and saw Chris Pirillo's video explaining why *everyone* will get stuck on this.

    Likewise many users fallback to saving stuff to the desktop to keep frequent items at hand. This paradym is completely lost in windows 8 (and yes I've tried it – deleted it after 4 days… Couldn't stand it any more… And I'm a techie)

    Just as Vista was a complete flop I'll wait till Windows 9 before even contemplating upgrading.

    I would hate to be the PM on the windows 8 team… Better polish up that resume now (and be sure to leave out the involvement with windows 8!)

    Actually if you jump ship now you can make this a positive as you can indicate you wanted to fix it but others were not willing to budge.. Rather that steer the Titanic into the iceberg you saw – you launched the life rafts and took all those willing to build something better off to a safer place.

    #ElCaminoOS #RuinedBeforeReleaseToMarket #WaitingForWindows9

  29. Kondera says:

    It is not compatible with x64????

  30. giuseppe says:

    OT:

    Why is our competition listed in the Flash section, but not our products?

    iecvlist.microsoft.com/…/iecompatviewlist.xml

    Where can we apply for our domains?

    Will the same list be used in Europe?

    Sorry for OT, but this is really important and you have not supplied a dedicated post yet.

  31. William says:

    I'm trying to future proof a tablet/kiosk (e.g. touch based) web application that we've built to ensure that it will work on pretty much all touch screen devices.

    It supports devices like the BlackBerry PlayBook, Apple iPad, Android tablets, as well as IE running in kiosk mode on a touch-screen version of Windows.

    Now the fun part is that for the old IE on Windows case… we provide our own on screen keyboard when fields are focused because… well, the full Windows keyboard with all the function keys, windows key in particular cause us all kinds of grief… and generally kill productivity.

    Since IE10 running in Metro… on Tablets… will have a native on screen keyboard that is very touch friendly… I want to use that rather than force users to use our "hacked" on screen keyboard.

    The trick is that I need to know at the JavaScript level… whether to bind our focus/blur events to input fields and show the onscreen keyboard…

    Luckily in JavaScript I can do some RegEx Fu on the userAgent to determine if it is a known device with a decent touch keyboard built in:

    "iPad", "iPod", "iPhone", "blackberry", "android" etc. are all keywords I can scan for and thus know if the device has a good keyboard… but I can't add "Internet Explorer" to this list as only IE10+ on Metro will meet the requirements

    I could run multiple tests… e.g. is(IE)… and is(IE10 or above)… and is(in Metro mode) {no idea how I can test this}

    but this is already starting to suck…

    I suppose I could add a test for is(windows 8 or above) too.. but again this doesn't help me know if I'm in Metro mode or not.

    Can someone from Microsoft please shed some light on either a keyword that will be in the user agent string when in metro e.g. will "metro" be in it? or will there be a property on the navigator that I can check?

    Until I can solve this, all versions of IE will have to be served up the hacked software keyboard – which really sucks for the users – they deserve better.

  32. William says:

    oh and by the way your comment form failed to save the comment I posted on the first try (almost lost it! thank goodness Firefox saves the content for me!)

    if I recall this issue has been going on for quite some time – i just wanted to let you know it is obviously still a problem

  33. wei says:

    I think the IE now are imitating Chrome,now the chrome has beyond IE ,who know the future

  34. Trooper says:

    I have used CSS code snippet in VS11. blogs.msdn.com/…/new-css-editor-features-in-visual-studio-11-developer-preview.aspx

    Code snippets are really helpful for agile development. Please provide the code snippet for CSS gradient too:

    aspnet.uservoice.com/…/2883098-code-snippet-for-linear-gradient-and-intellisense-

  35. Harry says:

    @william most tablets/phones are including the keyword "tablet" or "mobile" in their user agent strings when on those devices.. Hopefully Microsoft will follow suit for consistency.

    I should note that this should **NOT** be applied to the (windows 7 tablets/boat anchors) as they are a different beast – a Frankenstein mix of IE8 on a touch-able, semi-portable windows machine.

  36. miss王 says:

    你懂的