Adding Netflix Widgets to your website with WebMatrix

Netflix is a popular on-demand video streaming and online DVD rental company. In addition to these services, Netflix also offers multiple widgets and APIs that users can seamlessly integrate on their personal websites.

Create a website with WebMatrix

In this article, we will be using WebMatrix. WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as WordPress, Joomla, DotNetNuke or Umbraco. WebMatrix can be downloaded for free at microsoft.com/Web/WebMatrix .

If you need help downloading and installing WebMatrix, it may be a good idea to read Getting Started with WebMatrix. The article provides step by step instructions on installing WebMatrix

After WebMatrix is finished installing, open it. Click "Site from Template" on the WebMatrix welcome screen.

For this example we will use is an Empty Site template. This template is a full-featured HTML5 site. Click Empty site and hit ok.

Clicking ok will take you to your WebMatrix workspace. This contains information about your local host as well a provides resources on developing your site.

You’ll notice that WebMatrix allows you to move between different workspaces by selecting the buttons on the left hand side. At present the Site button is selected which gives you details on your web site, such as the URL of the site, and other tools that you can use such as monitoring your site requests. You can look into this workspaces as you work but for this article, we will be working with our Files workspace. To get to your Files workspace, click the "Files" tab on the lower left hand of WebMatrix.

Once in your Files workspace you can see all your files. Since we chose the Empty Site template, we do not have any files. Let's create a new file for our website. Click the new button on the menu ribbon.

Here you can see all the different types of files you can make. Choose the .cshtml file, give it a name and hit ok.

We now have an empty, HTML5 valid website waiting for us to add code. You may be wondering why we created a .cshtml file instead of a traditional .html file. A .cshtml file is a new, special file type for WebMatrix. This type of file can contain the usual contents of a webpage including HTML and JavaScript code but, what sets it apart from a regular .html file is that it can also contain code for programming webpages. .cshtml files let you embed ASP.NET code into your HTML page using the new Razor syntax (which is most commonly denoted using @ - similar to PHP's $).

Razor code can go anywhere on your webpage. Blocks of code (written between @{ }), single line statements, and even single variables can be put anywhere, just make sure you have the correct syntax! If you want a more in-depth introduction to WebMatrix, you can find numerous resources on the subject including the asp.net website.

Let's look at how to add the Netflix Widgets to our webpage first.

Adding the Netflix Widgets

Netflix offers two different widgets that users can quickly add to their website: the spotlight widget and the bubble widget. The spotlight widget allows the user to embed a specific TV show or movie onto their webpage. The bubble widget displays a specific TV show's or movie's information in a bubble. This is similar to the Netflix site. Both widgets are extremely easy to incorporate on your website and only take a few minutes. Both widgets can be found on the Netflix developer widget page.

Add the Spotlight Widget

Let's take a look at adding the Spotlight widget first. First, visit the widget page.

Click the "Add to your page" button under the Spotlight widget. This will take you to a page prompting you to enter the name of a movie or tv show.

After you've entered a movie or tv show, more options will appear on the page with the code you will need to add to your page.

Here you can customize the way the widget will appear on your page. You can choose a bunch of different options here.

You can preview what your widget looks like on the right. If you choose different options than the default ones, the preview will automatically update.

After you are done customizing the appearance of your widget, you can copy your widget code. This code can be copied from the bottom of the page. It should contain an <a> tag and a <script> tag.

Now, head back to WebMatrix so we can add our widget code to our webpage.

Before we simply paste our code on our webpage, let's add some simple HTML code. Add to the <body>:

<div style="float:left; width:500px; height:225px; border: 1px black solid; padding: 10px; margin-right: 5px;">
    <h1>Movie Reviews</h1>
    <p>This is where my review for the movie would go.</p>
</div>
<div>
</div>

Now we need to add our widget code. In the second <div> paste your widget code. Your code should now look similar to this:

<div style="float:left; width:500px; height:225px; border: 1px black solid; padding: 10px; margin-right: 5px;">
    <h1>Movie Reviews</h1>
    <p>This is where my review for the movie would go.</p>
</div>
<div><a href="http://movi.es/BVqvS" title="Inception on Netflix">Inception on Netflix</a> 
<script src="http://jsapi.netflix.com/us/api/w/s/sp100.js" settings="id=http://movi.es/BVqvS&f=w&q=1&h=f"></script> 
</div>

We can now run our page to see how our spotlight widget looks. Click the run button on the menu ribbon.

This will run our page in our default browser. Here you will be able to see your webpage with the Spotlight widget on it.

Since the widget script runs off of Netflix, you must have a valid internet connect for your page to work properly. If you do not, the widget will fail to appear correctly on your webpage.

Add the Bubble Widget

Let's add the Bubble Widget now. Once again, go to the Netflix widget page to get started. Click the "add to your page" button under the Bubble widget.

Just like the Spotlight widget, you will be asked to enter a movie. Unlike the Spotlight widget, you will have to click the "go" button to progress.

Like the Spotlight widget, there will be a widget preview on the right but, since the Bubble widget only appears as a hover bubble, you cannot customize the way it looks.

Your code will be farther down the page. You may notice that unlike the Spotlight widget, the code is separated into three different boxes. If you are not going to use referral bonuses on the widget, you can ignore the code in the middle. Keep this page open and head back to your WebMatrix page.

In our page, you can choose to create a new file or keep working in the same file. You can either keep the code we added for the Spotlight widget, comment it out (with <!-- --> ) or you can remove it. Keeping our previous code will not affect anything.

If you look at our widget code you make notice we have a <a> tag with the movie title as the link. This means that if a user hovers over the word "Inception", the hover bubble with appear with information about the movie Inception. Add the following code:

<div style="margin:10px; width:200px">
    <h1>My Website</h1>
    <p>This is an example of the Netflix Bubble Widget. 
Simply place your mouse on the link and a bubble will pop up with the movie's information.</p>
    <p>I just saw <a href="http://movi.es/BVqvS">Inception</a>. It was an awesome movie!</p>
</div>

Make sure to replace the <a> with the widget code.

Now all we have to do is add the script to make the hover bubble work. You can add this code anywhere on your page.

Your final code should be similar to this:

<div style="margin:10px; width:200px">
    <h1>My Website</h1>
    <p>This is an example of the Netflix Bubble Widget. 
Simply place your mouse on the link and a bubble will pop up with the movie's information.</p>
    <p>I just saw <a href="http://movi.es/BVqvS">Inception</a>. It was an awesome movie!</p>
    <script src="http://jsapi.netflix.com/us/api/w/b/bu100.js"></script>
</div>

Run your page by clicking the run button on the menu ribbon. You should see the link to the movie you chose.

Hover your mouse over the link. The Bubble widget should appear with the movie's information.

Adding the Netflix widgets is that easy and only requires a few lines of code!

Additional Resources

Download WebMatrix http://www.microsoft.com/web/webmatrix/

Learn how to Download and Install WebMatrix http://www.microsoft.com/web/post/web-development-101-part-1-getting-started-with-webmatrix

Learn more http://www.microsoft.com/web/post/Web-Development-101-using-WebMatrix

Create a website with a WebMatrix site template http://www.microsoft.com/web/post/create-a-website-from-a-webmatrix-site-template

Publish your website http://www.microsoft.com/web/post/how-to-publish-a-web-application-using-webmatrix

Learn to download, edit and republish your website http://www.microsoft.com/web/post/download-edit-and-republish-your-website-with-webmatrix

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!