Home Interviews Developers Our View Blogs We Like The List

LiveSide - Developer Blog

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:
image

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

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="BLOCKED SCRIPTvar%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. 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

Comments

 

Mephiles said:

I didn't realise you can do that!

August 8, 2007 5:56 PM
 

DN2004 said:

Does anyone know if there is a toolbar for firefox? Similar to the one for IE.

August 8, 2007 6:23 PM
 

ScottIsAFool said:

@DN2004: not for Windows Live, no.

August 8, 2007 7:33 PM
 

quikboy said:

I don't know why Microsoft doesn't push this kind of info. to developers more better. Like mephiles said, most people wouldn't even know of that.

I think most developers would be interested in this if Microsoft would do a better job of bringing it out to the publics' eyes.

August 8, 2007 9:11 PM
 

DN2004 said:

I wish they developed a toolbar for firefox or at least someone did a 3rd party toolbar, to use with Windows Live search

August 8, 2007 9:38 PM

 

Copyright (c) 2006-2007-2008 Liveside
Listed on the Offical CS Listings Powered by Community Server, by Telligent Systems Themed By nb development Banner Logo By pxb Designed By Mark Sutherland