Music is an important element of the story here at The Price of Love.
There are several good options for adding music to a WordPress.com site. Copyright law prevents you from loading many mp3 files directly onto your site, but you can avoid those problems by using last.fm and playlist.com.
This post provides step-by-step user instructions to help you add music to your WordPress.com site using these two alternatives. I’m not a fan of sites with auto-start music, and so I’ve configured these instructions to avoid it.
You have to click on the links here to make them play.
last.fm is a personal internet radio and music social network site based in London, with worldwide reach.
last.fm offers a range of flash-based widgets which can’t yet be used on WordPress.com. But you can still use basic last.fm charts in WordPress.com – and there’s an example on the sidebar of this site.
Here’s how you can add a chart to your site:
1* Go to ‘Image charts for forums and blogs’ at http://www.last.fm/tools/charts/?subpage=gallery#LastBody
2* Under ‘Chart Style,’ select number of rows, and configure the music selection you want to feature – e.g. you might want to display recent tracks, favourite albums / artists etc.
3* Under ‘Find a Style to Suit Your Site,’ configure the design of the chart you want to display – including preference for page or sidebar versions
4* Under ‘Code for your site,’ select ‘My Space / HTML’
5* Cut and paste the code provided into a text widget – here’s mine, and here’s how it looks: <p> <a title=’thepriceoflove’s playlist on last.fm’ href=’http://www.last.fm/user/thepriceoflove/?chartstyle=SidebarPlain’><img src=’http://imagegen.last.fm/SidebarPlain/recenttracks/8/thepriceoflove.gif’ border=’0′ alt=’thepriceoflove’s playlist on last.fm’ /></a> </p>
6* Click on the chart to access the last.fm playlist and play the music from there.
Advantages:
* last.fm is probably the world’s leading music social network site, meaning that you can find friends with similar music taste from all around the globe.
* The last.fm software is compatible with iTunes, meaning that the site will keep track of all the music you play on your computer or on your iPod.
* As your play history grows, so last.fm learns your musical tastes and provides increasingly well-targeted recommendations for great new bands to try.
You can get to know a lot of excellent new music this way.
Disadvantages:
* The chart works on playlists which have to be at least 15 tracks in length. You can’t easily control the play order, or load individual tracks on to your site.
* Although the last.fm site works brilliantly, the link from the chart on your site to the last.fm servers seems to update only intermittently. Sometimes you can force the chart to update by playing a single track in iTunes on your computer.
This site is newer, and it works in a different way entirely.
playlist.com finds music which is already uploaded onto the internet, and it constructs a web-playlist by accessing music from those sites.
Again, flash-based widgets exist, but no ready-made charts are available for use in WordPress.com, so you need to find a different method.
Here are a couple of ways of making it work.
1* set up your playlist on playlist.com and save it.
2* look at the playlist url and take a note of the playlist number contained within it – in my case it’s ‘16380909’.
3* make a note of the playlist title – in my case it’s ‘thepriceofloves playlist’
4* for the more advanced method, take a screen grab image of your playlist page, and then crop and resize to fit. You can use any image package – but I use IrfanView.com, where the screen capture function is at Options – capture/screen shot – click window – hit F11.
5* save the new image in your wp.com image files using ‘add media’ to access the image uploader, and note the url of the image once uploaded. In my case it’s http://energetic.files.wordpress.com/2007/10/projectplaylist16380909.jpg
6* insert the image at the page and location where you want to display it.
7* on the gallery or media library page for the image, write a caption and a description for the image. In this case it’s ‘play-thepriceofloves-playlist’.
8* Now in the HTML editor, insert the following code: <a title=”play-thepriceofloves-playlist” href=”http://www.musicplaylist.net/standalone/16380909/mc/config/ config_black_noautostart.xml” target=”_blank”><img src=” http://energetic.files.wordpress.com/2007/10/projectplaylist16380909.jpg” alt=”play-thepriceofloves-playlist” hspace=”6″ vspace=”6″ width=”448″ height=”659″ /></a>
This gives you a clickable playlist image like this:
9* for a simpler method, avoiding the need for screen grabs, you can just add a ‘play button’ using your equivalent of my code: <a title=”play-thepriceofloves-playlist” href=”http://www.musicplaylist.net/standalone/16380909/mc/config/ config_black_noautostart.xml” target=”_blank”><img src=”http://roadsofstone.files.wordpress.com/2007/11/ play-ville-de-lumiere-by-gold.jpg” alt=”play-thepriceofloves-playlist” hspace=”6″ vspace=”6″ width=”43″ height=”56″ align=”left” /></a>
This just gives you a clickable play arrow like the one shown.
Advantages:
* Playlists can be as long, or as short as you want. This means you can load individual songs, or hundreds, all in one shot.
* Playlists play in a pre-determined order, which you can control.
Disadvantages:
* The nature of music on the web is transient. Songs are uploaded and taken down constantly, which means that the links break and you will need to maintain your playlist in good working order regularly.
* If a link is broken, you’ll have to find the song somewhere else on the internet, and then re-upload it.
* The configuration I’ve used here opens a new tab for the playlist, but it changes the size of the window. It might be possible to configure the commands to open a new window, but this will be blocked by many new browsers as a pop-up, and so I’ve avoided it here.
* * * * *
These methods each have their own uses and adaptations. I use last.fm in the sidebar to show a dynamic list of the music I’m playing at the moment, and playlist.com to feature static playlists or individual tracks.
I’m sure there are lots of other uses and adaptations which you’ll be able to find.
Good luck, and enjoy your music!
: : 
: : 
: : 
: : 
: : 
41 responses so far ↓
chris // 11 May, 2008 at 03:00 |
This is a huge help especially with the playlist.com HTML thanks!!!
dodka // 11 May, 2008 at 12:54 |
Good post, thx for that : )
ellaella // 11 May, 2008 at 13:16 |
Excellent tutorial. Bookmarked.
FOL // 11 May, 2008 at 18:12 |
Bookmarked this too! Thanks!
Roads // 11 May, 2008 at 21:52 |
Thanks very much to everyone. Hope you find this useful.
If you come across any snags, do just let me know, and I’ll make sure to help you out.
All best wishes from London.
Graha // 12 May, 2008 at 13:53 |
well nice tutorial very helpfully to my website
Roads // 25 May, 2008 at 10:40 |
Playlist.com may have a few problems ahead:
Nine major record companies sue Playlist.com – claim massive copyright infringement.
chris // 25 May, 2008 at 23:44 |
@ Roads – I thought this would happen sooner or later.
Roads // 26 May, 2008 at 11:30 |
Yes, Chris – I’m guessing that the record companies are uneasy that the music to which playlist.com links may have been illegally uploaded in some cases.
The site says that it pays royalties to the record companies, but perhaps that arrangement doesn’t work as well as some record companies would like.
The fact is that the internet has changed the way we use and access music. The music industry will have to adapt to those changes creatively and constructively to survive.
Let’s hope that a solution can be found which allows playlist.com to keep operating, to the benefit of music lovers, artists and the industry alike.
pomegranate02 // 1 June, 2008 at 23:45 |
Brilliant – thanks so much for an easy to follow tutorial.
Roads // 2 June, 2008 at 12:08 |
That’s excellent, pom, and I’m glad to see you’ve got last.fm working on your site already.
Scotti // 30 June, 2008 at 02:12 |
Hi Roads,
Do you know of any current options for WordPress that allow music to play automatically on the blog as we once had with Sonific?
Thanks,
Scotti
Roads // 30 June, 2008 at 12:23 |
Hi Scotti, and thanks for your message.
Unfortunately, I don’t know of any solutions which allow sounds to play automatically on WordPress.com – but like many other users, I’m not a fan of autoplay music, so I haven’t looked too closely.
Meanwhile, the audio widget is still listed in the FAQ but actually I haven’t been able to get it to work for a couple of months.
I’d say the best approach is to send an e-mail to support, and ask their advice. Do please keep us posted on their response. Best of luck !
softtouchblog // 10 July, 2008 at 20:34 |
Hi,
Could you please tell me how you make the player look so long? All i get is a tiny little screen shot -
like 4 songs maybe.
Thanks very much.
Roads // 10 July, 2008 at 22:23 |
Sure, softtouch. To make the playlist so long, I took several screen grabs, dumped them into PowerPoint, stretched, aligned and adjusted them to fit together exactly, and then I grouped them, and copied and pasted the composite back into IrfanView.
After that I saved this as a new single, larger image, and uploaded it into WordPress.
Sneaky, but it works. Hope it does for you.
softtouchblog // 10 July, 2008 at 23:35 |
omg, lol.. ok, when i say, blonde, has no power over me… i literally MEAN, im so dumb they need a new saying..
please.. is there a way for YOU or someone else to do it?
Roads // 10 July, 2008 at 23:51 |
So, a new career beckons as unpaid music technology consultant? Sounds almost like a promotion…
Well, the best approach for you might just be to send a support ticket to support@wordpress.com, quoting this post and asking them to provide a widget for music on wordpress.com. That’s been oft requested, but remains a little overdue.
Failing that, you could always send me a link to your playlist using the e-mail address on the info page, and I’ll see if I can get our practised team of top experts here (ahem) to assist once the espresso is uploaded in the morning…
softtouchblog // 11 July, 2008 at 02:29 |
opt, emailing you, lol
catgirl8 // 13 August, 2008 at 18:16 |
hey author of “the price of love”
i want to say thank you for your project playlist musiclist!! I like most of the music you like, its funny ^^
Greetz
Catgirl8
Roads // 14 August, 2008 at 08:39 |
Thanks, Catgirl8. I’m glad you liked the music. Project playlist.com is causing some problems here, since the links to songs seem very transient. After a while they don’t work any more and have to be re-selected.
For now I’m tending to use goear.com to showcase music here, and I’ll be posting a method shortly. deezer.com is another good alternative. However, both of these work for single songs rather than playlists.
kv // 18 August, 2008 at 17:07 |
Love it! It really helped a lot!
Roads // 18 August, 2008 at 20:10 |
Great stuff, kv. Glad it worked for you. Regards from London…
catgirl8 // 9 September, 2008 at 13:29 |
@roads: yes, playlist.com is really in trouble…and it goes on my nerves, when my songs in the list disappear ~.~
Thank you for the goear link! I’ll take a look on that site ^^
Roads // 9 September, 2008 at 22:49 |
That’s right, catgirl8. Meanwhile, I’m slow in posting up that method for goear.com and deezer.com, but it’s coming up next.
Did you know that you can now customise your last.fm charts? Here are some recent user examples, and here’s ros14, a new one of mine.
Viele Grüsse, und viel Spass !
bekaboo // 10 September, 2008 at 20:41 |
Thank you for this post! Using this as a springboard, I was able to post a link (with a thumbnail photo) to my playlist via a text widget. Worked great!
Roads // 10 September, 2008 at 22:50 |
Excellent, Bek – that looks great and I’m glad you found this helpful.
Eman // 1 January, 2009 at 20:37 |
THANK U ^_^
Roads // 2 January, 2009 at 19:10 |
That’s a pleasure, Eman — and enjoy your music!
Ally // 14 January, 2009 at 20:59 |
Roads, I’m new to all so forgive me. But the one thing I don’t get is this: do I need to add a widget first in order for the playlist to appear on my blog??? Just confused about where this playlist I’ve now created is gonna go on my blog., Thanks!
Ally // 14 January, 2009 at 21:33 |
I just tried using a text widget & I’m obviously doing something incredibly wrong. Frustrating. I don’t know how to get the clickable arrow you referenced above. I guess I’m not coding it right? Please help
Roads // 14 January, 2009 at 22:58 |
Hi Ally
You don’t have to use this method within a text widget. That’s OK with the last.fm image that I use here but if you do the same with a playlist.com playlist then it will almost certainly be too wide for your sidebar.
If you’re having trouble then the first step I’d try would be to copy that code shown in my step 9 exactly and paste this into your page to check that this will work. This will show my playlist, and then you can edit the code to link it to your playlist instead by assigning the correct number.
The absolutely critical point here which you have to note is that you are pasting this code into your page within the HTML editor. If you paste this into the visual editor, it won’t work at all.
Hope that helps, and enjoy your music.
Ally // 14 January, 2009 at 23:22 |
The playlist.com image has changed in that you can’t get a full screen shot of everysong so I just skipped to step 9 thinking that my entire list wouldn’t appear – just the play button. Is that right?
And you mentioned that this will appear on my page…but where? Just make a post & stick it there? I’m really wanting it to be on my sidebar – not as a post that will disappear for my readers the more I post. Does that make sense?
Ally // 14 January, 2009 at 23:29 |
I just put your code into a blank post and it worked, I guess, but not at all hat I was expecting. It jsut gives this tiny blue dot. When I cliked on it a pop-up window appeared with your playlist.
Ugh. Really regretting leaving blogger for wordpress.
Roads // 15 January, 2009 at 00:08 |
Thanks – I looked at that again and WordPress.com has undergone two new releases since I wrote this post, and the code has changed accordingly. I should update this tutorial and I’ll do that when I get some time. For now here’s a temporary fix.
I’d write it here but it’s really hard to get code to show up in comments, so I’ve posted it on a temporary page for now. You’ll need to check that you correct the inverted commas into vanilla versions within the HTML editor. They reformat when I publish on the temporary page and you don’t want them to.
Try this: revised code
Roads // 15 January, 2009 at 00:33 |
Ally:
A couple more points:
1) On getting a long playlist into a single screen grab image — I agree it can’t be done. You have to work around this — the easiest way is to take two or three grabs of top, middle and base, and then reassemble them in PowerPoint, group, select all and copy back into IrfanView as a single composite image.
This whole method is a workaround — I never said it was pretty…
2. If that’s too hard, alternatively you can always re-size your playlist image before you post it on the sidebar, or you can re-size it in the page, just as you can with any other image. It’ll be smaller and harder to read, but it will still be recognisable as a playlist.
3. Another route is to use the last fm method I use, using the image options and code I use for that purpose. Just select the number of songs you want to show in the playlist by modifying the code appropriately, and then play the songs on your iPod in the exact order you want to show up. Then log in to last.fm, sync your iPod with iTunes, scrobble, and the ‘playlist’ will appear on your site in the order you want.
The only hassle here is that if you sync your iPod again whilst logged into WordPress, then the widget will reconfigure to show the most recent songs you’ve played. So you may well have to set up a separate temporary account, just to get this particular playlist you want.
Again — this is not elegant, but it works as you can see in my sidebar.
4. As for your concerns over WordPress vs Blogger, well — you pays your money and you takes your choice. If you pay to host your own site at WordPress.org then you can access a range of music widgets and avoid this hassle. If you want it free, as it is at WordPress.com, then you have to use a workaround or two to make up for the fact that WordPress.com does not accept javascript applications.
That’s just how it is. WordPress.com is most inflexible on that point. It’s been argued endlessly, to no avail. Likewise many requests have been made to provide a decent music widget for WordPress.com, and this has not been listened to. I don’t know why that is, and it seems like a huge opportunity missed. But take that up with WordPress.com and not with me (maybe leave a comment on Matt’s site if you want to, since he’s the boss).
Apart from the apparent blindspot of failing to provide any music playing options, which I must agree with you seems stubborn, daft and puzzlingly inexplicable, I’d still say that in just about every other respect, WordPress.com is far superior.
Anyway. I hope all that helps. A bit.
jwhoadley // 14 February, 2009 at 21:46 |
hi roads, i’m just getting my blog off the ground but wanted to get a playlist on there as i had already created something there. however, i’m a bit confused. i want to use the larger version. at which point i use Ir Fan. how do i grab the page (select and paste)? what am i cropping? everything but the playlist? playlist generates codes for a blog. can i use that with html editor? sorry for the dumb ?s
thanks
Roads // 16 February, 2009 at 19:14 |
Hi again, JW. Playlist gives you codes for a range of different blog providers, but since those codes require javascript then unfortunately you can’t use them with WordPress.com. This is a way around that problem.
To take a screen grab of your playlist in IrfanView, select Options from the top menu…
Options -> Capture/Screenshot -> Full desktop area -> Start -> Ctrl + F11 … and then drag and click to select the area you want … then Edit -> Crop Selection.
If your playlist is a long one, you’ll have to copy and paste several screen grab images onto a Power Point slide, arrange them as you want and then group them into a single image and copy back into IrfanView to save them.
It sounds a bit fiddly, but it’s not all that hard once you get started. Drop me a line if you get stuck.
Good luck, and enjoy your music!
bluesmokeofparadise // 17 February, 2009 at 14:24 |
Can’t thank you enough for the lesson and info.
Exactly what I needed.
Roads // 17 February, 2009 at 22:34 |
Thanks, Blue. Don’t forget that while last.fm and playlist.com provide routes for longer playlists, you might find that goear.com or deezer.com provide decent alternatives for posting single songs.
Best of luck, and enjoy your music.
nournours // 23 May, 2009 at 05:36 |
Hi !
I past the LastFM code provided into a text widget RSS. On the screen of my blog, the widget appears but with the mention “An error has occured…”
Roads // 23 May, 2009 at 08:29 |
Hi, nournours,
If the widget has appeared, that’s great. The message you’re seeing is likely because it’s not seeing the songs you’ve played.
Make sure you’re logged into your last.fm account. Then check that you’re using the code for your last.fm account rather than mine. And finally then play a few songs in last fm. Sometimes it can take several hours (or even a few days, on occasion) for the last.fm servers to update. They’re notoriously hit and miss in updating your playlist automatically, but playing a song in your iTunes or last.fm will sometimes wake them up.
I hope that helps, and best of luck!