How to Display and/or Host Licrosoft Gadgets for your Website

I suggest that you download this instruction file in either Word or PDF as the images are not appearing via MSDN forum.

Or dig into the code and d/l from the respective servers.

Gadgets.pdf

Gadgets.doc

The simplest way to display any Microsoft Live.com gadget is to wrap it in an iframe on your webpage. I'll explain:

First go tohttp://gallery.live.com and decide which gadget(s) you would like to display on your webpage.

Of course it is also quite possible and highly recommended to write your own gadgets as well.

Click on the "Add to Live.com" button

Now the next page will show you a link to the manifest XML document, at the top of the page.

Copy the link, in this case :

http://download.gallery.start.com/d.dll/2~1~152~7550/gadget.xml

Now on your webpage simlply wrap an <iframe> within a <div> for example:

***Note*** This allows the gadget to be displayed on your webpage yet hosted on, in this case, Microsoft servers specifically <download.gallery.start.com>

You will need to adjust the width and height of the frame in accordance with the background sizes for the given gadget. Thus leading to having to get the style sheet and specifications for the background sizing of the gadget. Which may lead to wanting to host the gadget on your server of choice.

********************************* Hosting Microsoft Gadgets *******************************************

You wll need to download the gadget.xml file or you can copy the markup by doing the following:

Paste the link to the gadget.xml file in your browser's address bar. You should see the XML as follows:

***NOTE*** The tic marks will need to be deleted

I recommend using IE6 and not IE7 because IE7 by default recognizes all XML feeds and will not display the XML code. Of course you can disable the feature in IE7 by clicking on <tools><internet options><content tab> Feeds: <settings button> and then uncheck the "turn on feed reading view" box.

You will then need to download the js files, in this case<link>js/Atlas.js</link>,<link>js/ShowUsYourWow.js</link>, and<link>js/randm.js</link>

Copy and paste to the address bar in IE

http://download.gallery.start.com/d.dll/2~1~152~7550/js/Atlas.js

http://download.gallery.start.com/d.dll/2~1~152~7550/js/randm.js

http://download.gallery.start.com/d.dll/2~1~152~7550/js/ShowUsYourWow.js

Next get the stylesheet

<link binding:type="css" binding:name="style">css/showusyourwow.css</link>

http://download.gallery.start.com/d.dll/2~1~152~7550/css/showusyourwow.css

Open the style sheet to get the emplacements of the images. I will not include the css code as it will be too long for this post. You will find that you need to download the following image files

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/1.gif

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/2.gif

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/3.gif

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/4.gif

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/bg.jpg

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/bg_button.jpg

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/bg_lasttab.jpg

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/blue_sub.gif

http://download.gallery.start.com/d.dll/2~1~152~7550/css/decoration/blue_transparent.gif

Place all of these files in their respective directory structure:

You will need to check the JavaScript code in the js files for bugs such as uncommenting notes left by the programmers and correcting syntax errors. Relatively the same goes for the style sheet.

After all is in place you once again simply wrap an <iframe> within a <div> for example:

<divstyle="float: left;">

<iframemarginwidth="0"marginheight="0"frameborder="0"scrolling="no"width="335px"height="390px"allowtransparency="true"

src="http://gadgets.start.com/gadget2.aspx?b=http%3A//shared.live.com/4d8Kgj76eAIxromSOzOn1Q/#view=Custom&host=<myserver>&mode=viewer&amp;m=http%3A%2F%2F<mydomain>%2F<dir>%2F<subdir>%2F%2F<mymanifest.xml"></iframe>

</div>

<myserver> and <mydomain> may be either domain name or IP nomenclature.

Any questions or comments please feel free to e-mail me.

Best Regards,

Richard J. Rothery Jr.

r.rothery@fdesign.fr
http://www.fdesign.fr

I will post the same on my blog at

http://82.235.212.17/test/blog/dasblogce/default.aspx

[14810 byte] By [rjstinyc] at [2008-2-16]