How to Write an IE 8 Accelerator for your Website

A step by step guide on how to write an IE 8 Accelerator to your website. Also learn how to enable live previews in your Internet Explorer 8 Accelerators.

Accelerators are a new feature in Internet Explorer 8 that help you do routine tasks like searching, email, blogging, etc. right from the contextual menu of your IE 8 browser.

For instance, you can select an address on a web page, right click and preview the location directly on a pop-up map without having to copy-paste that address on a separate mapping website. Check the Internet Explorer Gallery for a list of useful Accelerators that you may add to your IE 8 browser.

ie8 accelerator screenshot

How to Create an IE 8 Accelerator

Letís write an Accelerator that will allow people to search your website(s) directly from the contextual menu in Internet Explorer 8. I will try to keep this simple but you may refer to MSDN Library for technical details.

So letís get started. The default HTML code of a search box inside any website (see example) looks something like this:

  1: <form action="http://www.google.com/cse">
2: <input type="hidden" name="cx" value=
"010722013183089041389:
nu0knrjwib8
" />
3: <input type="text" name="q" size="28" />
4: </form>

To convert this HTML search box into an IE8 Accelerator, open Notepad and copy paste the following code into your text editor. You may have to edit the homepage URL of your search engine (Line 3), the Accelerator name (Line 5), location of the favicon image (Line 6) and the form search parameters (Line 10-12).

  1: <?xml version="1.0" encoding="UTF-8"?>
2: <openServiceDescription xmlns="http://www.microsoft.com/
schemas/
openservicedescription/1.0"
>
3: <homepageUrl>http://www.google.com/cse</homepageUrl>
4: <display>
5: <name>Search Digital Inspiration</name>
6: <icon>http://search.labnol.org/favicon.ico</icon>
7: </display>
8: <activity category="Search">
9: <activityAction context="selection">
10: <execute action="http://www.google.com/cse">
11: <parameter name="q" value="{selection}"
type
="text"
/>
12: <parameter name="cx" value="
010722013183089041389:nu0knrjwib8"

type="text" />
13: </execute>
14: </activityAction>
15: </activity>
16: </openServiceDescription>

*The {selection} value on Line 11 refers to the text that you may highlight on a web page before performing the search.

Now save this text file with a .xml extension and upload it to your web server (see example). Congratulations! Your first IE 8 Web Accelerator is ready.

Add an IE8 Accelerator Installation Button

Now that your IE 8 accelerator is ready for serving, letís add a button (or hyperlink) to our website that help enable IE8 users to install our accelerator into their browsers.

Text Link:

<a href="javascript:window.external.AddService
('http://example.com/search.xml')"
>Install Accelerator</a>

Live example -† Install Digital Inspiration Search Accelerator

HTML Button:

<button onclick="window.external.AddService
('http://example.com/search.xml')"
>Add Search Accelerator</button>

Write an IE 8 Accelerator with Auto-Preview

What you just saw is a plain vanilla Accelerator where you highlight text on a page and it turns that selection into a search query. You can easily do that with bookmarklets so why install an Accelerator.

A very cool feature of Accelerators is auto-preview that is displayed when you hover the mouse over the accelerator name. This is handy for translating a phrase, for word meanings and so. Watch this screencast video or install the translate accelerator to understand how in-place view works.

The preview feature inside IE 8 accelerator works like this - you pass the document URL, selected text and other values from IE 8 to an external script via the GET or POST method. The script parses these URL parameters and renders the results in an HTML web page that is then displayed inside IE 8 in a 320◊240 pop-up window.

That connection between the script and IE8 is made possible via the <preview> node in your accelerator - see source code.

<preview action="http://example.com/translate.php?text={selection}" />

The translate.php script takes the highlighted text, auto-detects the language and translates the selection to English using the Google Translate API. Hereís the full code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8
"/>
<title>Translate to English</title>
<script src="http://www.google.com/jsapi"
type="text/javascript">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
google.language.translate("&amp;amp;lt;span&amp;amp;gt;
echo $_GET['text']; ?>&lt;br /&gt;
&amp;amp;lt;/span&amp;amp;gt;", "",
†"en", function(result) {if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
} });
}
google.setOnLoadCallback(initialize);
</script>
</head><body>
<div id="translation"></div>
</body></html>

You may replace "en" with "hi" to auto-translate selected text into Hindi, "de" for German, "fr" for French and so on.

Related: How to write Web Slices for IE 8

How to Write an IE 8 Accelerator for your Website - Published at Digital Inspiration (RSS)


Related Professional Services Automation Articles

Redesign Your Website? Check these Simple Tips


There's no secret sauce and this site redesign was more about implementing the various things I have learned in the last 5 years. These tips will help people who are planning to launch a new website or getting a fresh coat of paint for an old...

Read more about Redesign Your Website? Check these Simple Tips...

Identify Country Flags by their Appearance or Colo


Flag Identifier is an online search tool for quickly identifying flags based on their color, shape, or the design pattern...

Read more about Identify Country Flags by their Appearance or Color...

Search Content


Featured Content


WhitePapers


Sales Force Automation Comparison Guide

Businesses of all sizes can benefit by automating all aspects of their sales processes with an SFA (Sales Force Automation) solution. But due to the sheer number of features that most SFA solutions...Read More


Which CMS Is Right For Me?

If you're wondering which CMS is the right one for your organization, this comprehensive guide will take you through the various options available, detailing the pros and cons of each. Download...Read More


How to Buy a Phone System

Considering a new phone system for your business? The Phone System Buyer's Guide from VoIP-News provides you with all of the information you need to make a more informed decision. The Guide helps you...Read More


Oracle Magazine

Oracle Magazine contains technology strategy articles, sample code, tips, Oracle and partner news, how to articles for developers and DBAs, and more. Oracle (NASDAQ: ORCL) is the world's largest...Read More




View All Whitepapers