30.04.2012 | von | Webdesign, Tipps | Kommentare (12)

Top Bands von Last.fm einbinden

Auch live anzusehen auf der Seite "Dracovina".

Natürlich kann man sich die aktuellen Top Bands manuell auf eine Seite hinschreiben, aber diese Daten sind dann statisch und werden nicht automatisch aktualisiert, wenn sich z.B. euer Musikgeschmack ändert. Und wer kein Tool zur Verfügung hat (wie z.B. ein fertiges Script für Wordpress oder andere Plugins und Packages für weitere Content Management Systeme), der muss nach einer alternativen Möglichkeit zum Einbinden Ausschau halten.

Last.fm bietet für die Top-Künstler XML-Dateien an, die immer aktuell gehalten werden.

Feeds auf Last.fm

Mit einem Klick könnt ihr euch aussuchen, aus welchem Zeitraum ihr die Top Artists als XML-Datei anzeigen lassen wollt. Als Beispiel wähle ich „Gesamt“.

Top-Artists-Zeitraum auswählen

Nun wird euch die XML-Datei angezeigt, die je nach Browser anders formatiert aussehen können. Ich habe in diesem Beispiel Google Chrome verwendet:

Top Künstler von Last.fm in XML

Der PHP-Code

Nun geht es an die Einbindung in PHP. Ich habe hierbei eine Besonderheit beachtet, nämlich, dass in der PHP.INI die Funktion „allow_url_fopendeaktiviert ist, was manche Webhoster als Sicherheitsgründen standardmäßig eingestellt haben. Dies bedeutet, dass nicht mehr auf URL-Objekte zugegriffen werden kann. Allerdings brauchen wir ja diese Funktion, da wir auf eine externe XML-Datei zugreifen wollen, um an unsere Top Bands zu gelangen. Mit Hilfe des Tutorials auf antary.de konnte ich meinen kleinen Code vervollständigen.

  <?php
   $url = "http://ws.audioscrobbler.com/2.0/user/Dracovina/topartists.xml";
   $ch = curl_init($url);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
   $xml_raw = curl_exec($ch);
   curl_close($ch);
   $xml = simplexml_load_string($xml_raw);
   $i = 0;

   // Loop startet
   foreach($xml->artist as $artist)
    {
     echo "<div class='top_band'>\n";
     echo " <p>".$artist['rank'].". <a href='".$artist->url."' target='_blank'>".$artist->name."</a></p>\n";
     echo " <div class='top_band_img_outer'><div style='background-image: url(".$artist->image[3].");' class='top_band_img'></div></div>";
     echo " <p style='text-align: center; margin: 0;'>".$artist->playcount." x gehört</p>\n";
     echo "</div>\n";
     $i++;
     if($i == 8) break; // Wie viele Bands sollen angezeigt werden?
    }  
   // Loop endet

   echo "   <div style='clear: both;'></div>\n"; // Alles clearen
  ?>
  

Hiermit entschuldige ich mich für die unübersichtliche Darstellung. Aber wenn der Code mit dem SyntaxHighlighter angezeigt wird, dann werden ungewollt Zeichen umgewandelt.

Eigentlich erklärt sich der PHP-Code von selbst. In der Variable „$url“ ganz am Anfang fügt ihr die Adresse eurer XML-Datei der Top Artists ein. Die nächsten Einstellungen sind dort, wo ihr die „echo“ seht. In diesen fünf Zeilen konnt ihr euer HTML-Template-Gerüst einfügen. Bei „$i == 8“ tragt ihr die Nummer an, wie viele der Top Künstler angezeigt werden sollen.

Fügt den Code auf einem PHP-fähigen Webspace ein. Wenn alles richtig eingestellt ist, sollten die Bands angezeigt werden.

Einstellungen: XML auslesen

Um auf die Werte aus der XML-Datei zugreifen zu können, müsst ihr einiges beachten. In diesem Beispiel lasse ich einige Werte folgendermaßen auslesen:

  • $artist["rank"] —> Der Rang (Platzierung) des Künstlers.
  • $artist->url —> Die URL des Künstlers.
  • $artist->name —> Der Name des Künstlers.
  • $artist->image[3] —> Das vierte Bild des Künstlers.
  • $artist->playcount —> Die "Wie-oft-gespielt-Zahl" des Künstlers.

Die grobe XML-Struktur eines Elements:

   
    
     ASP
     4704
     http://www.last.fm/music/ASP
     http://userserve-ak.last.fm/bild1.jpg
     http://userserve-ak.last.fm/bild2.jpg
     http://userserve-ak.last.fm/bild3.jpg
     http://userserve-ak.last.fm/bild4.jpg
     http://userserve-ak.last.fm/bild5.jpg
    
   
  

