A few months ago I designed and developed this RESTFul API for extracting movie data from IMDb with a couple of methods, and I am happy that a lot of people actually found it useful. In a number of occasions I was contacted regarding the availability of any easy to use on our websites widgets, which utilize the data from IMDb Fetcher, and this eventually lead to the creation of the first one.
I implemented it as a reusable HTML5 Web Component *, and it’s usage is simple as using HTML tags, like:
The service is hosted on imdb.wemakesites.net, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:
As the widget requires jQuery, and you may already have it on your website you may register just the rest of the code required to run the tag like:
The widget comes in three different sizes:
In regards to the configuration of the tag, you have the following attributes:
- movie – required. Its value is the name of the movie, against which will be queried the API.
- mode – optional. Here you can set the size of the widget. You have “full“, “compact” and “minimal“. If no value is set, the widget will render in full view.
- renderposter – optional Boolean. Default is true. If set to false, the widget will be rendered without poster.
The acidjs-imdb-movie tag utilizes localStorage, so once movie data is loaded on the client, it is stored locally in the browser for later usage. For the next version I am planning to store the poster image as base-64 URI, but first I need to find a workaround for the security restriction of canvas and cross-domain scripting. To view the locally stored widget data, use your browser’s console like this:
To delete locally stored widget data, type the following in your browser’s console:
* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.