Mise à jour de l’article 10/10/2020 : Mise à jour de l’intégration par Twitch, vous devez rajouter en iframe votre nom de domaine, je vous explique tout dans l’article. N’oubliez, il est obligatoire d’avoir un site en SSL. Rapprochez vous de votre hébergeur pour activer le certificat de sécurité.
Mise à jour de l’article 16/02/2020 : Vidéo tutoriel Youtube en bas de la page !
Vous êtes peut-être un utilisateur de la plateforme de streaming Twitch, un joueur ou tout simplement un passionné et vous avez un site internet WordPress ? Voici comment intégrer facilement Twitch à votre site.
C’est quoi Twitch ?
Certains ne connaissent pas Twitch, c’est pour cela que je vais faire une petite présentation.
Twitch est une solution pour permettre la diffusion en ligne (ou pas) de jeux vidéo, VOD, compétition e-sport. Sur chaque vidéo, un tchat permet l’échange entre le streameur (le créateur du contenu vidéo) et les viewers (les personnes visionnant la vidéo).
L’ogre Amazon a racheté Twitch en 2014 pour 1 milliard de dollars. Vous avez des chiffres très intéressants sur le sujet sur le site du blog du modérateur.
Intégrer Twitch à WordPress sans plugin
Il est important de suivre les règles de Twitch pour son site internet. Votre site doit avoir un certificat SSL valide pour permettre la diffusion d’un stream. Vous avez des infos ici : https://dev.twitch.tv/docs/embed.
Il existe 2 solutions. Pour les développeurs et les personnes à l’aise avec le code en général, Twitch propose une doc détaillée sur l’intégration du contenu : Voir la documentation.
La première, vous pouvez intégrer directement ce code (de base) dans votre page. Il est aussi possible de le customiser en ajoutant des options dans votre script comme le thème couleur, la lecteur automatique etc…
La deuxième solution consiste à intégrer l’iframe d’un stream directement sur votre site.
Une fois sur le streameur de votre choix, cliquez sur partager :
Vous avez 2 bouts de code. Un pour le live vidéo et l’autre pour le chat en direct.
Mais il se passe quoi si on met les 2 iframes Twitch à la suite sur WordPress ?
Voici :
Le rendu sur le site n’est pas optimal. Le tchat se retrouve sous la vidéo.
Nous allons optimiser cela, on enlève le lien de la vidéo généré par Twitch et on va coller le deuxième iframe au 1er pour ne pas avoir un saut de ligne HTML entre les 2. Pour avoir une hauteur identique modifier le height de l’iframe. Donc ne mettez pas à la ligne l’iframe comme mon exemple en dessous (qui est fait pour mieux voir le code), il faut que ça soit à la suite, fermeture de la balise puis ouverture de l’autre.
Le code ci-dessous est un exemple, à vous d’adapter selon votre site internet ou votre thème WordPress la taille que vous voulez.
Twitch à besoin qu’on indique le site parent qui va héberger le live. Il faut donc remplacer dessous “www.example.com” par votre nom de domaine.
Le lien de l’iframe du stream ci-dessous se décompose comme ça : https://player.twitch.tv/?channel=[Mettrelenomdustreameur]&parent=[Votrenomdedomaine]
Voici le rendu sur mon site exemple :
Il faut savoir que ce tutoriel s’adapte à n’importe quel éditeur de texte ou solution accueillant des iframes. Vous pouvez aussi mettre cela en dur dans votre code HTML.
Le plugin Twitch WordPress
Plus facile que toucher au code (peut-être + lourd pour un site ?), il existe plusieurs plugins si vous utilisez le cms WordPress.
J’ai testé celui-ci : Twitch for WordPress
Alors cependant il est valable que pour afficher une seule chaîne Twitch.
Si vous voulez diffuser plusieurs streams, il faut utiliser un autre plugin ou bien utiliser la technique de l’iframe.
Voilà, à vous de jouer 🙂
Un thème WordPress spécial streamer
Ce CMS nous offre une variété impressionnante de template. Si vous êtes streamer de jeux vidéo ou autres, j’ai trouvé sur le site Theme forest un thème WordPress vraiment sympa.
Il s’appelle Good Game, il vous permet de créer une boutique en ligne Woocommerce et implanter votre chaîne Twitch dans le site.
Il est livré avec des fichiers PSD, idéal si vous voulez créer une maquette Photoshop de votre site web avant sa création.
