Sur ton site : un encart en direct et un classement

Deux recettes à coller dans n'importe quelle page HTML : un encart qui montre ton serveur en direct, et le classement des serveurs les plus votés. Elles marchent sur un site fait à la main, dans un bloc « HTML personnalisé » de WordPress, Wix ou Carrd, sans rien installer.

Remplace seulement tk-eco-172 par le slug de ton serveur (chapitre 01).

1. L'encart de ton serveur #

<div id="tk-serveur" style="font-family:sans-serif;max-width:320px;padding:14px;border-radius:12px;background:#12121a;color:#ececf4">
  Chargement…
</div>
<script>
(function () {
  var SLUG = 'tk-eco-172';   // ← le slug de ton serveur
  var boite = document.getElementById('tk-serveur');
  var ETATS = { en_ligne: '✅ En ligne', demarre: '⏳ Démarre', arrete: '⛔ Arrêté' };

  function ligne(texte) { var p = document.createElement('div'); p.textContent = texte; return p; }

  function charger() {
    fetch('https://www.teamkit.fr/api/v1/serveurs/' + SLUG)
      .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(function (s) {
        boite.textContent = '';
        var titre = ligne(s.nom); titre.style.fontWeight = 'bold'; titre.style.fontSize = '1.1em';
        boite.appendChild(titre);
        boite.appendChild(ligne((ETATS[s.etat] || s.etat) + ' · ' + s.joueurs + ' / ' + s.places + ' joueurs'));
        if (s.adresse) boite.appendChild(ligne('Adresse : ' + s.adresse));
        boite.appendChild(ligne('👍 ' + s.votes.semaine + ' vote(s) cette semaine'));
        var lien = document.createElement('a');
        lien.href = s.liens.page; lien.target = '_blank'; lien.rel = 'noopener';
        lien.textContent = 'Voter sur TeamKit'; lien.style.color = '#00f0ff';
        boite.appendChild(lien);
      })
      .catch(function () { boite.textContent = 'Serveur momentanément indisponible.'; });
  }
  charger();
  setInterval(charger, 60000);   // une fois par minute, c'est largement assez
})();
</script>

Ce que fait ce code :

• il demande ton serveur à l'API, puis toutes les minutes ;
• il écrit chaque information avec textContent : un nom de serveur étrange ne peut rien casser sur ta page ;
• il finit par un lien vers ta page TeamKit, où l'on peut voter.

✅ À retenir Sur une page web, on n'utilise que l'API publique : jamais de clé dans le code d'une page, n'importe quel visiteur pourrait la lire.

Plus simple encore : la bannière #

Si tu veux seulement une image qui se met à jour toute seule, pas besoin de code :

<a href="https://www.teamkit.fr/serveur/tk-eco-172" target="_blank" rel="noopener">
  <img src="https://www.teamkit.fr/banniere/tk-eco-172.png" alt="Mon serveur sur TeamKit" width="600" height="200">
</a>

-bandeau.png (728 × 90) et -mini.png (468 × 60) existent aussi.

2. Le classement des plus votés #

<ol id="tk-classement" style="font-family:sans-serif"></ol>
<script>
(function () {
  var liste = document.getElementById('tk-classement');
  fetch('https://www.teamkit.fr/api/v1/classements/serveurs?periode=semaine&limite=5')
    .then(function (r) { return r.json(); })
    .then(function (d) {
      d.serveurs.forEach(function (s) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.href = s.page; a.target = '_blank'; a.rel = 'noopener';
        a.textContent = s.nom + ' (' + s.jeu + ')';
        li.appendChild(a);
        li.appendChild(document.createTextNode(' — ' + s.votes + ' vote(s)'));
        liste.appendChild(li);
      });
    })
    .catch(function () { liste.textContent = 'Classement momentanément indisponible.'; });
})();
</script>

Pour les communautés, remplace l'adresse par https://www.teamkit.fr/api/v1/classements/communautes?periode=semaine&limite=5 : chaque ligne a alors nom, votes et membres (pas de jeu).

Pour le classement d'un seul jeu, ajoute &jeu=minecraft-java (le slug du jeu).

✔️ Checklist #

• J'ai remplacé tk-eco-172 par le slug de mon serveur.
• L'encart affiche le bon nom et le bon nombre de joueurs.
• Le lien « Voter sur TeamKit » ouvre bien ma page.
• Aucune clé dans le code de ma page.

❓ Si ça ne marche pas #

• L'encart reste sur « Chargement… » : ouvre la console de ton navigateur (F12). Une erreur 404 veut dire un slug mal copié.
• Ton éditeur de site retire la balise <script> : certains éditeurs gratuits l'interdisent. Utilise la bannière, qui n'a pas besoin de script.
• Les accents s'affichent mal : ta page doit être en UTF-8 (<meta charset="utf-8">).