次の方法で共有

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="https://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

  • Anonymous
    May 14, 2012
    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....

  • Anonymous
    May 14, 2012
    @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.

  • Anonymous
    May 14, 2012
    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

  • Anonymous
    May 14, 2012
    The comment has been removed

  • Anonymous
    May 14, 2012
    So what's new here? The feature already exist on Desktop version of IE. File -> Send.

  • Anonymous
    May 14, 2012
    Is <meta name="og:title" content="Insert Site Title Here” /> supported?

  • Anonymous
    May 14, 2012
    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).

  • Anonymous
    May 14, 2012
    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.

  • Anonymous
    May 14, 2012
    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.

  • Anonymous
    May 14, 2012
    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.

  • Anonymous
    May 14, 2012
    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/

  • Anonymous
    May 14, 2012
    The comment has been removed

  • Anonymous
    May 14, 2012
    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.

  • Anonymous
    May 15, 2012
    The comment has been removed

  • Anonymous
    May 15, 2012
    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.

  • Anonymous
    May 17, 2012
    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!!

  • Anonymous
    May 18, 2012
    The comment has been removed

  • Anonymous
    May 19, 2012
    @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: www.zollotech.com/.../run-windows-8-on-ipad Hope this help 8-)

  • Anonymous
    May 20, 2012
    Your comment form is broken - now hopefully my browser saved a copy of my post or I'll be very angry

  • Anonymous
    May 20, 2012
    The comment has been removed

  • Anonymous
    May 20, 2012
    The comment has been removed

  • Anonymous
    May 20, 2012
    Chrome has overtaken Internet Exploder as the most used browser in the world

  • Anonymous
    May 20, 2012
    www.theverge.com/.../chrome-most-popular-browser-weekly-may-2012

  • Anonymous
    May 20, 2012
    Does it have to take up half the screen??

  • Anonymous
    May 21, 2012
    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 ...

  • Anonymous
    May 21, 2012
    The comment has been removed

  • Anonymous
    May 21, 2012
    The comment has been removed

  • Anonymous
    May 21, 2012
    The comment has been removed

  • Anonymous
    May 21, 2012
    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

  • Anonymous
    May 22, 2012
    It is not compatible with x64????

  • Anonymous
    May 23, 2012
    The comment has been removed

  • Anonymous
    May 24, 2012
    The comment has been removed

  • Anonymous
    May 24, 2012
    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

  • Anonymous
    May 24, 2012
    I think the IE now are imitating Chrome，now the chrome has beyond IE ，who know the future

  • Anonymous
    May 27, 2012
    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-

  • Anonymous
    May 27, 2012
    @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.

  • Anonymous
    May 27, 2012
    你懂的