(Updated for Delicious's change of location for their Playtagger images.)
Here's a very basic step by step guide for beginners to blogging, in response to the questions by
Athen and others on
my post on Delicious's Playtagger:
1. In your blog template or web page, just before it says "</head>" (e.g. in the line before that bit), insert the following code, which you can copy and paste, then publish or republish your template:
If you use Blogger/Blogspot, from your dashboard after you login click the name of the blog then Template, and look for the "</head>" line in the big box, paste the code below just above that line, click Save Template Changes then Republish.
<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>
So your template would now read, in the relevant section:
<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>
</head>
1a.
Icon alignment (Added 6 February 2006 and edited on 21 and 22 February 2006) Is the Playtagger icon not aligned properly? (It may appear to be a bit higher than the line the MP3 link is on, as in
this example post). If so, it's probably to do with the CSS code for images in your blog template (padding, borders etc). To fix that, there are two options (the second of which I'll cover below). (Ideally if
Delicious were to give their icon a class to reference it by, that would be the best solution as you wouldn't need the second step, but until they do so, this seems the best way.)
First way: insert this extra code into your template in the line just before the "</style>" line in your blog template:
.mp3 img {
margin:0;
padding:0;
vertical-align:baseline;
border:0;
}
1b.
(Added 21 February 2006). Alternatively, or in addition to 1a if you've already implemented 1a, do these two things to line up the icon properly even for MP3 links in your old posts:
First, 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>
Second, in your head section, just before the </head> line, copy and paste the following Magical Sheep modified Javascript code (yes, it's long, but it's just copy and paste) INSTEAD OF the one line of code in step 1 above (i.e. you should
delete the code mentioned in step 1 if you'd previously inserted it)
eitherthis code (
example post using this method)
(updated 7 May 2006):
<script type="text/javascript" src="http://improbulus.googlepages.com/playtagger_magicalsheepmod.js"></script>
orthis code (
here's an example post):
<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://static.delicious.com/img/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://static.delicious.com/img/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+'&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+'&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://static.delicious.com/img/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>
The first 1b method just involves adding one line rather than a whole bunch of code - 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 (I uploaded the script to a free file hosting provider). 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 1b method above (putting the whole long code into your template) eliminates dependence on the file host, but your template is a bit longer.... it's your choice.
1b at first sight seems a bit more cumbersome than 1a, but in fact it saves manually adding those spans to new MP3 links (see 4a below) and also fixes the alignment of old links, so it's a better solution than 1a and 4a, I think - unless of course Delicious go and change their original Javascript or the way Playtagger works! In which case, just to warn you, 1b may stop working, so in some ways 1a and 4a may be safer.
1c.
Changing the Playtagger icons. If you don't like the look of the Play and Stop icons provided by Delicious, you can use your own icons. First, make your icons - one for Play and one for Stop - and upload them somewhere, e.g. your Blogger photo/pics space. Make sure you note down the URL of each one. Then insert in your template the long version of the code given at 1b above, but now you need to edit the two bits I've put in red. In that code, delete
http://static.delicious.com/img/play.gif and insert in its place the URL of the icon for the Play control that you uploaded earlier. But make sure you do NOT delete the quote marks ', leave them well alone. Then, delete
http://static.delicious.com/img/stop.gif and insert instead the URL of the icon you want to use for the Stop control. Save your template and republish, and that's it.
How to play MP3 files on your blog post or webpage
2. Is the MP3 file already on the Web? If yes, note down or copy its URL i.e. Web address - e.g. for Cory Doctorow's
Copyfighters London August 2005 speeches the URL for the first speech is
http://www.archive.org
- and go to step 4. If no, go to step 3.
3. The MP3 you want to play must already be on the Web and the Delicious script needs to know the permanent URL of the MP3. If your ISP lets you use your free webspace to store MP3s, you can upload your file there. If not, find a hosting provider which allows it. I personally use
Ourmedia.org (which promises "free storage and free bandwidth for your videos, audio files, photos, text or software. Forever. No catches." ). For those who want to use Ourmedia (and it's not the easiest in the world due to a trap I'll tell you about), I have written a
separate post on how to store the MP3s and other media files you've created on Ourmedia. So, note down the URL of the MP3 from wherever you've uploaded it.
Keep it legal, folks! Hosting providers almost always (if they don't ban MP3 hosting outright) only allow LEGAL MP3s - e.g. of your own music that you've written/recorded, speeches that you've made/recorded, and the like. Not only that, but if you upload illegal MP3s you may get into trouble. Heck, even if you just link to illegal content, you may get done. Yes, I know the law hasn't kept up with progress in technology and changes in society, but it's still the law, so best not risk it in my view. If you include a playable link on your blog or webpage to an MP3 that you know is illegal, that's pretty blatant (and not the smartest thing to do on a blog that's clearly yours), and it would be easy for the powers that be to track you down and fine you or worse. Also, if you've recorded someone else speaking or singing etc, it's best get their permission before you make the recording available to the world and her husband on the Net.
4. To add an MP3 file to make it playable on your blog or web page, once you've added the Delicious Playtagger script to your template or webpage as per step 1 and noted the URL of the MP3 as per step 2, all you have to do in your blog post or webpage is to put in a link to the MP3 file, just like you insert a link to a webpage. For example
Cory Doctorow's London Copyfighters kickoff speech on 21 August 2005 is at
http://www.archive.org
(if you want to see some pics and hear the other speeches from that day they're
here). So all I do is insert this on my blog post:
<a href="http://www.archive.org">Cory's speech</a>
and I will get this playable link displayed:
Cory's speechIn Blogger you can get the same result by typing the link text (e.g. "Cory's speech"), highlighting it, pressing Ctrl-shift-a or clicking the link button, and entering or pasting the URL into the box popup box)
To download the MP3 file or play it in your regular MP3 player rather than via Playtagger, just rightclick the link text ("Cory's speech", in the above example) and Save or leftclick it rather than use the right arrow icon. That's it!
4a.
[Added 6 February 2006:] If the Playtagger icon isn't aligned properly, as mentioned in 1a above, to fix it one method is as per 1b above. Then, whenever you include an MP3 link in your blog posts, you need to insert <span class="mp3"> just before the link (NB it's case-sensitive so it has to be lowercase "mp3" if you've inserted the code in 1a), and </span> just after it. So the code for your link would look something like this (though the span bit won't display):
<span class="mp3"><a href="http://www.example.com/yourmp3.mp3">Name of MP3</a></span>
You have to remember to do that for every MP3 link, including in your old posts, or the alignment of the Playtagger icon for that link won't be changed - it's not enough just to insert the code in 1a, you have to wrap your MP3 links in those span tags too.
[Added 21 February 2006:] Alternatively, if you prefer, try first adding the extra code to your template as set out in 1a. Then you don't have to add the span tags to anything and the icons will be neatly aligned even for old posts. But just to repeat, 1b may seem a bit more cumbersome, having to add longer code, but it saves having to manually add those spans to new MP3 links and also fixes the alignment of old links, so it's the better solution I think - unless of course Delicious go and change their original Javascript or the way Playtagger works! In which case, just to warn you, 1b may stop working, so 1a and 4a may be safer in some ways.
Thanks to CSS Caesar
Kirk (yet again) for both solutions.
5. Want to attach the MP3 link to an image? This will make the Del.icio.us play icon
show just before or just above the picture. To do this, you can just "bookend" the usual image link <img src="imageurl" /> between the MP3 link tags in the usual way, like this (I've put in bold the bits you'd add in, and "linktoMP3file.mp3" is obviously the URL of your MP3 file):
<a href="linktoMP3file.mp3"><img src="imageurl" /></a>
If you use
Blogger and have
uploaded your pics to Blogspot via Blogger, it looks trickier, but it's not. The code for the photo or pic is going to look something like this:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2472/807/1600/Image%2833%29.0.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/blogger/2472/807/320/Image%2833%29.0.jpg" border="0" alt="" /></a>Just stick the <a href="linktoMP3file.mp3"> before that code (or before the image, in Compose view), and the </a> bit just after that code (or just after the pic, in Compose view), and it'll work just the same.
You don't even need to have text or an image between the "<a href=etc>" links to the MP3 file, the Del.icio.us Playtagger icon will still appear where you've inserted the link - if you really want to make people guess what on earth the audio file is! A title or description etc. of the file is kinder...
Podcasts
If you use Playtagger and have a Feedburner feed where you've turned on Smartcast, to answer
Anon's question, it still works for podcasting, the script won't break it. Try my feed http://feeds.feedburner.com/ConsumingExperience and you'll see.
What next?
I am rather hoping that the nice folk at
Delicious will twiddle with Playtagger so that it can play
Ogg as well as MP3 files, and maybe even video files too. Wouldn't that be great? Give us an inch and...
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
