Saturday 28 July 2012

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 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://techinspireplus.blogspot.in/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 (seeexample). 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>
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.
You can follow us on Twitter or join our Facebook Fan Page for more updates like this and You can also ask a problems related to computers or technology on Ask Tech Inspire+ and get your solutions faster.
Share This Post If U Like!!!


0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.