Last.fm widget with SWFobject

• Download source code - 36.2 KB

Introduction

In this example, I show how easy it is to use the SWFobject and Flash with jQuery to progressively enhance a page.

Widgets are a great way to quickly drop content from other websites onto your page, but quite a lot of these widgets fail to take into account accessibility or even markup validity.

The task

For my own website, I wanted to use a Last.fm widget to show my recently played tracks on my home page. Last.fm provides an easy way to create any number of different widgets from your account (http://www.last.fm/widgets), and then simply paste the appropriate code onto your page.

Choosing to use the charts widget, this creates a horrible table-based layout with inline styles, images, and a Flash file. And, worst of all, the markup is invalid. Looking closely at the mass of markup created, the only part we really need is the Flash file with the appropriate settings.

The temptation here would be to just write in an OBJECT tag onto our page and be done, but that isn't inline with accessibility guidelines, so with a little extra working using the SWFobject, we can make a much improved solution.

SWFobject

SWFobject is a JavaScript based detection routine that checks if the appropriate version of Flash is installed, then loads the Flash movie into a given placeholder. If the correct version of Flash isn't installed, then it will prompt for you to install it.

If we also couple the SWFobject detection with jQuery, we can first check that JavaScript is available, and if not, fallback to a markup based version of our widget. This is generally referred to as Progressive Enhancement.

The solution

First, we need to grab the SWFobject JavaScript library from the Goggle code repository, include it in our website scripts folder, and add a link in the head of the HTML page.

<script src="scripts/swfobject.js" type="text/javascript"></script>

Next, let's write the basic markup for our page. Remember, we're taking the progressive enhancement approach, so no mention of any Flash markup here!

#last-fm {
    display:block;
    overflow:hidden;
    height:200px;
    width:184px;
    background:url(http://cdn.last.fm/widgets/images/en/header/
                   chart/recenttracks_regular_black.png) no-repeat 0 -20px;
    text-decoration:none;
}

<div id="last-fm">
<p>Last.fm is a social media web site that analyzes ('scrobbles') the music 
      you play on your computer and suggests similar artists, 
      music styles and friends to you.<p>

<p>Install the Flash Player to view my recent tracks, or visit my Last.fm page below<p>

<a href="http://last.fm" title="Visit Last.fm" rel="Bookmark">Visit Last.fm</a>
</div>

Next, we need to create the script which attempts to add the Flash object to the page, which needs to pass several settings to the Flash movie.

The settings we pass to the Flash movie are specific to your own Last.fm account, so you will need to change the flashvars variables accordingly after creating you widget on Last.fm.

<script type="text/javascript">
    $(document).ready(function() {
        // Flash variables
        var flashvars = {};
        flashvars.siteroot = "";
        flashvars.type = "recenttracks";
        flashvars.user = "USERNAME";
        flashvars.theme = "black";
        flashvars.lang = "en";
        flashvars.widget_id = "WIDGETID";

        // Flash parameters
        var params = {};
        params.allowfullscreen = "true";
        params.allowScriptAccess = "always";
        params.allowNetworking = "all";
        params.quality = "high";
        params.bgcolor = "000000";
        params.wmode = "transparent";
        params.menu = "true";

        // Attributes
        var attributes = {};

        // Call SWFobject
        swfobject.embedSWF("http://cdn.last.fm/widgets/chart/friends_6.swf", 
          "last-fm", "184", "199", "7.0.0", 
          false, flashvars, params, attributes);
    });
</script>

Notice I have wrapped the script in a jQuery document function, which detects the availability of JavaScript. Don't forget to include the jQuery redist script if you use this!

The all important part is where we call swfobject.embedSWF. We pass the path to the Last.fm SWF file and the ID of the element we want to load the Flash movie into. As we have created a DIV with the ID last-fm, we pass "last-fm" as the element name.

The rest of the parameters deal with the width, height, SWF Flash version, and the parameters we have set in the flashvars and parameters arrays.

And, that's all we need to do, save your files, and fire it up. Switch off your JavaScript and refresh the page to check that your script is working correctly!

History

No changes at this time.