Add an interactive music feature to your website using the iLike API

iLike is a social music service that allows users to download and share music. It also provides a popular music app that can be used across multiple social networks. iLike also has an API that allows users to easily add their favorite music and playlists to their own websites, blogs, and social networking sites.

This article will go through how to add this iLike application to a website using WebMatrix using some simple JavaScript. If you are new to JavaScript, there are some introductory JavaScript articles found here.

Create a new web application with 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

Firstly, we will create a web application with 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 choose an Empty Site, we do not have any files for our website yet.

Let's create a new webpage for our application. Click "new" on the menu ribbon.

This will cause a box to appear with all the different file types you can choose. Choose an HTML file and give it a name.

We now have an HTML5 valid, empty website. Let's get started adding our iLike music app.

Create an iLike account

Before you can get started adding the iLike app, you need to create an iLike account. Visit here to create your account.

Fill out the form and click "Join iLike" when you're done.

Get your API key

Another step we must complete before adding our iLike app is to get an API key. This key is required in our iLike code we will add to our website. Go to the iLike developer site.

Scroll down the page to the "Developer Keys" section of the page. Here is where you can request your API key.

Click the "Request a key" button to request your API key. Choose whether you want a test key or a production key and click submit. You will now receive your API key which will be visible on your iLike Developers page.

Add your iLike app

iLike provides a great developer resource here in the form of a wiki. It provides information on all the different iLike apps you can include on your website as well as code snippets and live examples.

Let's add the most basic iLike app - a song. This requires us to add some html code as well as some JavaScript code.

Let's first add the html code. Make sure your HTML file is open.

Anywhere on your page between the <body> tags, add a div that will hold the song.

<div id="song1"></div>

Now we need to add our JavaScript code. One element that is required for all iLike apps is the link to the iLike API JavaScript file. Add that link now to the <head> of your webpage.

<script src="http://www.ilike.com/api/js" ></script>

This is not the only JavaScript our page requires. Like noted earlier, your API key is required in your JavaScript. We can store it as a global variable names _iLikeDevKey (note: if you store your API key as a global variable, you MUST name it this variable name). This means that if we add more than one function we will not have to define our API key more than once.

In addition to your API key, let's also add the simple code to add a song to our page. Add this code anywhere to your HTML page:

<script>
    _iLikeDevKey = "yourdeveloperkey";
    iLikeDisplaySong({elId:"song1", songName:"Drilling", artistName:"Minus the Bear"});
</script>

You can change the songName and artistName values to whatever song you wish to appear on your page.

Your full code should be similar to this:

<script src="http://www.ilike.com/api/js" ></script>

<script>
    _iLikeDevKey = "yourdeveloperkey";
    iLikeDisplaySong({elId:"song1", songName:"Drilling", artistName:"Minus the Bear"});
</script>
<div id="song1"></div> 

Run your file by clicking run on the menu ribbon. You should see your song title and artist displayed on your webpage.

Playing the song will cause more information about the song's cd appear.

You can also allow users to choose which song to play on your page. Let's do that now.

Allow Users to Choose their iLike Song

Like adding a song to your website, you need to have the JavaScript and a <div>. Add to your JavaScript code

function mySongCallback(song_id, song_name, artist_name) {
    iLikeDisplaySong({elId:"s1", trackIds: song_id});
} 

This function let's you choose a new song and then sets this new song in your song <div> Now we need to add the link to choose the song.

In the <body> of your page, add

<a href="#" onclick='iLikeSongChooser({onSelected: mySongCallback}); return false;'>Choose a different song</a>

Run your page. You should not have the option of choosing a different song.

Clicking on "choose a different song" will cause a pop up to appear where you can choose a different song.

Selecting a song will replace the new song with the old song on your webpage.

That was just a quick introduction to adding the iLike App to your webpage. An example of all 3 iLike apps can be seen here.

Don't want to use iLike but still want to have music on your website? Check out the article on the new HTML5 audio tag on this website. This article shows how to add a music file to a webpage using the HTML5 audio tag.

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

Learn JavaScript http://www.microsoft.com/web/post/introduction-to-javascript-part-1-of-3
http://www.microsoft.com/web/post/introduction-to-javascript-part-2-of-3
http://www.microsoft.com/web/post/introduction-to-javascript-part-3-of-3

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!