HTML5 Web Component Widgets for Displaying Movie Data from IMDb

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, and in order to use he acidjs-imdb-movie tag you need to register it’s run time on your page:

<script src=""></script>

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:

<script src=""></script>

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:


Have a great weekend and thanks for reading! For more HTML5, CSS3 and JavaScript stuff, check my website or follow me on Twitter!

* Recently I dived into the amazing world of HTML5 Web Components, and maybe you will find interesting my other endeavors in this direction.



REST API for IMDB Movie Data

IMDB Fetcher is an experimental, free and easy to use REST API for getting movie, series and artist data from IMDB and returning it as serialized JSON objects ready to use on web applications or websites.


REST API Methods:

  • get/title: The method retrieves data (release date, running time, embeddable poster, writers, directors, cast, synopsis, country) for the requested title.
  • get/search: Search IMDB for titles, actors, companies, writers, directors, etc.
  • get/name: The method returns info about the person, who has been searched for – name, date of birth, short bio, productions, photo, etc.
  • img/: Images on IMDB cannot be hot-linked. This method circumvents the limitation.

Go straight to the documentation and start using today!

Related Posts and Links

New Version of IMDB Fetcher JSON API

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’ve just released a new version of the IMDB API, which fixes a bug that appeared a few days ago when IMDB made changes to their website. Please, download it from this link, or check this page for more info about the script. The API itself was not changed, but you can still take a look at the documentation.


About IMDBFetcher

IMDBFetcher is an experimental, JavaScript and PHP API for fetching data from IMDB and returning it as a JSON object ready for parsing and rendering on the for the client. The current version of IMDBFetcher supports title, poster, release date, director(s), actor(s), IMDB and MPAA rating, description, genre(s) and running time.

Continue reading here

Related Posts

Useful JavaScript Classes and Functions

  • Crossbrowser image reflections enabler JavaScript class.
  • JavaScript Mapper Class for RESTFul Methods – Recently I had to work with a bunch of RESTFul API methods, so instead of defining manually separate calls/methods for each API request, I decided to do it viceversa – to force JavaScript to create these methods automatically for me out of the RESTFul API by providing the URLS and other required data.
  • XML to JSON JavaScript Objectifier Class – Simple XML to JSON objectifier. It can be used with custom or public XML, REST APIs such as Last.FM, RSS and ATOM feeds, sitemaps, etc by converting the XML server responses to native JSON objects in the browser which are then instantly accessible by its simple to use JavaScript methods.
  • URI to JSON Serializer Class – Tiny JavaScript class, using the HTMLAnchorElement interface to convert URI string into a JSON object.  The object returned by the function contains hash, host, hostname, parameters key-value map, pathname, port and protocol. Works with all major browsers (Firefox, Chrome, Safari, Opera, IE6-10).
  • IMDB Fetcher – Experimental IMDB JavaScript and PHP API – Makes possible the execution of cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc.
  • Quick and Dirty Localization With JavaScript – A quick and dirty JavaScript localization routine that provides basic localization (no support for plurals, etc), operates on the DOM of the page and uses data-lang attribute for language keys storage. Lokalizr works with all major browsers, beginning with IE8.
  • JavaScript Instance Name Finder – Small JavaScript function that checks for instances of an object within a defined scope and returns an array of instances’ variable names that can be used for different purposes.
  • HTML5 Placeholder Enabler – The solution presented in this post checks for the availability of the placeholder attribute in textboxes, and if it is not available applies its content as value to the elements that contain it.
  • HTML 5 Details Element Enabler – According to WhatWG, the “<details /> element represents a disclosure widget from which the user can obtain additional information or controls“. In brief, you can use it to create panelbar elements without JavaScript, as the expand / collapse functionality is native to it. Currently (October, 2011), the only browser which supports <details /> is Google Chrome, so if you are eager to start using this element on your pages, you can do so with the help of a few lines of JavaScript to make sure it works on all browsers.
  • WebWorkers JavaScript class.
  • Classless JavaScript inheritance.
  • JavaScript class augmenter.
  • JavaScript API for TinyURL.
  • HTML Validation Bookmarklet.
  • JavaScript Template Engine.

IMDB Fetcher – Experimental IMDB JavaScript and PHP API

Recently I came up with the idea to create my personal movie library that runs over the local intranet, and I was sure that IMDB provides some service that I can use to fetch movie data from their servers. I was really disappointed that such popular and huge website is well behind the current trends by not providing an external API of any kind. Eventually I checked for alternatives on the Internet, and actually I found a couple of cool solutions, but finally I decided to create one of my own, and the result is IMDBFetcher.

IMDBFetcher makes possible cross-domain AJAX queries to IMDB and returns a JSON data object for the requested movie. What is currently supported – movie title, poster, release date, description, actor(s), director(s), IMDB and MPAA rating, running time, etc. There is a really thin PHP layer which is solely responsible to make the crossdomain request of getting the HTML page locally, strip some white space and send it g-zipped to the client. The actual conversion from HTML to JSON is done on the client via regular expressions. The final result looks like this:

    "title": "Scarface",
    "starring": [
        "Al Pacino", "Michelle Pfeiffer", "Steven Bauer"
    "directors": ["Brian De Palma"],
    "year": "1983",
    "rating": "8.2",
    "poster": ",0,214,317_.jpg",
    "description": "In 1980 Miami, a determined Cuban immigrant takes over a drug cartel while succumbing to greed.",
    "genres": ["Crime", "Drama", "Thriller"],
    "mpaaRating": "R",
    "releaseDate": "9 December 1983 (USA)",
    "runningTime": "170 min",
    "result": "success"

… And is stored on the client in the form of key/value paired data objects, which can then be (re)used locally. IMDB restricts hotlinking of images from their servers, so I also had to write a small PHP function that returns a local copy of the movie poster which can be used when rendering the movie JSON object to HTML on the page. Please, refer to the “Using the Image Proxy” chapter on the documentation page for IMDBFetcher to learn how to use it.

Key Features

  • Provides simple to use movie data API from IMDB and returns a native JSON object ready for rendering on the client.
  • Gzips and strips white space and other crap from the original page, and returns a simple native JSON object.
  • Fully ajax-driven, no page reloads.
  • Features convenient API methods for retrieving local or remote data, and for deleting local movie data.
  • A bonus script for getting posters from IMDB locally (due to the restricted hotlinking policy of IMDB) is included.
  • Very fast, responsive and extremely easy to use.

Downside of IMDBFetcher

The major downside is that IMDBFetcher is fully dependent on the DOM provided by IMDB. If IMDB changes the markup of their pages, then IMDBFetcher will stop working, but anyway it can be fixed pretty fast on my side, and I will release an updated version.

Supported Browsers

Mozilla Firefox, Google Chrome, Apple Safari, Opera, Internet Explorer 9/10. IMDBFetcher does not initialize on older versions of Internet Explorer (6-8).

Now… What?

If you like the idea, you can give it a try – just check the demo, download it if you like it and learn how to use it by visiting the IMDBFetcher’s documentation page. If you are looking for other cool solutions or web UI components, you can check Acid.JS Web.UI and get the entire suite from this link.

Related Posts