For those of you that have been using Internet Explorer 8 for a little while now, I’m hoping you’ve had a chance to customize your Accelerators. These are proving to be pretty valuable tools in my day-today surfing. Here’s what my customized list looks like:

But one thing that has bothered me about these tools is that I didn’t know how to make them. It probably wasn’t hard, but it also wasn’t obvious. That’s the point of this post. I did some research, and it’s actually a simple XML file on your web server, and some javascript in a button to reference it.

Of course, you need a service of some kind to actually provide value, but that’s another thing. In my example, I’m going to create an Accelerator to post some text to Twitter.

1. Start with the default XML file.

If we visit the developer page for Accelerators, we are provided with the templates we can start with. I have bolded (and colored black) the values that we’re going to need to change. You can read the entire spec on this document on MSDN.

<?xml version="1.0" encoding="UTF-8"?>
  <openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://maps.live.com</homepageUrl>
  <display>
    <name>Map with Windows Live</name>
    <icon>http://www.live.com/favicon.ico</icon>
  </display>
  <activity category="map">
    <activityAction context="selection">
      <preview action= "http://maps.live.com/geotager.aspx">
        <parameter name="b" value="{selection}"/>
        <parameter name="clean" value="true"/>
        <parameter name="w" value="320"/>
        <parameter name="h" value="240"/>
        </preview>
      <execute action="http://maps.live.com/default.aspx">
        <parameter name="where1" value="{selection}" type="text" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

2. Change the <homepageUrl> value.

At first, I thought this was a throwaway value, but it has to match the other values in the XML file or it won’t work. I assume this is to prevent spoofing, though I think it would still be pretty easy to spoof a site. It has nothing to do with the Accelerator model, though. It’s all about just creating a site that looks like the target site. I can discuss that in a later post though. So, since I’m working on an Accelerator for Twitter, my value for this will be http://twitter.com.

3. Change the <name>value.

This is the name that your users will see when they bring up the Accelerator Menu. In my case, I am going to make mine say “Tweet with Twitter.”

4. Change the <icon> value.

If you want an icon to be displayed next to your text in the Accelerator menu, this is where you specify it. The Twitter icon seems appropriate for this, so my value is going to be the favicon from the Twitter site: http://twitter.com/favicon.ico.

5. Change the <category> value.

This is where your Accelerator will be categorized in the Accelerator menu. If it doesn’t match an existing value EXACTLY, it will create another grouping. This includes capitalization, it seems. I’d like my entry to show up in a unique grouping, though, so I am using the value “Tweet.”

6. Delete the <preview> section.

This is certainly not something you want to do every time, but unless you need to preview the results for the user (mapping and translation are good uses of this), we just want to take the user someplace. There’s not much point in previewing it for them. So just delete that node.

7. Change the <action> value.

Inside the <execute> tag, we have an action value. This is the place that we will be directing the user when they click on our Accelerator in their menu. For Twitter, that place will be http://twitter.com/home. This gets the user to their Twitter home page, but we still need the ability to populate the “Tweet Box” on the page. Thankfully, Twitter and the Accelerator model can work together to accomplish this.

8. Change the <parameter> value.

You can have multiple parameter tags, and each one is ultimately treated like a query string variable to the URL that we specified in the previous step. Twitter accepts a parameter of “status” that, when used, will populate that text in the Twitter box. So, our name for our parameter will be status, and we will leave the value = {selection} because this will use the text the user highlighted to enter the Accelerator menu in the first place. So the entire use case for this process is this:

• User highlights text.
• User opens Accelerator menu.
• User chooses our accelerator.
• User is taken to Twitter, and the box is populated with the original highlighted text.

So here’s what our final XML file looks like:

<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
    <homepageUrl>http://twitter.com</homepageUrl>
    <display>
        <name>Tweet with Twitter</name>
        <icon>http://www.twitter.com/favicon.ico</icon>
    </display>
    <activity category="Tweet">
        <activityAction context="selection">
            <execute action="http://twitter.com/home/">
                <parameter name="status" value="{selection}" type="text" />
            </execute>
        </activityAction>
    </activity>
</openServiceDescription>

9. Get that XML file on a web server.

I have placed my XML file here. It just needs to be publicly available.

10. Create a way for a user to install your Accelerator.

We just need to add a button or link on a web page for our users to click on. Here’s some sample HTML you can use:

<button id="myButton" onclick="window.external.AddService('http://www.jeffblankenburg.com/twitteraccelerator/TwitterAccelerator.xml')">Tweet As Twitter</button>

And here’s a sample button you can use to try it out!

Tweet As Twitter