Wer bei Last.fm seine gehörten Musik-Titel aufzeichnen lässt und einen Blog besitzt, der möchte früher oder später bestimmt seine Top Bands auf seine Website einbinden. Dieses Mini-Tutorial zeigt euch, wie ihr ganz einfach mit PHP die XML-Datei lesen und auf eurer Seite gestylt wieder anzeigen lassen könnt.

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.

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“.

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

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_fopen“ deaktiviert 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

Kommentar hinzufügen

Ähnliche Beiträge

Tags

WebdesignTipps

Über die Autorin

'Jeder ist ein Mond und hat eine dunkle Seite, die er niemandem zeigt.' Mark Twain. Nun ist es an der Zeit, dass ich mich euch als Autorin von Traumfinsternis ein wenig vorstelle. Mein Name ist Isabel und ich bin derzeit 23 Jahre alt. Meine Heim … mehr lesen

Musik: Samsas Traum – Ich, dein Wolfsblut