Das Root-Element ist das <topartists>, welches Attribute, also Eigenschaften wie „user“ enthält. Es umschließt alle weiteren Elemente, in diesem Fall alle Künstler (<artist>). Im <artist> sind alle weiteren Kinder-Elemente enthalten, wie <playcount> oder <url>.

Um nun den rank des Künstlers auszulesen, müssen wir schauen, wo sich diese Information befindet. Sie ist als Attribut von <artist> vorhanden. Dafür gilt folgender Befehl:
$artist["rank"] — Es wird im Element <artist> nach dem Attribut „rank“ gesucht und deren Wert ausgegeben.

Um einfache Elemente auszulesen, die sich im <artist> befinden (wie <name>, <playcount> und <url>) wird folgendes geschrieben:
$artist->url — Es wird im Element <artist> nach dem Element <url> gesucht und deren Wert ausgegeben.

Um ein Element auszulesen, das mehrfach vorhanden ist (wie <image>), wird mit der Position gearbeitet. Das vierte <image>, also <image size="extralarge"> erhalten wir folgendermaßen:
$artist->image[3] — Es wird im Element <artist> das vierte <image> gesucht und deren Wert ausgegeben. Hier wird bei 0 angefangen zu zählen. Das erste <image> hätte die Zahl 0, das zweite <image> die Zahl 1, das dritte <image> die Zahl 2 usw.

Nun könnt ihr den Code nach euren Bedürfnissen anpassen.

CSS

Der Vollständigkeit halber zeige ich euch hier auch noch meinen dazugehörigen CSS-Teil:

   /* Musik Top Bands von Last.fm */

   .top_band p {
     margin: 0 0 5px 10px;
   }
   .top_band {
     width: 120px;
     height: 160px;
     margin: 0 7px 20px 7px;
     float: left;
     font: normal 11px/22px "Trebuchet MS", Arial, Helvetica;
     color: #6A6867;
   }
   .top_band_img_outer {
     width: 100px;
     height: 100px;
     float: left;
     background: #fff;
     padding: 3px;
     margin: 0 5px;
     border-radius: 15px;
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     box-shadow: 0px 0px 8px #ccc;
     -moz-box-shadow: 0px 0px 8px #ccc;
     -webkit-box-shadow: 0px 0px 8px #ccc;
   }
   .top_band_img {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-origin: content-box;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
   }
   .top_band_img_outer:hover {
     background: #f1f1f1;
   }
  

Quellen

  1. antary.de

Ähnliches zu "Top Bands von Last.fm einbinden":

Ähnliche Beiträge

Ausbildung zum Medieng…

Nach einigen Wochen kann ich euch endlich wieder ein kleines Lebenszeichen von … weiter

MP3 im Auto - ohne Pla…

Jeder kennt sicherlich eine oder mehrere Personen mit diesem Problem oder ist … weiter

Sehenswerte Filme

Hier wollte ich euch mal eine kleine Liste mit wirklich sehenswerten Filmen er … weiter

Tags

WebdesignTipps

Fyn

01. Mai 2012, 21:26 Uhr

Klasse Tutorial :)
Erst vor kurzem hab ich mir auch was zum Thema XML Dateien auf Homepages ausgeben durchgelesen.
Bisher geb ich meine meistgehörten Bands aber mithilfe eines Plugins bei Wordpress aus.

Äwe

02. Mai 2012, 10:45 Uhr

Super =) doof ist nur, das meine gescrobbelten Lieder seit gestern nicht mehr in meine Musiksammlung übertragen werden. das wurmt mich >_<

mal schaun wie ich das Problem beheben kann...

Electrofairy

02. Mai 2012, 18:56 Uhr

So, ich hab kurzweilig meine Seite geschrottet, aber jetzt geht sie wieder, wenn auch nur mit einer ollen Weiterleitung ;) Ich bin von Cutenews auf Wordpress umgestiegen und hab hier und da etwas angepasst - um den Blog ein wenig seriöser zu gestalten und damit meine Bilder mehr in den Vordergrund rücken :)
Liebe Grüße!

neri

03. Mai 2012, 09:50 Uhr

Hey Isabel,

danke für deinen Eintrag! Die Fotografien für meine Bases sind meist von "weheartit.com"...wichtig sind die Quellenangaben aber ansonsten kein Problem! Da gibt es wirklich schöne Bilder, findest bestimmt auch was

Neri

Electrofairy

03. Mai 2012, 10:08 Uhr

