iGoogle allows you to customize your Google home page by adding gadgets which take content from other sites. These can be categorized with tabs and you can even customize your own web pages by adding gadgets developed by others.
I was curious how this worked and how to take advantage of it and this is a summary of what I found.
The following gadget is a photo of the minute gadget using Flickr photos.
The following is the script code that was provided from Google Webmasters.
From what I can tell, this is what the Google gadget appears to do.
- It runs a script at Goggle gmodules using the URL: http://gmodules.com/ig/ifr
- That URL loads another script from http://gmodules.com/ig/f/U1pEe_3SJYU/ig.js
- The Google script builds an IFRAME for the output content for the gadget.
- The content of the CDATA section is placed in an the IFRAME
If you notice the code in the script, you see a section on that embeds Google Analytics information. This isn't really a security risk, but you are being tracked as a user of the Gadget.
Content Combination Techniques
Showing a web page with content from multiple locations is what 99% of what the Internet and intra-net is about. There are a handful of techniques, but multiple technologies that support the different techniques.
Frames: The Goggle gadget (and others similar to this) use a frame. A frame basically takes content from another web page, but allows it to be displayed as if it were part of the current page.
Pre Rendered Content: Content is combined prior to output of the page. This often involves templates some type of code logic to combine the templates and data. Data is obtained from databases, XML files, static CSV files, or other web services. IIS and Apache servers use technologies including ASP, ASP.NET, and PHP to name a few.
Another interesting way to combine information and to allow filtering and sorting was published at MIT called Exhibit. An interesting example is the list of San Francisco Bay Restaurants
The Google gadget really isn't anything new for the web. It's just an iFrame which is a section of the HTML document that contains another HTML document. This is useful when trying to merge content from multiple sources into a single page.
Frames are generally considered bad by designers for web design and navigation. They cause page sections to load irregularly and in an uncontrolled order and if there are errors loading the page section, then the page looks terrible from a design perspective (the user sees 404 file not found errors).
Instead of frames, designers like to use CSS on <div></div> sections to control positioning and layout.
An iframe example: Google News
Gadgets Pros and Cons
- Pro: You don't have to develop the code.
- Pro: You get to leverage other peoples code (almost as good as leveraging other peoples money)
- Pro: Gadgets use client bandwidth, not server bandwidth (at least not the original hosting page server)
- Pro and Con: If the gadget changes, you don't know about it
- Con: The gadgets can and often do embed tracking information
- Con: The gadgets can contain advertisements
- Con: Google knows the page that requested it
- I do prefer pre rendered server side solutions (my preference is ASP.Net) with compiled code (VB.Net is my preference).
- If I use post rendered techniques, I like the use of XMLHTTP with simple DIV replacement techniques.
- Leverage other peoples debugged code instead of writing new code.
- Use the technique you can most likely make work most cost effectively.
- Be aware of the fact that Google gadgets are not necessarily doing things in your web sites best interest.