Afficher un Live Twitch sur WordPress

 

Pour résumer : ne touchez pas aux extensions WordPress qui proposent d’afficher un live Twitch. En tout cas à ce jour (fin août 2018), aucun n’est fiable : nombreux sont ceux qui ne fonctionnent tout simplement pas, et le seul qui fonctionne occasionne une surcharge du serveur en faisant des appels continus auprès de l’API twitch pour connaître l’état des streams.

Reste donc la solution maison !

L’intégration à WP passe par du html et du javascript. Si vous voulez intégrer le stream à une barre de widget, vous aurez besoin d’un widget de html basique. Sinon ça peut-être imaginé sur un article ou une page.

Ensuite, le code à intégrer.

Pour quelque chose de très basique qui se contente d’afficher le stream quelque soit son état (connecté ou non), on peut se contenter de ça :

<div id="twitch-embed"></div>
<script src="https://embed.twitch.tv/embed/v1.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" </script> <script> new Twitch.Embed("twitch-embed", { width: 250, height: 140, channel: "nofrag_official", layout: "video" }); </script>

Avec ça, vous affichez le stream de Nofrag, sans la zone de chat, dans une zone de 250 par 140. Ça conviendra parfaitement si vous n’avez aucun soucis avec le fait d’afficher le stream même s’il est déconnecté.

Chez Nofrag on a voulu aller un peu plus loin en affichant autre chose que le stream lorsqu’il n’est pas connecté.

Pour cela vous avez besoin d’un jeton d’accès à l’API twitch, que vous pourrez créer à partir de https://dev.twitch.tv/ puis en créant une « App ». Vous aurez alors un identifiant client, qui servira par la suite.
Le code à insérer :

<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="twitch-embed"></div>
<script>
$.getJSON('https://api.twitch.tv/kraken/streams/nofrag_official?client_id=<IDENTIFIANT_CLIENT>', function(channel) {
if (channel["stream"] == null) {
/* le channel est déconnecté, je définis ce que je vais
 afficher dans le div "twitch-embed". Ici, on appelle
 une iframe avec un petit widget qui indique l'état du stream Nofrag,
 mais on pourrait afficher une image, tout simplement.*/
$('#twitch-embed').html('<iframe src="https://svinkle.github.io/twitch-tv-widget/?username=nofrag_official" width="100%" height="64" frameborder="0" allowtransparency="true"> </iframe>');
} else {
// le channel est connecté, j'affiche le stream de Nofrag
new Twitch.Embed("twitch-embed", {
width: 250,
height: 140,
channel: "nofrag_official",
layout: "video"
});
}
});
</script>

Cette solution permet de ne pas faire reposer l’appel à Twitch sur le serveur mais sur le navigateur de l’utilisateur. On pourrait aller plus loin en interrogeant régulièrement l’API twitch par javascript sans avoir à rafraîchir la page, mais en ce qui nous concerne, nous n’en avons pas ressenti le besoin.

Point Dev – Comment configurer le cache sur WordPress ?

Dans ce Point Dev, voyons comment configurer correctement le cache sur WordPress.

Pourquoi un cache ? Décharger le serveur web et la base de données (et donc payer moins cher Amazon), éviter que le nombre de visiteurs ait un impact sur les performances du site. Tout cela n’a de réel intérêt qu’à partir du moment où le site a un nombre important de visites quotidiennes.

Alors c’est parti. On installe WP Super cache, activation, et rendez-vous dans réglages / WP Super Cache.

Dans Avancé, voici nos réglages :

  • Mise en cache : coché
  • Cache Delivery Method : simple
  • Dans divers sont cochés :
    • Ne pas mettre en cache les pages pour les utilisateurs connus
    • Don’t cache with GET parameters
    • Compresse les pages afin qu’elles soient servies plus rapidement aux utilisateurs
    • Reconstruction du cache
  • Dans avancé sont cochés :
    • Mobile device support
    • Clear all cache files when a post or page is published or updated.
    • Rafraîchir uniquement la page courante lorsqu’un commentaire est effectué.
  • Dans cache location : saisir le répertoire sur le serveur où le cache sera stocké. Attention à ne pas oublier le / de début.
  • Dans cache Location :
    • Cache timeout est fixé à 600s. Cela signifie qu’un visiteur non connecté verra une page ayant un âge de maximum 15 minutes.
    • Scheduler : on l’a fixé également à 600s.

En ce qui concerne les autres onglets, on n’a rien activé. Attention au  choix  d’activer le préchargement (dans l’onglet du même nom) qui est potentiellement très gourmand en CPU.

Avec ces réglages, vous bénéficierez d’un premier niveau de cache permettant de limiter les impacts en performance ou financiers d’un nombre de visites important.

 

Point Dev – Comment unifier WordPress et PhpBB ?

Elle est bien moche mon image, hein ?

Dans ce premier Point Dev nous allons voir comment permettre à un forum PhpBB de se connecter à WordPress. Ces deux produits ne sont absolument pas prévus pour communiquer ensemble à l’origine.

Pour cela, on utilise l’extension WordPress BridgeDD, qui est la seule à proposer ce service. Les autres extensions existantes généralement la l’unification des utilisateurs, mais pas la création d’un topic depuis WordPress ni l’affichage de commentaires issus du topic du forum (fonctionnalité appelée Cross-Posting).

Continuer la lecture de « Point Dev – Comment unifier WordPress et PhpBB ? »