Tuesday, April 21, 2009

Make library search widgets with Widgetbox, Clearspring and Netvibes

In my last post, I showed you three different ways you can create a portable web search widget for almost any arbitrary database you want. My preferred method used only simple Javascript with no other requirements and allowed you to generate a basic search box that you can put on any webpage.

In most cases you can just copy and paste the code to any webpage that accepts html and it will usually work. But what if you want to move it to a startup page like igoogle or netvibes? Or make it into a Bebo or Facebook application? Or even convert it into a Vista gadget, Google desktop gadget or Yahoo! widget to put on the desktop? Even Mac users are not left out! All these require the widget to be written in quite different formats.

This is where Widget distribution platforms come in. They allow you to upload Widgets in one form and then allows you to offer to users the same widget in different formats with one click.









Widget from Clearspring

Examples include Widgetbox (pro version exists), NetVibes, Clearspring, iWidgets, Sprout (not free). Also see Popfly and Dapper .


Many of them also provide analytics, tracking the number of users who have embeded the widget. This is of course important for measuring the impact of widgets.










Statistics from Clearspring showing usage

Such services also provide ease of use, in many situations the user doesn't even have to copy and paste the code, also he needs to do is to click on the version he wants and it will be automatically linked to the account and added with a few clicks. For instance, one can quickly add a widget to one's blogger sidebar with a few clicks.

In this post, I will talk about using Widgetbox, Clearspring and NetVibes to distribute the javascript web search widget we created in my last post. The others mention before require that you input the widget in Flash format or from a RSS feed (Dapper) and hence cannot be used as we are starting from javascript.


Widgetbox



Example of search widget created from Widgetbox using similar Javascript from last post

Widgetbox is a very powerful and useful Widget maker, that allows you to input your Widget starting from a Widget made from Javascript/html, Flash, a remote widget or as a Google Gadget. If you don't have a widget at all, you can create one out of RSS feeds, producing a widget that displays the content of the RSS feed.

In this instance, based on the Javascript from the previous post, we can obviously choose the Javascript/html option. Alternatively, using the remote widget option one can upload a webpage of the web widget onto a server and point the widget there.

Steps to create a widget using Javascript/html option

1. After registering, log-in and click on "make a widget"

2. Select html/Js option














3. Select blank widget, name the widget and click "continue".
















4. Copy and paste the html you used to create a web search widget into "Widget code" section













Two notes about the javascript code. If you link to any site, make sure you ensure the link will open in a new window (see example). Also any images should be uploaded to a server and then linked to with the full path.


5. Click "apply changes"

6. On the same page adjust the size of widgets in widget settings











7. Check " Developer Agreement,Content Guidelines. " and press "Save widget".







8. The next screen allows you to further test, edit your widget, check analytics (how often your widget is downloaded) etc. But for now just click on submit to gallery.




9.










9. Fill in as many details as you wish and then submit to gallery and you are done!


Alternatively, you could upload the widget as a webpage, then select "Remote widget" and insert the url. For example you can use this.














Use of Widgetbox is pretty straight forward, there isn't really much to say beyond that. Once imported into Widgetbox, one can export to Blogging platforms (e.g. Blogger, Typepad, Facebook), Social networking sites (Bebo, Ning) Startup pages (e.g. netvibes, igoogle, Pageflakes) . All user needs to do is click on "Get widget"

Clearspring




Example of search widget created from Clearspring using similar Javascript from last post

Clearspring is almost identical to Widgetbox. Clearspring however allows you to insert your widget into even more places from including Facebook application, Yahoo! widget etc.

This post is already very long, so I won't go into details on how to use Clearspring, but it's very similar to Widgetbox. You can use the following webpage as a template.


Netvibes

Another widgetmaker you could try is NetVibes. Converting to NetVibes widgets is a bit more complicated and requires that you put in certain extra tags to comply with their UWA (universal Widget API). The documentation is here.

If this looks too scary for you, you can take a look at the example I created here. I myself modified it from the following example created by Guus Van Den Brekel from here. Just edit the appropriate fields, replace the javascript and it will work.

NetVibes is actually worth the trouble because it allows you to add widgets to Opera, Apple Mac OS X dashboard and Vista gadget which covers two of the major desktop widget formats.

You can find my sample Netvibes widget here.

Conclusion

Much of what I shown is still experimental, and you can spend a lot of time tweaking, customizing the look and feel. That's all for now.

Aaron Tay
blog comments powered by Disqus

Share this!

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Related Posts Plugin for WordPress, Blogger...