Also ich bin immer noch total begeistert, von dem was ich da gebaut habe. Ein superkleines Widget rechts oben, dass den akutell oder zuletzt gespielten Track aus meinem Last.fm Account ausliest, dazu eine kleine Flashanimation und das beste, das Cover wird per jQuery, wenn man mit der Maus über den Titel fährt, angezeigt



Und so gehts:

Per Google habe ich diese Seite gefunden: http://last.aelabs.net Der junge Mann hat ganze Arbeit geleistet und ein fähiges PHP-Skipt geschrieben. Das ihr hier runterladen könnt. Dort steht eine komplette Anleitung. Ich fasse aber nochmal kurz zusammen was ihr machen müsst:

Die lfmfuncs.php ladet ihr ins Hauptverzeichniss eurer Wordpressinstallation

Bevor es losgehen kann, braucht ihr aber noch ein Last.fm API-Key

Jetzt könnt ihr den genannten Code an der gewünschten Stelle in eurem Theme einfügen.

</p>
<p><?<br />
$username = &#8216;Last.fm Benutzername&#8217;;<br />
$apikey = &#8216;müsst ihr euch schon selber besorgen <img src='http://www.frederikm.de/wp-includes/images/smilies/face-wink.png' alt=';-)' class='wp-smiley' /> &#8217;;<br />
$method = &#8216;RecentTracks&#8217;;<br />
$formatting = &#8216;</p>
<p><a href="[url]" class="screenshot" rel="[large]" Title="[artist]">[artist] &#8211; [name]</a>&#8216;;</p>
<p>$number = &#8216;1&#8242;; //Wieviel Titel sollen angezeigt werden?<br />
$defaultart = &#8221;;<br />
$offset = &#8216;1&#8242;;</p>
<p>include(&#8216;lfmfuncs.php&#8217;);<br />
lastfmdata($method,$username,$apikey,$formatting,$number,$defaultart,$offset);<br />
?></p>
</div>
<p>

Das ganze lässt sich beliebig nach Lust und Laune mit CSS formatieren.

Was jetzt noch fehlt ist der Covertooltip. Das JQuery-Script gibts hier: http://cssglobe.com/post/1695/ Wenn es funktioniert könnt ihr einem beliebigen Link die Attribute class=”screenshot” rel=”bildurl.jpg” zuweisen und bekommt so den Mouseovereffekt.
Am Besten alle drei main.js einbinden. Dann habt ihr Tooltip, Preview und Screenshot. Zuletzt noch diesen Code in eurer Stylesheet einfügen:

<br />
#screenshot{<br />
	position:absolute;<br />
	border:1px solid #000;<br />
	background:#333;<br />
	padding:5px;<br />
	display:none;<br />
	color:#fff;<br />
	}</p>
<p>#preview{<br />
	position:absolute;<br />
	border:1px solid #000;<br />
	background:#333;<br />
	padding:5px;<br />
	display:none;<br />
	color:#fff;<br />
	}</p>
<p>#tooltip{<br />
	position:absolute;<br />
	border:1px solid #000;<br />
	padding:2px 5px;<br />
	color:#3EC0FF;<br />
	display:none;<br />
	background-color: #333;<br />
	}<br />

Falls es noch Fragen gibt, die Comments sind offen Viel Spaß damit.

Achso, falls jemand die Flashanimation will, könnt ihr als PSD und SWF herunterladen: psd_swf_datei
Wer kennts? Stimmt es ist das Last.fm Gif Ich hab es einfach in Photoshop geladen, eingefärbt und gespiegelt. Da GIF´s allerdings keinen Alphachannel haben musste ich es als kleines Flahs SWF exportieren.

Verwandte Artikel:

• Tutorium 8.12.2008
• Portfolio – Websites
• Informatik Tutorium 12.01
• BlueMoD Theme