»
♬ Musik-Blog »
Musik-Feed / API

Musik-Feed / API

Online Einbindung mittels RSS-Musikfeed

RSS ist ein elektronisches Nachrichtenformat, welches dem Nutzer ermöglicht, die Inhalte einer Website - oder Teile davon - als sogenannte RSS-Feeds zu abonnieren (z.B. mit Hilfe dieses Firefox-Addons). Auf diese Weise kann man bequem mit einem Klick nachsehen, ob es neue Beiträge gibt. Mit Rechtsklick auf das Bild und "Link kopieren" kannst Du meinen Blog-Feed "entführen".

Online Einbindung mittels Javascript

Der Musikfeed von muenic.de kann auch ganz einfach auf Deiner Webseite dargestellt werden. Dazu musst Du lediglich den folgenden Code an geeigneter Stelle in Deine Webseite einfügen:

<script>
<!--
// Diese Variablen sind optional
var rssFeedFontColor = '#000000'; // Schriftfarbe
var rssFeedFontSize = 13; // Schriftgroesse
var rssFeedFont = 'Arial, Verdana'; // Schriftart
var rssFeedLimit = 10; // Anzahl anzuzeigende Musiknews
var rssFeedShowDate = true; // Datum der Blog-Posts anzeigen, true | false
var rssFeedTarget = '_blank'; // _blank | _parent | _self | _top
// Ab hier bitte nichts mehr aendern
var rssFeedContainer = 'muenic_feed';
// -->
</script>
<script src="https://muenic.de/feed/news_de.js"></script>
<noscript><a href="https://muenic.de/feed/news_headlines_de.xml">muenic.de - Blog-Posts</a>
</noscript>
<div id="muenic_feed"> </div>

Anzeigebeispiel:

Online Einbindung mittels API

Fortgeschrittene Seitenbetreiber, die sich ein wenig mit Ajax/jQuery und JSON auskennen, können auch die API von muenic.de nutzen. Die Gestaltungsmöglichkeiten sind hier schier endlos (im Gegensatz zum obigen Javascript-Code). Wer richtig fit in jQuery ist, kann bspw. nur die Posts aus der Kategorie Rock auslesen.
Die JSON-Struktur sieht wie folgt aus:

{
  "status": "success",
  "data": {
    "1": {
      "Datum": "02.02.2020",
      "Interpret": "Name",
      "Titel": "Name",
      "Kategorie": "Name",
      "URL": "muenic.de/musik/post?id=xx"
    },
    "2": {
      "Datum": "01.01.2020",
      "Interpret": "Name",
      "Titel": "Name",
      "Kategorie": "Name",
      "URL": "muenic.de/musik/post?id=xx"
    },
    ...

Und hier ein Code-Beispiel in jQuery, um die JSON-Daten auszulesen:

(function ($) {
    $(document).ready(function () {
        $.ajax({
            url: "https://muenic.de/api/Data/Json/Blog/getBlog",
            type: "GET",
            dataType: "json",
            success: function (json) {
                $.each(json.data, function (i, item) {
                    $(".list").append('<li>' + item.Datum + ': <a href="https://' + item.URL + '" target="_blank">' + item.Titel + '</a> (' + item.Interpret + ')</li>');
                    return i < 6; //Anzahl Posts
                });
                $(".panel").append('<div>Blog-Posts von <a href="https://muenic.de" target="_blank">muenic.de</a> (' + $("ul.list li").length + ' von ' + Object.keys(json.data).length + ')</div>');
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });
})(jQuery);