An Expanded View of IE8 Accelerators

In most demonstrations of an Internet Explorer 8 accelerator, I see the typical selection based usage. You know? The kind where someone selects some text on a web page, they get the blue accelerator icon, they click it, and there’s that list of accelerators, they highlight one of the cool one’s, and get a preview window. Accelerators really are an innovation because they make browsing easier and more productive.

In many of my demonstrations, I type in “Memphis” in the search box to get back search results – just so that I can highlight “Memphis” and show the Bing Maps accelerator. Here’s how you can do this right here (if you’re running IE8, otherwise download from here). Highlight the address of my office here in Memphis (below), and in 2 clicks you’ll see a map to our office.

Microsoft Heartland District: Memphis, TN

Address: 6465 N. Quail Hollow Rd., Suite 200, Memphis, TN 38120-1417

And building the accelerator is simple. Let’s assume that you’ve built the page that returns a 320x240 preview window acting on the selected text. Then it’s just a matter of telling IE8 how to get selected text to your page via a XML file, and exposing the installation in the IE8 Gallery. 

In the case of Bing Maps example, we know that the HTTP GET made for you looks like:

https://www.bing.com/maps/geotager.aspx?b=memphis&clean=true&w=320&h=240&clientie&format=full

Now, we just put that into OpenService Accelerator language (in XML). The below XML is Bing’s accelerator XML that is loaded into the IE8 gallery. It’s well documented on how to build these (see links at bottom of this post), but looking at the XML should be intuitive – it’s just fill in the blank so to speak. I do want to call out a couple of sections here.

    1: <?xml version="1.0" encoding="utf-8" ?>
    2:  
    3: <openServiceDescription xmlns="https://www.microsoft.com/schemas/openservicedescription/1.0">
    4:   <homepageUrl>https://www.bing.com/maps</homepageUrl>
    5:   <display>
    6:     <name>Bing Maps</name>
    7:     <icon>https://www.bing.com/favicon.ico</icon>
    8:   </display>
    9:   <activity category="Map">
   10:     <activityAction context="selection">
   11:       <execute method="get" action="https://www.bing.com/maps/">
   12:         <parameter name="where1" value="{selection}" />
   13:         <parameter name="FORM" value="LMIEMN" />
   14:       </execute>
   15:       <preview method="get" action="https://www.bing.com/maps/geotager.aspx">
   16:         <parameter name="b" value="{selection}" />
   17:         <parameter name="clean" value="true" />
   18:         <parameter name="w" value="320" />
   19:         <parameter name="h" value="240" />
   20:         <parameter name="client" value="ie" />
   21:         <parameter name="format" value="full" />
   22:       </preview>
   23:     </activityAction>
   24:   </activity>
   25: </openServiceDescription>

 

First, when you hover over an accelerator in the menu, if a preview section exists (and it does for Bing Maps), then a HTTP call is formulated from the preview XML, the call is executed, and the result displayed in a pop-up window. That’s the best kind of accelerator.

Second, when you click on an accelerator in the menu (as opposed to hover), then a call is formulated from the execute element in the XML, and the results are shown in a full page in a new IE8 tab.

If you look at the Bing Maps URL shown above, you’ll see how IE8 created that from the Bing accelerator definition in the XML.

Other Types of Accelerators

This is not well known except by IE geeks like me, but there are other kinds of IE8 accelerators. Way! Note an important piece of data in the Bing XML above, specifically the activtyAction element. In the case of the traditional accelerator, the value is selection. However, there are more value types.

Consider this definition, taken from from the ActivityAction documentation,  each os:activityAction specifies the interaction with the service provider based on the target of the Accelerator. The optional context attribute specifies the target. Default is selection.

Context	Description
document	The current document. Always available.
selection	Default. The selected text. The Accelerator is only available when clicking a selected region.
link	A hyperlink. The Accelerator is available for links only.

Now there several tidbits in there, like the context is optional and that selection is the default if done so. But, the big fact here is that there are 2 other kinds of accelerators: document and link.  The short cut to your learning curve here is that they work exactly the same – except for when/how they are presented in an accelerator menu. This is key, and the reason for this post.

Context	Syntax	Scenario to see in Accelerator Menu
document	<activityAction context="document">	Right click on the page, select All Accelerators
selection	<activityAction context="selection">	Select text on a page, click on the accelerator icon
link	<activityAction context="document">	Right-click on a link, select All Accelerators

