Hallo liebe Leser,

heute zeige ich euch, wie ihr auf eurer eigenen Homepage eine Twitch API einrichten und nutzen könnt.
Dazu nutzen wir die aktuell Twitch API V5. Es spielt keine Rolle, welches CMS ihr nutzt oder ob ihr nur eine reine PHP Seite habt. Wir werden also die Twitch API auf eurer Homepage einbinden.

Styles & Scripte

Als erstes benötigen wir die Stylesheets und Javascript Dateien. Dazu binden wir folgendes bei uns auf der Webseite ein.
Wir benötigen Bootstrap und Font Awesome für das aussehen und die Augen Anzeige bzw Liveanzeige der Zuschauer. Ebenfalls benötigen wir JQuery, welches wir am Ende der Webseite, aber vor dem Js Code einbinden.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

// Vor dem Body Tag aber vor dem JS Code einbinden.
<script src="https://code.jquery.com/jquery-3.6.0.min.js" async></script>

1. HTML CODE FÜR TWITCH API

Als erstes bindet ihr nun den HTML Code in eure Webseite ein.

See the Pen Twitch API V5 on Website with Bootstrap by Ronny (@Ronny_pe_user) on CodePen.dark

2. CSS CODE FÜR TWITCH API

Fügt diesen Code in euren CSS Bereich bzw style Datei ein.

See the Pen Twitch API V5 on Website with Bootstrap by Ronny (@Ronny_pe_user) on CodePen.dark

3. JS CODE FÜR TWITCH API

Der JS Code kommt an das Ende der Seite und nach dem JQuery Abruf.

See the Pen Twitch API V5 on Website with Bootstrap by Ronny (@Ronny_pe_user) on CodePen.dark

4. Twitch ClientID & OAuth Token erstellen.

Wie ihr sehen könnt, funktioniert nun bereits das Script. Bei euch ist dies aber eventuell nicht der Fall. Das liegt daran, dass ihr noch eine Twitch ClientID und ein OAuth Token benötigt. Diesen werden wir nun gemeinsam erstellen.

Geht dazu auf: https://dev.twitch.tv/
Meldet euch an, falls noch nicht geschehen mit eurem Twitch Account.
Sobald dies geschehen ist, geht ihr oben rechts auf „Your Console“ und dann auf Anwendungen.
„Neue Anwendung registrieren“ klicken

Gib einen Namen für die Anwendung ein. Dies muss kein bestimmter sein und kann frei gewählt werden.
Bei OAuth Redirect URLs gibst du nun diese URL ein (NICHT DEINE): https://twitchapps.com/tokengen/
Bei Kategorie nimmst du „Website intigration

Das ganze sollte dann so aussehen.

Erstelle deine Anwendung und du erhältst nun eine ClientID. Diese speicherst du dir ab bzw merkst diese dir.
Gehe nun direkt auf https://twitchapps.com/tokengen/
Gib dort deine ClientID ein.
Du wirst nun weitergeleitet und musst dies bei Twitch besätigen. Tu dies…

Nun erhältst du deinen OAuth Token. Diesen speicherst du dir ebenfalls ab.

Schaue nun in dem JS Code von oben bei Punkt 3. Dort findest du zwei mal den Code:

"Authorization": "Bearer 3ymxfj7homghpbdo3ifa345ufmkjk3",
'Client-ID': 'b375ic15vigqyiuxlivemx9np9z3c7',

Ersetze diese Zeilen gehen deinen OAuth Token und deine ClientID. Wiederhole dies. Du findest diesen Code zwei mal!
Das Bearer muss stehen bleiben und dahinter deine OAuth Token ID.

Im Code findest du ebenfalls die Zeile: var streamers=
Dort kannst du nun deine Lieblingsstreamer einpflegen.

Nun hast du erfolgreich die Twitch API auf deiner Webseite eingebunden.


Herzlichen Glückwunsch.