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
- Loop through each row
- Find the movie title
- Construct the URLs based on the movie title
- Create the links
- 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>
move your var movieText = ”; inside your $(function)
Or you will be introducing unneeded globals.
True. I’ll leave it out in the example above so everyone can read this and understand the mistake.
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.
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.
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.
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.
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.
Very useful. I was just thinking how something like this would be useful for a video site I am working on. Thanks.
Thanks..!
This is really useful
Great !!
Man I have a lot to learn!
How do the hyphens get added to movieText?
I wish IMDB would make an API, I really want to utilise their ratings.
Could you get the ratings from IMDb as well? If the rating container has a specific id or something..
Daivd Walsh wrote a tutorial on this last year
Just stumbled upon this, great idea that really helps me out. Thanks man!