ScanChessScanChess
    Tous les articles
    Guide

    Comment intégrer un échiquier interactif sur votre site

    5 min de lectureEnglishDeutschEspañolItalianoPortuguêsРусский中文

    Vous voulez que vos lecteurs cliquent coup par coup sur votre page—compte-rendu de club, article de coaching, newsletter—sans les envoyer vers Lichess ou Chess.com. C’est exactement le rôle d’un embed : un échiquier interactif qui vit dans votre mise en page.

    Le chemin le plus rapide : un seul iframe. Pas de plugin, pas d’étape de build, pas de bibliothèque React d’échecs. Collez votre PGN dans le Visionneur PGN ScanChess gratuit, appuyez sur Embed, et déposez l’extrait dans WordPress, Ghost ou n’importe quelle page HTML.

    Partie entière ou une seule position ?

    Choisissez le format avant l’outil :

    En cas de doute, intégrez le PGN. Une partie complète contient déjà toutes les positions intermédiaires.

    Étape 1 : Obtenir un PGN propre

    Il vous faut les coups en Portable Game Notation. Sources fiables :

    1. Export depuis Lichess ou Chess.com.
    2. Coller des coups déjà saisis.
    3. Photographier une feuille de partie papier et la numériser avec ScanChess—utile quand la partie n’a jamais quitté la feuille.

    Les coups illégaux ou mal tapés cassent la reprise plus tard. Si le PGN est douteux, passez-le d’abord au validateur PGN.

    Étape 2 : Générer l’extrait d’embed

    1. Ouvrez le Visionneur PGN.
    2. Collez votre PGN (ou chargez une partie déjà partagée depuis ScanChess).
    3. Vérifiez que l’échiquier rejoue comme prévu—retournez-le si l’article est du point de vue des Noirs.
    4. Cliquez sur Embed dans la barre d’outils. Le visionneur copie un iframe dans le presse-papiers.

    Un extrait typique ressemble à ceci (votre src contiendra votre PGN encodé) :

    <iframe
  src="https://scanchess.com/embed/pgn-viewer?pgn=1.+e4+e5+2.+Nf3+Nc6+3.+Bb5+a6"
  width="640"
  height="560"
  style="border:0;border-radius:12px;width:100%;max-width:100%;aspect-ratio:16/10;"
  allowfullscreen
  loading="lazy">
</iframe>

    L’URL /embed/pgn-viewer est la surface intégrable. Utilisez ce chemin (ou l’extrait fourni par le bouton), pas l’URL normale d’un outil ou d’une page de partage—celles-ci sont volontairement bloquées en iframe.

    Étape 3 : Coller dans votre CMS

    WordPress (éditeur de blocs)

    1. Ajoutez un bloc HTML personnalisé à l’endroit où l’échiquier doit apparaître.
    2. Collez l’extrait iframe.
    3. Prévisualisez sur ordinateur et téléphone, puis publiez.

    Aucun plugin d’échecs n’est requis. L’échiquier s’adapte grâce aux styles width: 100% de l’extrait.

    Ghost

    1. Dans l’éditeur, tapez /html et choisissez une carte HTML.
    2. Collez l’extrait.
    3. Prévisualisez et publiez.

    Substack et newsletters similaires

    Beaucoup d’éditeurs de newsletters restreignent les iframes bruts. Si la carte HTML accepte l’extrait, utilisez-le. Sinon, liez vers la partie—deep link du Visionneur PGN (/tools/pgn-viewer?pgn=...) ou URL permanente ScanChess d’une partie scannée—et invitez le lecteur à « ouvrir l’échiquier interactif ». Associer ce lien à une image d’échiquier statique via FEN vers image ou un court PGN vers GIF garde le message lisible dans la boîte de réception.

    Sites statiques (Hugo, Astro, Jekyll, HTML brut)

    Collez l’iframe dans le modèle de page ou un bloc HTML Markdown. Comme c’est du HTML pur, il ne dépend ni de React, ni de Vue, ni d’un paquet npm d’échecs.

    De la feuille papier à l’embed

    Les parties en face-à-face commencent souvent à l’encre, pas par un bouton de téléchargement :

    1. Photographiez la feuille de partie.
    2. Scannez-la avec ScanChess pour obtenir un PGN validé (et souvent un lien de partage).
    3. Ouvrez cette partie dans le Visionneur PGN ou collez-y le PGN.
    4. Appuyez sur Embed et collez l’extrait sur le site du club ou le blog.

    C’est la version ScanChess de « retaper la partie à la main, puis se battre avec un plugin d’embed ».

    Astuces qui évitent une republication

    • Prévisualisez la reprise avant d’intégrer. Un mauvais côté au trait ou un PGN tronqué saute aux yeux dans le visionneur—et passe souvent inaperçu dans l’aperçu CMS si vous sautez cette étape.
    • Préférez un PGN plus court dans l’URL pour les parties longues. Les embeds en query string ont des limites de longueur pratiques. Si le bouton Embed raccourcit ou reformate le texte, gardez cette version. Pour les pages d’archives de club, un lien permanent est plus durable que cinquante coups dans le src.
    • Largeur mobile. Conservez les styles de largeur fluide de l’extrait. Des largeurs fixes en pixels qui semblaient parfaites en brouillon bureau débordent souvent sur téléphone.
    • Ligne d’attribution. L’extrait copié inclut une petite mention « powered by ScanChess ». Laissez-la si possible : elle indique d’où vient la reprise et aide à maintenir l’outil gratuit.

    Quand une image fixe ou un GIF suffit

    Un échiquier interactif est excessif pour un puzzle d’un coup dans un chat ou une miniature sociale. Dans ces cas :

    Si plus tard vous voulez que l’on étudie toute la partie sur votre site, revenez à l’embed iframe.

    Optionnel : auto-hébergement pour développeurs

    Si vous contrôlez le frontend et préférez ne pas iframes un lecteur hébergé, le paquet open-source chess-board-embed (licence MIT) du dépôt ScanChess fournit un web component sans dépendance (<chess-board-embed>) que vous pouvez builder et servir vous-même. La plupart des webmasters de club n’en ont pas besoin—l’iframe du Visionneur PGN suffit. Utilisez le component quand vous voulez les assets de l’échiquier sur votre propre origine, ou dans un design system qui interdit les frames tiers.

    Guides associés

    Transformez votre feuille en PGN en quelques secondes

    Envoyez une photo et laissez ScanChess faire la transcription.

    Scanner votre feuille de partie

    Continuer la lecture