MP3s: align Delicious Playtagger icon in old posts

Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 简体中文

Here's one way to fix the alignment of your Del.icio.us Playtagger icons without having to go back to your old posts and add span tags round your MP3 links, following the lament by CL about the number of old posts she'd have to edit. (Previously I'd amended my original post on how to use the Delicious Playtagger script to make MP3s easily playable and bookmarkable on Delicious from your blog or Web page, in order to add a suggestion on how to get the Playtagger icon to line up properly with the text). I've now updated the original post to include the following info too. You don't have to implement this of course, but it does make the icons look better, and it's nice to have consistency across all your posts, plus it saves manually adding span tags (though note that if Delicious change their original script or the way Playtagger works, this may stop working, so in some ways their original code plus the span method is safer).

This fix comes courtesy of my Magical Sheep pardner Cap'n Kirk, who suggested that, as the original Delicious script doesn't (oddly enough) come with a class for styling, why not simply modify the script to insert a line adding a class name for the icon image?

So, there are just two things you need to do to your blog template or webpage if you want the Playtagger icons for your old MP3 links to be aligned properly.

1. Insert the Magical Sheep-modified Javascript

In your head section, delete the original Playtagger script if you've previously included it, i.e. the

<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>

line, and in its place, e.g. just before the </head> line, copy and paste

either
(updated 7 May 2006) this code (example post using this first method):

<script type="text/javascript" src="http://improbulus.googlepages.com/playtagger_magicalsheepmod.js"></script>

or
the following code (the added line for the class to line up the icon is in bold for those who want to know; for those who don't, just ignore it, it doesn't matter if it's bold or not, you can just copy and paste the following as is) (here's an example of this alternative):

<script type="text/javascript">
if(typeof(Delicious) == 'undefined') Delicious = {}
Delicious.Mp3 = {
playimg: null,
player: null,
go: function() {
var all = document.getElementsByTagName('a')
for (var i = 0, o; o = all[i]; i++) {
if(o.href.match(/\.mp3$/i)) {
   var img = document.createElement('img')
   img.src = 'http://del.icio.us/static/img/mp3/play.gif'; img.title = 'listen'
   img.height = img.width = 12
   img.style.marginRight = '0.5em'
                                img.className = 'mp3';
   img.style.cursor = 'pointer'
   img.onclick = Delicious.Mp3.makeToggle(img, o.href )
   o.parentNode.insertBefore(img, o)
}}},
toggle: function(img, url) {
if (Delicious.Mp3.playimg == img) Delicious.Mp3.destroy()
else {
if (Delicious.Mp3.playimg ) Delicious.Mp3.destroy()
var a = img.nextSibling, c=''
if (document.defaultView && document.defaultView.getComputedStyle) c = document.defaultView.getComputedStyle(a,null).getPropertyValue('color')
else if (a.currentStyle) c = a.currentStyle['color']
c = c.replace(/^rgb|[ ()]/g, '')
var hex = c.match(/^#?([a-f0-9]{6})$/), hexSm = c.match(/^#?([a-f0-9]{3})$/), rgb = c.match (/^([0-9]+),([0-9]+),([0-9]+)$/)
if (rgb) { var c16 = "0123456789abcdef", c=''; for(var i=1,d;d=rgb[i];i++) { var j=d%16; c=c+c16.charAt((d-j)/16)+c16.charAt(j) } }
else if (hex) c = hex[1]
else if (hexSm) c = hexSm[1].charAt(0) + hexSm[1].charAt(0) + hexSm[1].charAt(1) + hexSm[1].charAt(1) + hexSm[1].charAt(2) + hexSm[1].charAt(2)
else c = "000000"
img.src = 'http://del.icio.us/static/img/mp3/stop.gif'; Delicious.Mp3.playimg = img;
Delicious.Mp3.player = document.createElement('span')
Delicious.Mp3.player.innerHTML = '<object style="vertical-align:bottom;margin-right:0.2em" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' +
'codebase=" http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 <http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0> "' +
'width="100" height="14" id="player" align="middle">' +
'<param name="wmode" value="transparent" />' +
'<param name="allowScriptAccess" value="sameDomain" />' +
'<param name="flashVars" value="theLink='+url+'&amp;fontColor='+c+'" />' +
'<param name="movie" value="http://del.icio.us/static/swf/playtagger.swf" /><param name="quality" value="high" />' +
'<embed style="vertical-align:bottom;margin-right:0.2em" src="http://del.icio.us/static/swf/playtagger.swf" flashVars="theLink='+url+'&amp;fontColor='+c+'"'+
'quality="high" wmode="transparent" width="100" height="14" name="player"' +
'align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"' +
' pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'
img.parentNode.insertBefore(Delicious.Mp3.player , img.nextSibling)
}},
destroy: function() {
Delicious.Mp3.playimg.src = 'http://del.icio.us/static/img/mp3/play.gif'; Delicious.Mp3.playimg = null
Delicious.Mp3.player.removeChild(Delicious.Mp3.player.firstChild); Delicious.Mp3.player.parentNode.removeChild(Delicious.Mp3.player); Delicious.Mp3.player = null
},
makeToggle: function(img, url) { return function(){ Delicious.Mp3.toggle(img, url) }} }

Delicious.addLoadEvent = function(f) { var old = window.onload
if (typeof old != 'function') window.onload = f
else { window.onload = function() { old(); f() }} }

Delicious.addLoadEvent(Delicious.Mp3.go)
</script>

[Edited 7 May 2006:] File Lodge has proved to be erratic and unreliable so I've uploaded the script to Google Pages and changed the link above.[Edited 22 February 2006:] I managed to upload the script to free file hosting provider File Lodge, the first method with the one line code, above - it's the same code as the full code above, but instead of your having to paste the whole thing into your template, you can effectively just link to the script which is located externally using just one line of code. But note that if the external host goes down or is slow, that will affect your page and MP3s and it might not work at all. The second method above (putting the code into your template) eliminates dependence on the file host, but your template is a bit longer.... it's your choice. I did hope to make it just one line of code to paste in, but I couldn't find a free file hosting service that allows unlimited direct downloading of .js files where I could upload the modified script which I've set out in full above (though if the host goes down, the script won't work, and if it's slow to respond then that will slow down the loading of your pages with the MP3 links). (Before anyone suggests Filelodge, I did try to sign up but keep getting an internal server error - so if anyone has any other ideas as to a suitable file host, please let me know!

It would be great if Del.icio.us were to modify their standard Playtagger script just to add in a class so we can revert to their one-line script, we can but hope...)

2. Modify the CSS

Copy and paste the following into the head section of your template or web page, between the <head> and </head> lines e.g. just before the </head> bit:

<style>
img.mp3 {
margin:0;
padding:0;
vertical-align:baseline;
border:0;
}
</style>

Now one good thing is that, even if you'd previously used the span method (see 1a and 4a of the previous post) to get the Playtagger icon to line up in your newer posts, inserting this new code won't screw up any of those posts (as long as you add the above CSS to your template too, along with the long Javascript code).

So there you have it: the alignment of icons for your old MP3 links can now be sorted too. And this method also saves you having to add "span" manually round your MP3 links as per the previous post.

However, be warned that if Delicious go and change their original Javascript or the way Playtagger works, this method may stop working and you may need to revert to the original Delicious Javascript as in 1. of my original post .

---

Technorati Tags: Delicious, del.icio.us, social bookmarks, Playtagger, Play tagger, tagging, music, audio, MP3, MP3s, play MP3s, blog, blogs, blogging, blogging tools, blog tools, howto, introduction, guide, tutorial, beginners, Improbulus, A Consuming Experience, Consuming Experience