Wednesday, April 30, 2008

YouTube widget: clone of the iGoogle gadget using Google AJAX APIs

I happened upon the Official YouTube Gadget for iGoogle the other day and thought it would be a fun project to replicate it using the myriad of Google API's that are now available. From the developer perspective, this mini application is entirely client side JavaScript - as the Google API's take care of any server side processing.

See my YouTube widget in standalone here

My workings...

I was able to extract some useful utility JavaScript code for formatting the video duration, truncating the titles, etc. from the gadget code itself:

That said, I needed to re-engineer the greater part of the widget using the available Google APIs.

Google AJAX Search API approach

I initially thought the widget would be driven primarily by Google AJAX Search API due to their support for YouTube search access (Direct Access to YouTube Channels). This support means that using a GvideoSearch for ytfeed:recently_featured would return a JSON object containing all the detail you need about that feed. However, the support for YouTube feeds is limited to variants of most_viewed, recently_featured and top_rated (and YouTube channels). The major reason that I chose to abandon this avenue was that the search API provides very limited results ( = 8 results!).

Clicking here you will see the JSON object returned by the Google Search API GvideoSearch for ytfeed:recently_featured.

Google AJAX Feed API approach

I turned my attention to the Google AJAX Feed API which does not have the same severe result set limitations as the Google AJAX Search API.

YouTube feed issues

There seem to be two variants of YouTube feeds knocking about. One in RSS 2.0 and one in Atom:

Clicking here you will see the JSON object returned by the Google Feed API result for (RSS 2.0) using the combined JSON/XML result format [feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);].

Clicking here you will see the JSON object returned by the Google Feed API result for (Atom) using the combined JSON/XML result format [feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);].

Using this JSON pretty printer and changing the name of the callback in the GvideoSearch and Gfeed calls I was able to display a live version of the recently_featured feeds for side by side comparison. For some reason this only works properly in Firefox.

The problem with using the YouTube RSS 2.0 feed is that the supplied feed is not valid RSS 2.0. The duration attribute is not a supported part of RSS 2.0. Therefore, when you fetch the feed via the Google AJAX Feed API you get no duration information.

To get the complete behaviour required for the widget (with durations and more than 8 results), I have to use the GData YouTube feed. In the GData feed the duration information is inside a special YouTube namespace. For parsing elements that are within namespace to work across browsers you will need to make use of the Feed API's google.feeds.getElementsByTagNameNS. A slight down side to using the Google AJAX Feed API to fetch the feeds is that each feed is cached for about an hour.

JavaScript Pagination

After some JavaScript development of my own, using the Google Feed API, I was able to construct a widget that displayed video thumbnails, titles, durations, SWF urls and on clicking the thumbnail I could even invoke a flash player (Embedding the YouTube player using SWFObject). To add the final magic, I needed to paginate the video thumbnails like the official gadget does. I found a very nice JavaScript script for paginating tables and my paging mechanism is derived from that. My modified version works with any element type (not just tables) and it achieves this by making use of the the ultimate getElementsByClassName method.

See my modified paging mechanism in standalone here.


A very enjoyable experience (a couple of days messing about!). I hope this offers some insight into some of the problems you might run into when working with the Google APIs. The final widget comes pretty close to the functionality of the official gadget and I'm sure I could polish this further.


ismjml said...

weres is tghe html code so that i can put the wodget on kmy blog

Note: Comment imported. Original by Anonymous at 2008-10-21 14:58

ismjml said...

Here it is in standalone mode. Notice that there are several external JavaScript files.
Note: Comment imported. Original by markmc website: at 2008-10-21 21:45

ismjml said...

This is very useful. Any possibility to make it pull videos on tags?
Note: Comment imported. Original by Anonymous at 2009-04-01 00:06

ismjml said...

Yes, you could populate the feed list with tag based feeds, e.g. from the YouTube monkey example. In my widget this would be added inside youtube.js.
Note: Comment imported. Original by markmc website: at 2009-04-01 08:18

madin said...

Late in the 19th century it was pocket and chatelaine watches that were most popular, but Louis replica Cartier watches saw a future in timepieces that could be worn on the wrist.
Invest in an heirloom to cherish forever with a timepiece from the replica Ballon Bleu de Cartier watches watch collection.A fusion of cutting-edge technology and heritage craftsmanship, Cartier’s fine watches carry the prestige of the brand’s illustrious history and exceptional quality.