26 Mar 2019

Intégrer une chaîne Twitch à WordPress

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

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…

	<!-- Intégrer Twitch sur son site Matthieu Jalbert -->
    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "Nom ou Id de la chaîne"
      });
    </script>

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.

Le code ci-dessous est un exemple, à vous d’adapter selon votre site internet ou votre thème WordPress.

<iframe src="https://player.twitch.tv/?channel=sackzitv" frameborder="0" allowfullscreen="true" scrolling="no" height="500" width="720"></iframe><iframe src="https://www.twitch.tv/embed/sackzitv/chat" frameborder="0" scrolling="no" height="500" width="350"></iframe>

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 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *