Embed the Last.fm player into your own website
I decided to write this entry in English. Mainly because the requests for this guide were also written in English. 
But since my Windows is German some screenshots will be in German, too.
I noticed that copying the code doesn’t always work right. Especially the quotes “” are often interpreted wrong! When facing problems you should write the code on your own.
- You should know what HTML is and be able to edit it.
- Open the site of the Last.fm song you want to embed. For example: http://www.lastfm.de/music/Illo/_/Marseille
- Right-click with the mouse anywhere on the site and search your context menu for something like “show source code”.
- Search the code for id=”player”.
- In this <div id=”player”> you can find <noscript> … CODE … </noscript>.
- Copy the whole code like seen on the screenshot and paste it in a own <div> … CODE … </div> in your site. In WordPress just write a new article, use the HTML view and paste the whole code:
- You can place this div everywhere (inside a HTML document). I already asked the Last.fm team if they’re ok with this solution since copyright may be an issue. As you can read here, they think it’s fine.
- But there’s still one problem: The player starts immediately after the page was loaded. Most people, including me, don’t like it if a website makes “noise” without permission. I usually work with script.aculo.us to show/hide an element. But simple javascript get’s the job done, too.
- First you have to add an unique id and a style tag to your div:
<div id=”id-illo-lastfm” style=”display: none;”> … CODE … </div>
- Then you need a link where the visitor can start the player:
<p><a href=”javascript:play()”>Play</a></p>
And a function, which is called by the link:
<script type=”text/javascript”>
function play() {
document.getElementById(“id-illo-lastfm”).style.display = “block”;
}
</script> - In the end your code should look like:
- Finally, our example:
