Discord als Widget in die Webseite einbinden

Wie binde ich Discord in eine Webseite oder WordPress ein?

Neben dem offiziellen Widget gibt es ein Open-Source-Projekt, welches ein konfigurierbares Widget bereitstellt:

Discord Widget

Das Widget lässt sich einfach in eine Webseite oder auch in CMS-Systeme wie WordPress einbinden. Es werden die aktuellen Online-Nutzer angezeigt und mit einem Klick kann man dem Server beitreten.

Der Code für das Einbinden muss einfach kopiert, eingefügt und angepasst werden:

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/restingcoder/discord-widget@1.1/discord-widget.min.js"></script>
<script type="text/javascript">
    discordWidget.init({
        serverId: '51143782082543616',
        title: 'Discord Widget Title',
        join: true,
        joinText: 'Join Server',
        alphabetical: false,
        theme: 'light',
        hideChannels: ['Channel Name 1', 'Channel Name 2'],
        showAllUsers: true,
        allUsersDefaultState: true,
        showNick: false,
        userName: '',
        useCDN: true
    });
    discordWidget.render();
</script>
<div class="discord-widget"></div>

Als wichtigste Einstellung muss die Server-ID passend gesetzt werden. Anschließend funktioniert das Widget bereits. Über die verschiedenen Parameter kann das Widget konfiguriert werden. So lassen sich Kanäle verstecken oder auch das Theme ändern.

Das Widget benötigt JQuery, ist dieses nicht bereits eingebunden, erscheint das Widget nicht. In diesem Fall sollte man vor dem Code noch JQuery einbinden, z.B. so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/gh/restingcoder/discord-widget@1.1/discord-widget.min.js"></script>

Update

Leider funktioniert die Script-Adresse oben nicht mehr, es kommt beim Aufruf nur ein:

Package restingcoder/discord-widget is blocked. Please refer to https://www.jsdelivr.com/terms/acceptable-use-policy-jsdelivr-net for more information.

Der Anbieter hat den Scriptabruf also gesperrt. Die Empfehlung ist daher, das Script “discord-widget.min.js” selbst zu hosten. Hier das Script:

discord.min