Grow your CSS skills. Land your dream job.

Automatic IMDb / Netflix / Amazon Movie Links

Published by Chris Coyier

A while back on my personal blog I made up a list of all post-apocalyptic movies. It is just a reference guide for myself to keep track of which ones I have seen and haven't seen, but the page could be handy for others that are also into the subgenre. To make the list actually useful, there needed to be some links to take action on the movies. I figured three would be good:

  • Amazon: to buy the movie
  • Netflix: to add it to your queue
  • IMDB: to learn more about the movie

One way to add these links to each movie in the list would have been to go to those websites, find the movie, and copy and paste the link. But boy that's a lot of grunt work for dozens and dozens of movies. There must be a better way.

Fortunately for us, each of these websites offers a search page that accepts URL parameters. We can simply insert the name of the movie into a specially formatted URL, and then append links to our page with JavaScript.

The formats are like this:

http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=MOVIE-TITLE-HERE
http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=MOVIE-TITLE-HERE
http://www.imdb.com/find?s=tt&q=MOVIE-TITLE-HERE

Notice the Amazon one has my Affiliate ID in there. Might as well eh?

Automatic insertion

In my article, I used a table to lay out the movie list. After all, it's tabular data. In my table I left the last table in each row empty. With JavaScript we are going to

  1. Loop through each row
  2. Find the movie title
  3. Construct the URLs based on the movie title
  4. Create the links
  5. Append the links to the last empty table row
<script type="text/javascript" charset="utf-8">

  var movieText = '';

  $(function() {

	$("#movie-list tr td:first-child").each(function() {

		movieText = $(this).find("strong").text();

		netflixURL = "http://www.netflix.com/Search?lnkctr=srchrd-ips&v1=" + movieText;
		amazonURL = "http://www.amazon.com/s/ref=nb_ss_d?tag=chriscoyier-20&url=search-alias%3Ddvd&field-keywords=" + movieText;
		imdbURL = "http://www.imdb.com/find?s=tt&q=" + movieText;

		$(this).parent().find("td:last-child").empty().append("<a class='out-link netflix-link' href='"+netflixURL+"'>Netflix Link</a><a class='out-link amazon-link' href='"+amazonURL+"'>Amazon Link</a><a class='out-link imdb-link' href='"+imdbURL+"'>IMDb Link</a>");

	});

  });

</script>

Comments

  1. Arnout
    Permalink to comment#

    move your var movieText = ”; inside your $(function)
    Or you will be introducing unneeded globals.

  2. Permalink to comment#

    You should be careful, in the amazon link is a partner-id from amazon.
    Maybe it’s prohibited from amazon to link from unregistered sites to amazon. Amazon hase some weird restrictions.

    • Good to know, I didn’t even realize there were restrictions on where you could share links. If that has implications for, say, sharing links with affiliate codes on Facebook and stuff like that.

  3. Permalink to comment#

    Out of curiosity, why did you look to Javascript for the solution? Couldn’t have been just as easy to create an array on the back end and given the server the load rather than the client?

    Otherwise, it’s a very nice PoC.

    • The site is a WordPress site, so creating special one-off server-side code for parsing content on a single Post would have been a lot more difficult than just inserting some JS to run. At least as far as I know.

    • Permalink to comment#

      Good point. Graceful degradation might be further achieved by looping through the table and adding the empty cell in each row using Javascript.

    • Yep for sure. It’s kind of a tweener-solution right now, since the empy cell is in the real markup, but not used unless JavaScript is active. Might as well append that too.

    • Ben
      Permalink to comment#

      I used to do things like that when I didn’t know much about Javascript. Now I’m much better with the language I use JS for far too much.

    • Spacemonkey
      Permalink to comment#

      A javascript-based solution will work on any site, whereas server-side code will invariably be tied to the platform and language – PHP, MySQL, WordPress, etc.

  4. Very useful. I was just thinking how something like this would be useful for a video site I am working on. Thanks.

  5. Thanks..!

    This is really useful

    Great !!

  6. Man I have a lot to learn!

  7. How do the hyphens get added to movieText?

  8. Ben
    Permalink to comment#

    I wish IMDB would make an API, I really want to utilise their ratings.

  9. Snookerman
    Permalink to comment#

    Could you get the ratings from IMDb as well? If the rating container has a specific id or something..

  10. Tyler
    Permalink to comment#

    Just stumbled upon this, great idea that really helps me out. Thanks man!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".