This might be simplistic, but these scenarios were not apparent to me. Furthermore, if an accelerator is defined as a document accelerator, then it won’t be visible when one selects text  (unless you read the next section).

Conversely, if I right click on a web page, select All Accelerators, then the resulting list of accelerators does not include any selection accelerators. Additionally, if I right click on a hyperlink, I won’t see the list of selections accelerators then either.

There are plenty of selection accelerators, but let’s point put some instances of other accelerator types:

Examples of document accelerators

• Share on Facebook
• Reviews on StumbleUpon
• Find on Facebook
• Contoso Magazine (a demonstration site that I’ll be talking about soon)

Examples of link accelerators

• Digg
• Share on Facebook
• Reviews on StumbleUpon
• Preview and Launch URL

 

Combining Scenarios, and looking at Facebook

So, here’s the second point about today’s learning. (I really record these here for my mental deficiencies.) When you express your desired accelerator scenario via activityAction, then that’s the only behavior that you’ll get. However, the IE designers came up with a good idea – to let you and me express multiple behaviors in the same accelerator. Brilliant!

After some research, I found one of the best examples of this is Share On Facebook, because it expresses all 3 types of behaviors in the XML.  See the snippet below and note the multiple activityAction elements.

 

    1: <?xml version="1.0" encoding="utf-8"?>
    2: <openServiceDescription xmlns="https://www.microsoft.com/schemas/openservicedescription/1.0">
    3:   <homepageUrl>https://www.facebook.com</homepageUrl>
    4:     <display>
    5:         <description>Share web content with your Facebook friends.</description>
    6:         <name>Share on Facebook</name>
    7:         <icon>https://www.facebook.com/favicon.ico</icon>
    8:     </display>
    9:   <activity category="Share">
   10:     <activityAction context="selection">
   11:       <execute method="get" action="https://www.facebook.com/share.php">
   12:         <parameter name="src" value="iea"/>
   13:         <parameter name="u" value="{documentUrl}"/>
   14:         <parameter name="t" value="{selection}" />
   15:       </execute>
   16:     </activityAction>
   17:     <activityAction context="document">
   18:       <execute method="get" action="https://www.facebook.com/share.php">
   19:         <parameter name="src" value="iea"/>
   20:         <parameter name="u" value="{documentUrl}"/>
   21:         <parameter name="t" value="{documentTitle}" />
   22:       </execute>
   23:     </activityAction>
   24:     <activityAction context="link">
   25:       <execute method="get" action="https://www.facebook.com/share.php">
   26:         <parameter name="src" value="iea"/>
   27:         <parameter name="u" value="{documentUrl}"/>
   28:         <parameter name="t" value="{linkText}" />
   29:       </execute>
   30:     </activityAction>
   31:   </activity>
   32: </openServiceDescription>

 

I have to admit that I just caught onto the ability to do this. By FaceBook leveraging this capability, then the accelerator can show up in all three scenarios. Furthermore, the parameters can be different so that different pages or parameter combinations can be utilized.

Side note – check out the different IE8 variables passed to the FaceBook page. There’s a bigger list in the developer guide below, but some you might pay attention to:

• {selection} – the text that the user selected
• {documentUrl} – the URL of the page the user acted on (works in all 3 modes)
• {link} – the URL that the user clicked on to pass

 

My Soapbox on Search Accelerators

So, this is a Jon-opinion thing. I see a lot of people make accelerators that just map to a site’s search page. And that’s fine – but this is not really leveraging IE8 in the best way, IMO. In some cases, it’s a necessary thing. But, my hang up on this is that the search provider provides this – remember that selecting text, choosing All Accelerators presents the search providers list.  And when a search provider supports accelerator preview, then they are really cool. Buzztap has one of the best examples of this (my Buzztap post here, and more on Fundamentals of Visual Search Providers).

 

Other resources on IE8 Accelerators:

• OpenService Accelerators Developer Guide
• Accelerator XML Template
• OpenService Format Specification for Accelerators
• os:activityAction Element
• IE Team Blog: Accelerator Creation Guide
• Screencast: IE8 Accelerators in 3 minutes
• Using Facebook and IE8?
• Accelerators in the IE8 Gallery
• MSDN Internet Explorer Developer Center
• YouTube: IE8 Accelerator Demonstration

 

Conclusion

So, there! Another example of the IE team providing innovation to the browser. Accelerators are cool and can be powerful. Just take a look at the one at Contoso Magazine which is a document accelerator which interacts with the pictures from the originating page. Accelerators = Cool.