Windows Live Toolbar Buttons: Creating your own

I got bored yesterday, so to satisfy an hours’ boredom, I took a look at the buttons on the Windows Live Toolbar as you can easily create your own. There are two ways of doing it, the easy way, or the more advanced way, which I will now go into:

The Easy Way

The easy way is basically going to the button creation page on Windows Live Gallery and just fill in all the relevant details:
2310.image_thumb Developer

You can even have the button act as a search. An example of this would be for doing a Live Search, you would use this link http://search.live.com/results.aspx?q={query}&mkt=en-gb&FORM=LVCP which we just put in the Add Search section:
image_thumb_1 Developer

Then we just agree to the terms and create our button, which you can then put on Live Gallery straight away, or download if you want to host it elsewhere.

The Advanced Way

The advanced way requires us to head to the MSDN pages for the Toolbar section so we can see what can go into the button. This shows us the structure of the XML file needed for the button. If we took the above example of doing a Live Search button, then in the <shortcuts> section we would have the following:

<shortcuts> <buttonWindow href="http://search.live.com/results.aspx?q={query}&mkt=en-gb&FORM=LVCP" width="350" height="100" /> </shortcuts>

So to try all this out, I used the Share with Facebook shortcut that Facebook provides for sharing webpages with your friends. The shortcut itself is just a bit of javascript, but I had to modify it slightly to work with the button. In the javascript, I changed l=d.location to l={url) which uses the {url} variable to get the current page address from the browser.

So my finished XML looked like this:

<?xml version="1.0" encoding="utf-8"?>
<button>
  <buttonNamespace>ScottIsAFool</buttonNamespace>
  <buttonUpgrade />
  <locale language="*">
    <buttonText>Share With Facebook</buttonText>
    <tooltip>Share this page on Facebook</tooltip>
    <icon src="facebook.bmp" />
    <shortcuts>
      <url href="javascript:var%20d=document,f='http://www.facebook.com/share',l={url},e=encodeURIComponent,
p='.php?src=bm&v=4&i=1176212157&u='+e(l.href)+'&t='+e(d.title);
try{if(!/^(.*.)?facebook.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)
{a=function(){if(!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=0,width=626,
height=436'))l.href=f+p};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)"
/> </shortcuts> </locale> </button>

Which uses this bitmap file facebook_1 Developer . Save this XML file as button.xml, and along with your image (if you used one), put them into a cab file (not zip or rar) and rename it from .cab to .btn. You can then submit this to Windows Live Gallery, or if you want to host it yourself, you would use the following link: http://toolbar.live.com/addbutton/?btnurl= and put the direct URL to the btn file after the =.

My Facebook example can be downloaded from http://gallery.live.com/liveItemDetail.aspx?li=8e97a24a-4794-45ca-86aa-4b0ef603344f

SL