{"id":812,"date":"2020-04-11T09:56:17","date_gmt":"2020-04-11T07:56:17","guid":{"rendered":"https:\/\/ekiwi.de\/?p=812"},"modified":"2022-02-23T17:35:53","modified_gmt":"2022-02-23T16:35:53","slug":"discord-als-widget-in-die-webseite-einbinden","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/812\/discord-als-widget-in-die-webseite-einbinden\/","title":{"rendered":"Discord als Widget in die Webseite einbinden"},"content":{"rendered":"<p>Wie binde ich Discord in eine Webseite oder WordPress ein?<\/p>\n<p><!--more--><\/p>\n<p>Neben dem offiziellen Widget gibt es ein Open-Source-Projekt, welches ein konfigurierbares Widget bereitstellt:<\/p>\n<p><a href=\"https:\/\/github.com\/joshschmille\/discord-widget\" target=\"_blank\" rel=\"noopener noreferrer\">Discord Widget<\/a><\/p>\n<p>Das Widget l\u00e4sst 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/discord.png\" alt=\"\" width=\"772\" height=\"206\" class=\"aligncenter size-full wp-image-813\" srcset=\"\/wp-content\/uploads\/2020\/04\/discord.png 772w, \/wp-content\/uploads\/2020\/04\/discord-300x80.png 300w, \/wp-content\/uploads\/2020\/04\/discord-768x205.png 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/p>\n<p>Der Code f\u00fcr das Einbinden muss einfach kopiert, eingef\u00fcgt und angepasst werden:<\/p>\n<pre>&lt;script type=&quot;text\/javascript&quot; src=&quot;\/\/cdn.jsdelivr.net\/gh\/restingcoder\/discord-widget@1.1\/discord-widget.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n    discordWidget.init({\r\n        serverId: '51143782082543616',\r\n        title: 'Discord Widget Title',\r\n        join: true,\r\n        joinText: 'Join Server',\r\n        alphabetical: false,\r\n        theme: 'light',\r\n        hideChannels: ['Channel Name 1', 'Channel Name 2'],\r\n        showAllUsers: true,\r\n        allUsersDefaultState: true,\r\n        showNick: false,\r\n        userName: '',\r\n        useCDN: true\r\n    });\r\n    discordWidget.render();\r\n&lt;\/script&gt;\r\n&lt;div class=&quot;discord-widget&quot;&gt;&lt;\/div&gt;<\/pre>\n<p>Als wichtigste Einstellung muss die Server-ID passend gesetzt werden. Anschlie\u00dfend funktioniert das Widget bereits. \u00dcber die verschiedenen Parameter kann das Widget konfiguriert werden. So lassen sich Kan\u00e4le verstecken oder auch das Theme \u00e4ndern.<\/p>\n<p>Das Widget ben\u00f6tigt JQuery, ist dieses nicht bereits eingebunden, erscheint das Widget nicht. In diesem Fall sollte man vor dem Code noch JQuery einbinden, z.B. so:<\/p>\n<pre>&lt;script src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;&lt;script type=&quot;text\/javascript&quot; src=&quot;\/\/cdn.jsdelivr.net\/gh\/restingcoder\/discord-widget@1.1\/discord-widget.min.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<h2>Update<\/h2>\n<p>Leider funktioniert die Script-Adresse oben nicht mehr, es kommt beim Aufruf nur ein:<\/p>\n<pre>\r\nPackage restingcoder\/discord-widget is blocked. Please refer to https:\/\/www.jsdelivr.com\/terms\/acceptable-use-policy-jsdelivr-net for more information.\r\n<\/pre>\n<p>Der Anbieter hat den Scriptabruf also gesperrt. Die Empfehlung ist daher, das Script &#8222;discord-widget.min.js&#8220; selbst zu hosten. Hier das Script:<\/p>\n<p><a href=\"\/wp-content\/uploads\/2020\/04\/discord.min_.zip\">discord.min<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie binde ich Discord in eine Webseite oder WordPress ein?<\/p>\n","protected":false},"author":1,"featured_media":814,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[15,51],"tags":[148,44,150,52],"class_list":["post-812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-wordpress","tag-cms","tag-javascript","tag-open-source","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=812"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/814"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}