Hach vielen Dank! Eigentlich hatte ich nicht geplant richtig als Fotografin durchzusteigen :) Ich bekomme für die meisten Anfragen schon ein bisschen Geld, quasi Aufwandsentschädigung, aber natürlich kein Gehalt oder richtig richtig viel :D Vielleicht geh ich wirklich in die Richtung später? Heutzutage muss man sich ja nicht mehr auf irgendwas festlegen eigentlich :) Aber zur Zeit ist das ein Hobby.

Auf jeden Fall :) Ich kann die Beiträge jetzt besser takten und gestalten und muss nicht alle Bilder selber mit HTML einbinden wie bei Cutenews. Zudem macht er automatische Thumbnails, auf dem alten Blog musste ich immer 2 Bilder hochladen: ein Thumbnail und das große... das war natürlich oll! :) Ja, Tags fehlen, aber ich wusste auch nicht wirklich, was ich da reinschreiben soll xD kann ich ja noch nachtragen.

Ich hatte nicht vor die alten Sachen zu importieren. In Cutenews sind ja schon mind. 2 Jahre an Beiträgen eh im Archiv verschwunden und keiner kann sie mehr lesen... ich wüsste auch gar nicht wie das geht o_O"
Ich wünsch dir auch noch eine schöne Woche!

P.S. Bekommt man eigentlich eine Benachrichtigung, wenn ich direkt bei mir auf dem Blog antworte? :D

nick

03. Mai 2012, 10:19 Uhr

hey! :)

haha, danke. xDDD und nein ich hab dich nicht vergessen, keine angst. :)

und ja, ich bin wieder bei shizoo und mich freuts auch! ♥

wie geht es dir denn sonst so? :)

liebe grüße!

nick

03. Mai 2012, 11:35 Uhr

ha! ich habs geschafft. dein review ist fertig, du findest es hier:

http://behindyourmask.com/index.php?id=19

liebe grüße!

nick

03. Mai 2012, 12:37 Uhr

aaalso. mit extras meine ich so dinge, wie damals z.b. bei bloomotion. diese hatten ja so einen "webmode". sowas ist in meinen augen ein "extra", was man selten irgendwo findet und was einfach besonders ist.

oder bei peril dieser "showcase", wo die besucher die gfx eintragen können und dann eine meinung dazu kriegen. :) einfach dinge, die man nicht oft findet.

und huch? echt? ich hab gesucht und nichts gefunden ._. dann geb ich dir mal die 5 punkte dazu, wollen ja fair sein! :')

und nein nein, du brauchst mich nicht noch extra zu verlinken xD das ist kein pflicht bei mir, brauchst du nicht. :')

Melina

03. Mai 2012, 14:28 Uhr

Ahh, dankeschön für dein Kommi :D
Ja, die Zeit vergeht echt schnell. Fünf Jahre sind auch schon viel ^^ Wenn ich damals bei meiner ersten Seite geblieben wäre, dann wäre sie jetzt 9 Jahre alt geworden. Aber ich hab ja viele gewechselt. Auch wenn ich derzeit wenig an der Seite arbeite, so ganz ohne kann ich es mir nicht vorstellen :/ Und so wird sie immer älter xD
Das Tutorial find ich übrigens super. Überhaupt die Funktion das man das so anzeigen lassen kann find ich toll :)

sunny

13. März 2013, 11:10 Uhr

Hallo du Liebe & viiiiiiiielen Dank für das super Tutorial! Du hast mir damit sozusagen das Leben gerettet :D Wie gesagt hat alles super geklappt mit dem Einbinden etc. Ich habe nur 1 Problem...und zwar werden die BILDER der Künstler nicht angezeigt :( Also der Bandname oben drüber ja, das Bild dann nicht, & die Anzahl der gehörten Male wieder ja... :(
Hast du eine Idee oder einen Tipp dazu?
Viele liebe Grüße, Sunny.

Sunny

14. März 2013, 20:02 Uhr

Ich bins nochmal. :) Ich nehme das mit dem Problem sofort wieder zurück. Iwie wurde es nicht angezeigt aber nun gehts es und ich freu mich. :) Danke für das tolle Tut.

Dracovina

13. April 2013, 19:41 Uhr

Das freut mich :) Schön, dass dir mein kleines Tutorial helfen konnte!

Erlaubte Tags: <b><i><br>
Keine <3 oder sonstige Zeichen mit < oder >, außer die erlaubten Tags!



* erforderlich

Über die Autorin

Nun ist es an der Zeit, dass ich mich euch als Autorin von Traumfinsternis ein wenig vorstelle. … mehr lesen

Musik: Blutengel – Seelenschmerz (Symphonic Version)

4350
^ Top