Discord Mitgliederliste für Webseiten mit Widget

Was beinhaltet die Mitgliederliste?

Die Mitgliederliste zeigt die Mitglieder eines Discord-Servers an und kann auf Webseiten sowie in mobilen Apps eingesetzt werden.
Dabei werden die Mitglieder des Servers mit ihrem Avatar, ihrem Status sowie mit ihrem Namen angezeigt.

Die angezeigten Avatare können übrigens ganz leicht heruntergeladen werden. Wie das geht, erklären wir dir hier.

Aufbau und Arten

Der Aufbau der Mitgliederliste

Die Liste reiht die Namen der Mitglieder des Servers untereinander auf und gibt dabei grundlegende Informationen über sie an.
Es werden dabei nur die Nutzer angezeigt, die gerade nicht offline sind.
Auch Mitglieder, deren Status auf "Abwesend" oder "Bitte nicht stören" gesetzt ist, werden in der Liste angezeigt.

Arten von Widgets

Es gibt zwei verschiedene Arten der Mitgliederliste für Discord Server:
das vorgefertigte Widget und ein eigenes Widget.

Das vorgefertigte Discord Widget

Das Discord Widget für Server befindet sich bereits als implementierbarer Code in den Einstellungen jedes Discord-Servers.
Um das Widget auf Webseiten einsetzen zu können, wird lediglich der iFrame-Code aus den Einstellungen benötigt.

Um den Code zur Mitgliederliste in eine Webseite einzubauen, gehe in die Einstellungen des Discord-Servers, wähle Widget und aktiviere es.

Nun kann der Code des vorgefertigten Widgets unter "vorgefertigtes Widget" kopiert werden und auf jeder Webseite als Code eingefügt werden.
Dabei wird automatisch eine Mitgliederliste generiert und angezeigt.

Das personalisierte Discord Widget (JSON)

Neben dem vorgefertigten Discord Widget können auch personalisierte Widgets für Discord-Server eingesetzt werden.
Mit ihnen kann zum Beispiel eine bessere mobile Darstellung von Webseiten garantiert werden und das Design kann angepasst werden.

Die Implementierung des personalisierten Discord Widgets basiert zunächst auf der JSON-API des Discord-Servers.
Diese JSON-Datei beinhaltet die Mitglieder (Name, Status, Aktivität, Avatar) und die öffentlich sichtbaren Sprachchats des Servers.
Die Daten der JSON-Datei sind jedoch nicht aufbereitet für eine Webseite und müssen daher erst umgewandelt beziehungsweise gerendert werden.

Die Umwandlung von JSON zum personalisierten Widget

Die Umwandlung von JSON zu einem personalisierten Widget setzt eine Umwandlung (Rendering) mit Code voraus.
Hierzu können verschiedene Methoden genutzt werden.

Die Umwandlung kann zum Beispiel mit JavaScript oder PHP umgesetzt werden.
Dabei muss die JSON-Datei mit der jeweiligen Sprache abgerufen werden und anschließend zum Beispiel in eine HTML-Seite gerendert werden.

Nachdem das Rendering durchgeführt wurde, kann mit einer Style-Sprache wie CSS die Gestaltung der ausgegebenen Daten vorgenommen werden.
CSS kann hierbei zum Beispiel die Position des Status der Nutzer bestimmen oder auch die Gestaltung der Profilbilder (rund oder eckig) verändern.
Bei der personalisierten Version der Mitgliederliste sind der Gestaltung keine Grenzen gesetzt.
Es können beliebige Farben, eigene Sortierungen und sogar ein Hintergrundbild vervendet werden.

Weitere Beiträge rund um Discord findest du auf unserer Blog Seite!