Building JavaScript Widgets

March 15, 2009

Little pieces of JavaScript you embed onto your website are getting more popular. Every major provider of a service on the web also gives you a little widget that you can put on your blog or webpage to promote what you are doing, for example Twitter, Last FM and Digg all provide widgets which are great for you and great for the service.

I am going to talk you through the development and pitfalls associated with the design and development of widgets.

First and foremost, you need to decide what you want to show with your widget. Knowing this you can make an educated choice about which method you want to use to create a widget, there are basically two methods associated with widget development.

IFrame’s

No, iframe’s aren’t dead. They are a major part of widget development. Using a iframe is the easiest way to generate a widget - you host a small file on your web site which contains the information you want to show, like the Digg button for example, and get the JavaScript on the client side to build the URL to it. In the case of Digg the client side JavaScript builds a URL based on the current posts URL.

document.write('<iframe src="http://yoururl" width="50" height="50"></iframe>');

To install the widget all you have to do is to point the user at your bit of JavaScript:

<script src="http://yoururl/script.js" type="text/javascript"></script>

You can pass any variables you want through to the user at this point by simply making them JavaScript variables, and using the JavaScript to build up the iframe URL based on these variables.

<script type="text/javascript">
	var greeting = 'hello world';
</script>
<script src="http://yoururl/script.js" type="text/javascript"></script>

If you want your widget to be able to appear multiple times on the same webpage, you need to remember to set all the variables to null at the end of your JavaScript file.

That's it! iframe based widgets are very easy to build and to use, however they do come with their downsides. The biggest of these is that the user can't customise the widget at all - it lives within an iframe and therefore is untouchable by CSS. That's why certain widgets, like the twitter widget, which are made entirely on the client side in JavaScript.

Client Side

A widget that is built in JavaScript on the client side is definitely the harder option. For this you have to make the JavaScript file create all the HTML, write out a basic style to apply to the HTML and load in the data. When building this try to avoid using frameworks to build the HTML, this only creates more request for your web servers and make the widget slower to load. Instead resort to using the classical JavaScript methods for creating elements.

document.write('<div id="your_id"></div>');
var widget = document.getElementById('you_id');
var div = document.createElement('div');
div.innerHTML = 'Hello World';
widget.appendChild(div);

You will have to load your data in from another source, and for this I recommend extending your API to give you a JavaScript variable followed by the JSON encoded data. Here's an example from tweetmeme.

Pitfalls

There are a lot of difficulties involved in creating widgets and here are just a few of them:

  • AJAX won’t work! You cannot post information between domains.
  • Don’t use a JavaScript framework - for a simple widget it’s is over kill.
  • Try to keep the requests down. These widgets are coming from your servers.
  • Anonymise the JavaScript, you don’t want it conflicting with other JavaScript.
  • Minimize your JavaScript. This will save on bandwidth for you, and make the widget faster to load. 

Comments

comments powered by Disqus