Building JavaScript Widgets
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('');
To install the widget all you have to do is to point the user at your bit of JavaScript:
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.
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('
');
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.
Questions
If you have any questions, or want to show off any widgets you have made please comment below.
I’m working on a generator that I’d like to make into a shareable bit of javascript, and I understand a bit of this but need a few pieces of advice on how to implement this. As of right now, the page contains all the javascipt within the head tags. Would I need to take only that part out and save as a .js? Then how would I appropriately call on it from other sites (using the same functions in the body tag of the page). Perhaps you can help show me what this might look like. The page I’d like to do this with can be found here: automorrowmusic.com/randomizer
Thanks for the article!
[...] [upmod] [downmod] Building JavaScript Widgets (dtsn.co.uk) 2 points posted 1 month, 3 weeks ago by jeethu tags widgets webdev javascript [...]
Why would you not be able to use AJAX?
Hi Jason,
You can’t send AJAX request across domains because of the Cross Site Scripting (XSS) attacks. Browsers would not let you send the request, and you would just get an error message back.
I am trying to reproduce the widget I made on Widget box. I found a free hosting site to host the script (sixmats.fileave.com/boj.js) but when I tried to install the widget on my site, it just points to the file instead of opening up the widget.
I’m not a developer, but I know I’m missing something somewhere. Could you offer a little help to a newbie?
This is a nice tutorial, just wanted to let you know that it has helped us develop widgets for one of our services.
Thanks for sharing it.
Thanks for the feedback
Hi daniel,
Thanks for this nice tutor. I developed ajax based javascript widgets and those widgets can be used in social medias. I know there is a cross domain issue, but is there any other solution to overcome this??
Hi Prasad,
There are a number of ways to over come retrieving data and sending data cross domain through JavaScript. For retrieving data take a look at my most recent post (JavaScript Weather), it talks about JSONP. Stay tuned for tutorials on how to send data across domain.
Hi Daniel,
That was indeed very informative
I am currently working on a magazine site.
I want to provide an option to my customers just as the twitter profile widget only difference being i want to show my magazine article in the widget & provide options for customers to set the css & no. of articles.Can you provide som reference to the tutorials or any other blogs wherein you have demonstrated the widget code.
Thanks,
Pearl
Hi Pearl,
The widget code for this is quite complicated and a bit difficult to explain over my blog. My advice is to use an already existing widget, like the Digg, dissect the JavaScript and see how it works. Unfortunately there isn’t really an easier way to do this.
However you do need some server side bits and bobs, like you need to be able to output your data in a JSONP format (have a look at the JavaScript Weather article for a bit more information on this). Then process and render this data, you will have to be a creator on your site which will allow users to create the JavaScript with the options.
Hopefully this has helped you!
Hi Daniel,
Thanks for your guidance.It has helped me a lot.I have created a widget successfully.It would be live in some days.
Thanks,
Pearl