Inside Netflix Widgets .:. kentbrewster.com

On 14 December 2009, Netflix quietly launched a pair of new widget builders, at http://developer.netflix.com/widgets.

Both builders create single-line JavaScript widgets that inject a big chunk of the Netflix experience onto outside pages with very little effort on the part of the site operator. Here are a couple of example implementations and a tiny peek at how they work.

The Bubble

If you blog lots of movies and/or don't want to give up sidebar space for a static widget, the Bubble Widget is your friend. Here's a sample passage from our friends at Hacking Netflix:

Netflix New Releases for January 5th, 2010

Interesting titles include Cloudy with a Chance of Meatballs, The Final Destination, 50 Dead Men Walking, Big Love (Season 3), Chuck (Season 2), The Philanthropist: The Complete Series, The Good Witch, Trucker, and Adam.

Streaming releases this week include Monsters, Inc., Rocky V, Sling Blade, The Last Picture Show, and World's Greatest Dad (more on StreamingSoon).

The Bubble Widget is a single SCRIPT tag, which should be included at the very bottom of your page like this:

<script src="http://jsapi.netflix.com/us/api/w/b/bu100.js"></script>

To see it in action, mouse over any of the linked titles above.

The Spotlight

Spotlight widgets come in many flavors and sizes. To make your own, visit the Spotlight Widget Builder, fill out the form, and collect your inline JavaScript.

The code for the first widget above looks like this:

<a href="http://movi.es/BVdT5" title="The Dark Knight on Netflix">The Dark Knight on Netflix</a>
<script src="http://jsapi.netflix.com/us/api/w/s/sp100.js"
settings="id=http://movi.es/BVdT5&w=132&h=tfn"></script>

Paste this into any Web page where you want the widget to show up, and you're done.

Things to Do and Notice

• Both widgets depend on Netflix's new tiny-URLs-for-movies domain, http://movi.es.
• The Spotlight widget will hide links to movi.es if it renders correctly. If it doesn't come up, the link will still be there, which is critical for RSS readers and other no-JavaScript clients.
• If you visit http://movi.es/BVdT5, you'll be redirected to The Dark Knight's Netflix page.
• All widgets were expressly designed to keep your readers on your page, instead of sending them back to Netflix. Add and Play buttons launch iframes or new windows; Preview buttons bring up a black-glass pane.
• If you choose to include the Free Trial link, you can earn hefty referral bonuses for new sign-ups. Netflix is currently changing affiliate vendors; look for a greatly streamlined sign-up process in the near future.

Acknowledgements

Although I was personally thrilled to play the role of the front-end developer on this project--much of it depends on the techniques detailed in Case-Hardened JavaScript, which is in desperate need of attention--the heavy lifting was done on the back end by the designers, managers, and engineers on the Netflix Developer Network team. They are: Anu Sonvane, Hans Granqvist, John Haren, JR Conlin, Lalitha Shankar, Michael Hart, Mikey Cohen, Navin Prasad, and Priya Poolavari.

Special thanks to: Adam Platti, Andy Baio, Ava Hristova, Barney Mok, Bill Scott, Chad Dickerson, Chanel Wheeler, Christian Heileman, Dan Theurer, Dave Balmer, Douglas Crockford, Dustin Diaz, Ed Ho, Eric Miraglia, Gina Groom, Hedger Wang, Heidi Pollack, Isaac Schleuter, Jason Levitt, Jeremy Gillick, Jeremy Zawodny, Jimmy Byrum, Jonathan Trevor, Kim Trott, Leonard Lin, Matt McAlister, Matt McCarthy, Matt Sweeney, Micah Laaker, Mike Davidson, Mike Lee, Nate Koechley, Pasha Sadri, Paul Bakaus, Peter Michaux, Rasmus Lerdorf, Scott Schiller, Steve Carlson, Taylor McKnight, Thomas Sha, and Vickie Brewster.

Next Up: "Hacking Netflix Widgets"

There's a lot more lurking backstage; after a few more internal issues settle out, I hope to be able to present a much more in-depth look at how Netflix widgets work, and what else you can do with the technology behind them them.

Full documentation for Netflix API Version Two is on the way; stay tuned to http://developer.netflix.com for further information.

Comments from before Disqus:

Kent Brewster .:. 2010-05-04 22:04:56

Sorry, that in-depth look is taking quite a bit longer than I thought it would. Thanks for your patience!

Tim .:. 2010-04-28 08:30:39

Looking forward to the more in-depth look at how Netflix widgets work. Having difficulty getting the widgets to work in a dynamic context. I am making an AJAX request to a php script and then trying to update my page with widgets (tried innerHTML and DOM methods through BetterInnerHTML). I am left with workable links that take me to Netflix, but no widgets. I think the self-invoking javascript is being called as it looks like it is removing itself from the page, leaving behind the movi.es link to Netflix.