Music is an important element of the story here at The Price of Love.
My earlier post provided a method for posting playlists using last.fm and playlist.com.
But how can you post a individual song? You might do this with playlist.com by creating a new playlist which is only one song long. Is there a simpler way?
Two online music sites which are well-adapted for the purpose are goear.com and deezer.com, and this post provides step-by-step user instructions to help you add songs to your WordPress.com site using these two sites. You don’t need to register to either of the sites to use them.
goear.com is my present favourite for the task. It’s simple to use, with a wide and varied selection of music, as well as being a specialist in Hispanic music.
To find the song you want, search by title or artist in the search bar. Several links will likely show up, so test these to check they work. Once you’re happy, find the link that says ‘open in small in window’, and copy the url for that link, which looks something like this:
“http://www.goear.com/listenwin.php?v=xxxyyyy”
If you’d like to display the song details (and this post shows an example), wait for the song to load and then fast-forward all the way through. Then take a screenshot of the song details. You can use ‘print screen’ and then crop to fit if you wish, but I prefer to use image software such as IrfanView (it’s free to download at irfanview.com and the screen grab function is at:
File->Options->Capture/Screenshot->Start->CTRL+F11.
Crop the screenshot to 330×125px for a neat, clean look, and save the image as ‘play songname by groupname.jpg’. Then upload the image onto your webpage. Save the page, and then go into the HTML editor to hunt down the relevant code, which will look like this:
<a href=”http://yoursitename.files.wordpress.com/year/month/song-name-by-group-name.jpg”><img src=”http://yoursitename.files.wordpress.com/year/month/song-name-by-group-name.jpg” alt=”" title=”play-song-name-by-group-name” width=”330″ height=”125″ class=”alignnone size-full wp-image-xxxx” /></a>
Replace the section of code within the first two brackets to incorporate the song url as follows:
a href=”http://www.goear.com/listenwin.php?v=xxxyyyy” target=”_blank”
Now in the second section of code, fill in the alt tag to be the same as the title tag. The strip of code now looks something like this:
<a href=”http://www.goear.com/listenwin.php?v=xxxyyyy” target=”_blank”><img src=”http://yoursitename.files.wordpress.com/year/month/song-name-by-group-name.jpg” alt=”play-song-name-by-group-name” title=”play-song-name-by-group-name” width=”330″ height=”125″ class=”alignnone size-full wp-image-xxxx” /></a>
Save the page, publish and you’re done.
When you click on the image, it will open in a new window and play.
For a simpler method without the need for screen grabs and using a simple play button like this one, use this code:
<a href=”http://www.goear.com/listen.php?v=xxxyyyy” title=”play-song-name-by-group-name” target=”_blank”><img src=”http://roadsofstone.files.wordpress.com/2007/11/play-ville-de-lumiere-by-gold.jpg” alt=”play-song-name-by-group-name” width=”43″ height=”56″ align=”left” /></a>
deezer.com likewise has a varied selection of international music and is also especially strong on French artists.
To find the song you want, search under song title or artist in the search bar. Click on the song you want, and the player on the right will provide you with a permalink address: in this case it’s:
“http://www.deezer.com/track/189131″
To post this song linked to a deezer.com logo, modify the following code:
<a href=”http://www.deezer.com/embedded/small-widget-v2.swf?idSong=189131″ title=”play-world-price-of-love-by-new-order” target=”_blank”><img src=”http://www.deezer.com/embedded/footer.jpg” alt=”play-world-price-of-love-by-new-order”align=”left” /></a>
Adapt the code above for your song, save the post, publish and you’re done.
When you click on the logo, it will open and play your song in a microplayer inside a new window.
There are lots of other adaptations which you’ll be able to find – for example, you could adapt these codes within a text widget to post music in the sidebar.
Good luck, and enjoy your music!
: : 
: : 
: : 
: : 
: : 
13 responses so far ↓
einucent // 18 September, 2008 at 00:16 |
i’ve tried to copy/paste the Deezer player in a textwidget on my wordpress, and it doesn’t work. How come the flash objects are squeezed, do you have an explanation ?
Roads // 18 September, 2008 at 00:39 |
WordPress.com doesn’t allow direct embedding of flash applications. This means that when you add in the embed code which deezer.com provides for the purpose, WordPress.com strips out the flash element of the code string and so it doesn’t work.
The same limitation affects scores of custom-built widgets for a whole range of different purposes. Last.fm and playlist.com are both frustrating examples of this problem, which is exactly why I wrote the original ‘workaround’ tutorial for use with those sites.
You could solve the problem by moving your site to wordpress.org – but if that isn’t on your agenda, in the meantime the adaptation to the code I present here is a workaround solution, with the inevitable compromises which that description implies. Specifically I’ve adapted the code to open the player in a new window, hyperlinked from a static image.
In the meantime, if you’d like to see a deezer.com widget provided for WordPress.com, you should write to support@wordpress.com and ask them to provide one. A WordPress.com music widget has often been requested for music sites, with last.fm being the most obvious requirement, but so far one has yet to be made available.
I hope that helps you with some of the background you need.
Roads // 18 September, 2008 at 00:51 |
@einucent:
Reading your comment again, if you’re following the method here within a text widget and it doesn’t work because the player is squeezed, then this might be because the player is too wide for your sidebar.
If that’s the case, adding a width=”xxx” tag to the img section of the code string might solve the problem, provided that you make xxx equal to less than than the maximum width in pixels of your sidebar. The effect would be to resize the image as displayed on your site.
I’m not certain if this will work, but it may be worth trying.
Julia HH // 18 September, 2008 at 11:10 |
Roads, is there no end to your talents? A programmer and computer wizz, as well as a writer, a runner, a geologist, and a genuinely nice guy?
Roads // 18 September, 2008 at 13:18 |
Thanks, Julia. My talents fall short of Scottish country dancing.
No remedial training is planned. Not now. Not ever.
Julia HH // 18 September, 2008 at 15:47 |
If it involves wearing a kilt, that could be challenging, yes.
einucent // 19 September, 2008 at 01:28 |
Thank you for the answer. I do not plan to move towars the .org
A basic link to the playlist will make it
I’m a Western country dancer myself
Jennifer // 19 September, 2008 at 10:34 |
g*ds, Roads, you are such an enabler, but in a good way!
Roads // 19 September, 2008 at 23:46 |
@einucent
Western country dancing, eh? Good for you, but rather you than me.
I signed up to deezer.com to make a test playlist, and worked out how to get a deezer widget. It’s difficult to display code in a comment, so I’ve made a new music testing page to post the method.
I hope that helps. Kind regards from London, and enjoy your music!
Roads // 20 September, 2008 at 00:08 |
Jennifer
Many thanks for your comment and your support.
All the work put into the wordpress.com forums is much appreciated and frequently underestimated. Writing technical answers can sometimes (often) be a thankless task. But many thanks from me!
timethief // 20 September, 2008 at 01:42 |
Hi there,
You are brilliant. I’ve stumbled this post and you will get a trackback when I write mine.
JohnnyCash // 31 October, 2008 at 04:49 |
I dont know if you can embed flash on WP? If you can an easier way would be to use PLORF, they have an easy way to pull and add songs http://www.plorf.com
Roads // 31 October, 2008 at 09:45 |
Ah, Johnny. Thank you for the music, as that old song so memorably put it.
Four hundred acres, and a crap in the field. That was you, as I recall.
Plorf sounds interesting, and I must go to check it out.
Unfortunately, wordpress.com doesn’t allow flash. That’s the whole reason behind the workarounds presented here.
I suspect that if you want to use plorf on a wordpress.com site, you’ll have to come up with a similar method.
Kind regards from London, and do keep the music coming…!