Developing Gadgets for Websites

Sridhar Subramanian
12y
12.9k
0
1

Article

What is a Gadget ?

In software world, Gadget is a useful plug-in which can be incorporated into any website without much effort, Gadgets can provide functionality such as News, Weather , Photos, fun etc. Best example for gadget powered website is iGoogle.

How to use a Gadget ?

Consider that you run a blog about programming in blogspot.com. If you want to show the latest articles published in c-sharpcorner you need to write a program to read the RSS feed provided by c-sharpcorner.com. Instead of that you can use some online RSS reader gadget and make your life simple.
Copy paste the below HTML tag in your blog / website it will do all the job for you, Is that not simple..?

<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=csharpcorner"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"> </iframe>

How to code a Gadget ?

Gadget can be written in any language like HTML, JavaScript , ASP.Net , Java , Silverlight, Flash. But the final outcome of the gadget should be able to render itself in a web page. Let us code a gadget to read the articles from c-sharpcorner RSS and display it in our blog / website. In the below example I have used google's feed reader to read the feed from other website. If you are new to Google API's please check this link http://code.google.com/apis/ajaxfeeds.
Since cross domain XML request is not allowed by http standards I'm using google api which read feeds from any web server and returns in json format.

HTML Code (gadget.htm)

<body onload="javascript:ReadFeed();">
<div class="mainDiv" id="mainDiv">
   <div class="hr" id="h1">
          <span class="ndLink">  <a href="http://www.newsdabba.com" target="_blank"
           title="News Dabba, All news in one website - Sridhar Subramanian">NewsDabba.com</a></span>
          <span class="ndHead">c-sharpcorner.com</span>
   </div>
    <div class="ct" id="ct"></div>
</div>
</body>

Javascript Code:(gadget.htm)

    
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    
    <script type="text/javascript">google.load("feeds", "1");</script >
    <script type="text/javascript">

        function ReadFeed() {
                //Adjust the height of artilce based on iframe's attribute
                document.getElementById("mainDiv").style.width = document.body.parentNode.clientWidth - 15 + "px";
                document.getElementById("mainDiv").style.height = document.body.parentNode.clientHeight - 25 + "px";
                var feed = '';
                //Set the URL you want to read
                var gFeed = new google.feeds.Feed('http://www.c-sharpcorner.com/Rss/LatestArticles.aspx');
                //Number of feed to load
                gFeed.setNumEntries(8);
                //Start loading the feed
                gFeed.load(function(result) {
                    if (!result) {
                           return false;//if fails
                    }
                      for (var i = 0; i < result.feed.entries.length; i++) {//if success loop through the feed and display
                        var entry = result.feed.entries[i];
                        feed = feed + '<div style="padding-bottom:4px;"><a href="' + entry.link + '" target="_blank">' + entry.title + '</a></div>';
                    }
                    document.getElementById("ct").innerHTML = feed;
                });
        }
    </script >

In the above gadget user setting such as width & height is set by reading the attributes passed by the user in iframe element

document.getElementById("mainDiv").style.width = document.body.parentNode.clientWidth - 15 + "px";

Apart from this you can set other user preferences such as Color , Theme , Feed Count, Custom message by taking these variable as input parameter in query string. Also you need to make sure that gadget does not occupy much space of the website and it has to work on all major browsers and resolutions.To access the developed gadget it has to be hosted in publicly accessible website. The gadget which is mentioned above can be access through below html element from a different page (TestGadget.htm)

<iframe src="gadget.htm" title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"> </iframe>

Below are some useful gadgets which you can use in your blog / webpage.

World news:
<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=world"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"></iframe>

India news:
<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=india"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"></iframe>

C-SHARPCORNER:
<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=csharpcorner"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"></iframe>

ASP.NET:
<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=asp.net"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"></iframe>

SILVERLIGHT:
<iframe src="http://www.newsdabba.com/gadget/gadget.htm?fdN=silverlight"
title="www.newsdabba.com" frameborder='0' scrolling="no" width="300px" height="200px"></iframe>

Also check how google gadgets are shown in www.newsdabba.com toolbar, Please download the source code for working sample. Any comments regarding this article is welcome.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all