Post
Ask Question

Developing Gadgets for Websites

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>

feed.jpg


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">&nbsp;&nbsp;<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)

    <!-- Refer Google api-->
    <script  type="text/javascript" src="http://www.google.com/jsapi"></script>
    <!-- Which service you like to use, for more information checkout http://code.google.com/apis/ajaxfeeds/ -->
    <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.




        


Similar Articles