all things Sitecore related

How to create a iGoogle Widget!

By on January 14, 2008 in Google with 6 Comments

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.

How to create a iGoogle Widget! image.axdpicture2009%2f7%2fpublish+gadget

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

 How to create a iGoogle Widget! image.axdpicture2009%2f7%2fgoogle+publish+gadget+validation

 

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

 

About the Author

About the Author: Pieter is Technical Marketing Manager for Sitecore Netherlands and owner of Gaatverweg.nl. He has more than ten years experience with software developing in multiple programming languages and with different Content Management Systems. Before joining Sitecore Pieter was a lead developer for multiple Sitecore and .Net projects, he joined Sitecore in 2011 as an Solution Architect in The Netherlands, after two years as an Solution Architect he joined the Technical Marketing department. In the role as Techinical Marketing Manager he is responsible for the Global MVP program and the Sitecore technical branding strategy. You can follow Pieter on twitter: @pieterbrink123 or Google+ .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

There Are 6 Brilliant Comments

Trackback URL | Comments RSS Feed

  1. VINKAS India says:

    Wow. Its very useful. But how can i publish this in google.

  2. Walt says:

    The preview in step 2 didn’t work for me. Instead, I get an error:

    Error parsing module spec:
    line 3, column 7

    &nbsp; <ModulePrefs title="[Widget Title]" hei…

    XML parse error:
    Entity ‘nbsp’ not defined

  3. Thanks for the step-by-step instructions of doing it.

  4. Its very useful. But how can i publish this in google.

  5. Pieter says:

    Hi,

    I updated the post (step 3: save & publish) with more information about publishing. If you have more questions let me know.

    Cheers,
    Pieter

  6. movie online says:

    Wow. Its very useful. But how can i publish this in google.

Post a Comment

Your email address will not be published. Required fields are marked *

Top