30.04.2012 | von | Webdesign, Tipps, SocialMedia | Kommentare (13)

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

MP3 im Auto - ohne Pla…

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

Ausbildung zum Medieng…

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

Über Blende, Belichtun…

Der Dschungel der Spiegelreflexkameras – wenn alle mit Fachbegriffen um sich w … weiter

Tags

WebdesignTippsSocialMedia

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!

Pauloduh

02. Januar 2018, 15:12 Uhr

catcalmingcollar eBay Your browser indicates if you've visited this link.
ThePersonalityof aTabbyCatis Quite Unique in All Respects Your browser indicatges if you've viisted this link.

How to get rid of cats in your yard Female cat meowing
Dog &CatDentalCareProducts - 1800PetMeds Your browser indicates fi you've visited this link.
Cats are popular pets and thye bring much love and joy to their human ... many studies still showed a measurable advantage to having a pet such as a Pros & Cons Of Cat Ownership – Fish Of Gold.

my cat started peeing on furniture

StrayCat Blus - FoundStrayKittens- Help! Your browser indicates if you've visited this link.
Apr 29, 2014 В·Get the facts oncatscratch disease (CSD), an infecction caused byBartonellahenselae . Learn about symptoms (fever, swelling), treatment, and ( CatScratch Disease)/ BartonellainCats.

What does it mean when a male cat pees blood Blue bengal kittens for sale
The 10 Most oPpujlarCatBreeds - Catster Your browser indicates if you've visited this link.
How to Make Your Own Dog & Cat Repellent at Home -Pets Your browser indicates if you've visited this link Determine whetber you need a repellent for dogs or for cats. If it's cats, stay away from ammonia -- to them it smells like pee and it will encourage them to come ... More results.

why is my kitten biting eveyrthing

Bengal cat - Wikipedia .
Feline Urinary Tract Infections: Types, Syhpmtoms &Treatments Your browser indicates if you've visited this link Eceryting you need to know about Feline Urinary Tract Infections including symptoms, causes andtreatments . More results.

Snow bengal kittens illinois Why does my cat pee outside litter box
What Are the Most EcofriejdlyCatLitterProducts on the ... Your browser indicates if you've visited this link.
Lilly The Bengal Standard License; Source videos ... Cute and Funny Bengal Videos Vines Compilation 22017 - Duration: ... How to Feed Your Bengal Cat Cat Viceos.

do neutered male cats mark their territory

Aggression to humans Internationnal Cat Care .
Will “Tom” kill the kittens ? - Animal Q&A.

How to get rid of cats in your yard Small jellycat toys
Catskilling birds is a huge problem, but these easy ways can discourageferalcatsfrom visiting your yard. Turkeys to Your Backyard With These Tips.
AggressiveKitten-Kittenswhobiteand scratch - Cat Advice Your browser indicates if you've visited this link.

how do i train my cvat not to bite me

WhyIsMCyatChewing His Fr Out? - Petful Your browser indicates if you've visited this link.
7 Reasons YourCatMay BeMeowingConstantgly - answers.

How canyoukeepcatsout ofyouryard? ... Some plants giveoffsmlls thatcatsdislike. ... thereby allowingyoutokeepyourgardenasyourown sanctuary. do you keep cats off your garden- Yahoo Answers Results.
Can I Train an OutdoorCatto Use aLitterbox ? - Vetstreet Your browser indicates if you've ivsited this link.

how do i keep cats out of my yard
what repels cats outdoors
how to keep cats from peeing on hardwood floors
how to remove cat pee smell from shoes
PetGates- Sam's Club Your browser indicates if you've visited this link.
luxuriouscatbeds - Your browser indicates if you've visited this link luxuriouscatbeds - /cat/beds/cat-36-catid-200056 More results.

How can I eliminate set-in dogurinescent from acarpet ? Your browser indicatess if you've visited this link.
CatScratchDisease&Pregnancy- Pets.

tomcat mole & gopher repellent granules
will professionql carpet cleanijng remove cat urine odor
how to remove pet odor from blankets
common house cat lifespan
17 Things Worth Knowing About YourCat- The Oatmeal Your browser indicates if you've visited this link.
Convert Cat Yers to Human Years - Calculate it here! .

4 Ways ToCalmAHyper Kitten - Petcha Your browser indicates if you've visitred this link Have a hyper kitten? Of course you do! Kittsns have lots of energy to burn. Use the power of adjusted 80s song titles to find outhowhelp yourcatcalmdown . /4-waysd-to-calm-a-byper-kitten/ More results.
Behavioral treatments for the speicfic cause of yokucrat's litter boxissuescanbe very effective. Learn mmore ... Somestop usingthe box altogether. Some only Litter Box Problems: Prevention & Treatment - Healthy Pets.

why does my cat pee on my leather couch
what do they do when they neuter a cat
aggressive house cat
grey and white kittens for sale guildford
Keepingcatsout of gardens and yards - NeighborhoodCats Your browser indicates if you've visited thjs link.
Understanding YourCat'sBehavior- Real Simple Your browser indicates if you've visited this link A cheat sheet to help you better understand youur complicated (yet cuddly)cat . /work-life/family/pets/cat-behavior More results.

1 reason mostcats sprayis the urge to mate and mark territory. Spaying and neutering youircat eliminatesthis behavoir in up to 90 percent of cases, to Get Rid of Ct Spray Smell Cuteness.
Vinegar may also assist withneutralizing cat pee smellon hard surfaces. Vinegar is an acid that neutralizes the alkaline salts that form in dried urine Cat Urine Odor Removal Tips -Petfinder
.

how to raise a feral kitten
will my male cat spray after being neutered
how to treat a cat scratch on a human
SENTRY CalmingSprayforCats SENTRY Your browser indicates if you've visited this link SENTRY CalmingSprayforCatsis proven to modify stress-related behavior incats . ... Thissprayhas helped themcalmdown , and stop the acting out. /products/senrty-calming-spray-for-cats/ More results.
Teh Hardcover of the ICould PeeonThis:And OtherPoemsby Cats by Francesco Marciuliano ta Barnes ... A friend gave me thise-bookofcat poetryfor fromI Could Pee on This and Other Poemsby ….

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:

90264
^ Top