How to create a iGoogle Widget!

Because every eveloper needs to have a New Guid generator and .Net info search iGoogle widget ;-). It was time for me to create one!

I had no idea where to start, try searching Google no good results. But after clicking along on iGoogle I found the Google Gadgets developer site. After reading some documents and playing with some examples I found out that it is to easy to create a iGoogle widget. Here is a … step guide to create a iGoogle widget.

In this guide where going to load an external website (http://www.newguid.net/iGoogle_CreateGuid.aspx) in the widget (the most easy way to build a widget).

Step 1:
Go to the Google getting started document and scroll down to the Google Gadgets Editor. Here you can try out some examples or insert your own code.

Step 2:
Insert the following code to the Gadgets Editor 

[code:html]

<?xml version=”1.0″ encoding=”UTF-8″?>
<Module>
  <ModulePrefs title=”[Widget Title]” height=”100″ author=”[Author Name]” author_email=”[Author Email]” description = “[Widget Description]” screenshot = “[Link to a Screenshot]” thumbnail = “[Link to a thumbnail]” author_link = “[Link to author website]”><Require feature=”dynamic-height”/>
  </ModulePrefs>
  <Content type=”url” href=”http://www.newguid.net/iGoogle_CreateGuid.aspx”/>
</Module>

[/code]

Press the Preview tab. You will see that the New Guid widget is already working. The widget just loads the website within an Iframe. The best thing is that you only have to design an build your widget once on your own server. It is a normal page so there aren’t any design limits.

Step 3:
Save and Publish your widget. You have to change all properties (eg. title, author, author_email, etc.) in de code before you save and publish your widget. After you’ve changed the properties you can just save and then publish your widget. You can either publish your widget on your webpage (just by linking to it) or publish it into the Google Directory or both.

Publish your gadget in the editor by going to File > Publish. This button is only clickable if your syntax is correct.

Your gadget will be validated before the real publish. Fix all the issues that show in popup (see image below). And retry.

Like I told you to easy. Ofcourse you can do mutch more with it, but this will do for most of your widgets.