{"id":5158,"date":"2009-12-28T06:58:01","date_gmt":"2009-12-28T13:58:01","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5158"},"modified":"2009-12-29T06:15:02","modified_gmt":"2009-12-29T13:15:02","slug":"automatic-movie-links","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/automatic-movie-links\/","title":{"rendered":"Automatic IMDb \/ Netflix \/ Amazon Movie Links"},"content":{"rendered":"<p>A while back on my personal blog I made up a <a href=\"http:\/\/chriscoyier.net\/2009\/10\/25\/list-of-post-apocalyptic-movies\/\" rel=\"noopener\">list of all post-apocalyptic movies<\/a>. It is just a reference guide for myself to keep track of which ones I have seen and haven&#8217;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:<\/p>\n<ul>\n<li><strong>Amazon:<\/strong> to buy the movie<\/li>\n<li><strong>Netflix:<\/strong> to add it to your queue<\/li>\n<li><strong>IMDB:<\/strong> to learn more about the movie<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/linksformovies2.png?resize=570%2C290\" width=\"570\" height=\"290\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<p>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&#8217;s a lot of grunt work for dozens and dozens of movies. There must be a better way.<\/p>\n<p><!--more--><\/p>\n<p>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.<\/p>\n<p>The formats are like this:<\/p>\n<pre><code class=\"html\">http:\/\/www.amazon.com\/s\/ref=nb_ss_d?tag=chriscoyier-20&amp;url=search-alias%3Ddvd&amp;field-keywords=MOVIE-TITLE-HERE<\/code><\/pre>\n<pre><code class=\"html\">http:\/\/www.netflix.com\/Search?lnkctr=srchrd-ips&amp;v1=MOVIE-TITLE-HERE<\/code><\/pre>\n<pre><code class=\"html\">http:\/\/www.imdb.com\/find?s=tt&amp;q=MOVIE-TITLE-HERE<\/code><\/pre>\n<p>Notice the Amazon one has my Affiliate ID in there. Might as well eh?<\/p>\n<h3>Automatic insertion<\/h3>\n<p>In my article, I used a table to lay out the movie list. After all, it&#8217;s tabular data. In my table I left the last table in each row empty. With JavaScript we are going to<\/p>\n<ol>\n<li>Loop through each row<\/li>\n<li>Find the movie title<\/li>\n<li>Construct the URLs based on the movie title<\/li>\n<li>Create the links<\/li>\n<li>Append the links to the last empty table row<\/li>\n<\/ol>\n<pre><code class=\"javascript\">&lt;script type=\"text\/javascript\" charset=\"utf-8\"&gt;\r\n\r\n  var movieText = '';\r\n\r\n  $(function() {\r\n\r\n\t$(\"#movie-list tr td:first-child\").each(function() {\r\n\r\n\t\tmovieText = $(this).find(\"strong\").text();\r\n\r\n\t\tnetflixURL = \"http:\/\/www.netflix.com\/Search?lnkctr=srchrd-ips&amp;v1=\" + movieText;\r\n\t\tamazonURL = \"http:\/\/www.amazon.com\/s\/ref=nb_ss_d?tag=chriscoyier-20&amp;url=search-alias%3Ddvd&amp;field-keywords=\" + movieText;\r\n\t\timdbURL = \"http:\/\/www.imdb.com\/find?s=tt&amp;q=\" + movieText;\r\n\r\n\t\t$(this).parent().find(\"td:last-child\").empty().append(\"&lt;a class='out-link netflix-link' href='\"+netflixURL+\"'&gt;Netflix Link&lt;\/a&gt;&lt;a class='out-link amazon-link' href='\"+amazonURL+\"'&gt;Amazon Link&lt;\/a&gt;&lt;a class='out-link imdb-link' href='\"+imdbURL+\"'&gt;IMDb Link&lt;\/a&gt;\");\r\n\r\n\t});\r\n\r\n  });\r\n\r\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In this article we&#8217;ll look at a way to automatically create and insert links that link out to the popular movie-based sites (or sections) Netflix, Amazon, and IMBb. We&#8217;ll use jQuery JavaScript for this, so that this happens on the fly using soley the name of the movie, reducing what would be a tedious chore of manually collecting all these links into just a few lines of code.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":340465,"url":"https:\/\/css-tricks.com\/serverless-functions-the-secret-to-ultra-productive-front-end-teams\/","url_meta":{"origin":5158,"position":0},"title":"Serverless Functions: The Secret to Ultra-Productive Front-End Teams","date":"May 31, 2021","format":false,"excerpt":"Modern apps place high demands on front-end developers. Web apps require complex functionality, and the lion's share of that work is falling to front-end devs: building modern, accessible user interfacescreating interactive elements and complex animationsmanaging complex application statemeta-programming: build scripts, transpilers, bundlers, linters, etc.reading from REST, GraphQL, and other APIsmiddle-tier\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/netlify-serverless-function-rest-api.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300565,"url":"https:\/\/css-tricks.com\/how-many-websites-should-we-build\/","url_meta":{"origin":5158,"position":1},"title":"How Many Websites Should We Build?","date":"December 27, 2019","format":false,"excerpt":"Someone emailed me: What approach to building a site should I take? Build a single responsive website Build a site on a single domain, but detect mobile, and render a separate mobile site Build a separate mobile site on a subdomain It's funny how quickly huge industry-defining conversations fade from\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/rectangles-some-filled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317835,"url":"https:\/\/css-tricks.com\/apple-declined-to-implement-16-web-apis-in-safari-due-to-privacy-concerns\/","url_meta":{"origin":5158,"position":2},"title":"Apple declined to implement 16 Web APIs in Safari due to privacy concerns","date":"July 24, 2020","format":false,"excerpt":"Why? Fingerprinting. Rather than these APIs being used for what they are meant for, they end up being used for gross ad tech. As in, \"hey, we don't know exactly who you are, but wait, through a script we can tell your phone stopped being idle from 8:00 am to\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/safari-technology-preview.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2323,"url":"https:\/\/css-tricks.com\/links-of-interest-62\/","url_meta":{"origin":5158,"position":3},"title":"Links of Interest","date":"March 3, 2009","format":false,"excerpt":"Links of Interest aren't \"back\", but I have some cool ones I really wanted to share, I'll probably do this from time to time, but just not on a planned schedule like they were. LyricSift Richard had a neat little idea to build a music discovery site based on great\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/lyricsiftpromo.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":925,"url":"https:\/\/css-tricks.com\/links-of-interest-45\/","url_meta":{"origin":5158,"position":4},"title":"Links of Interest","date":"August 26, 2008","format":false,"excerpt":"Automatically back up your entire web server files and databases to Amazon S3 Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to an Amazon S3 bucket. The tutorial is geared toward Media\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20025,"url":"https:\/\/css-tricks.com\/navigation-in-lists-to-be-or-not-to-be\/","url_meta":{"origin":5158,"position":5},"title":"Navigation in Lists: To Be or Not To Be","date":"January 29, 2013","format":false,"excerpt":"If you Google around on whether or not you should use lists as the markup for navigation on websites, you'll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5158"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5158"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5158\/revisions"}],"predecessor-version":[{"id":5179,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5158\/revisions\/5179"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}