Vuoi che i lettori clicchino mossa dopo mossa sulla tua pagina—cronaca del club, post di coaching, newsletter—senza mandarli su Lichess o Chess.com. È esattamente lo scopo di un embed: una scacchiera interattiva che vive nel tuo layout.
Il percorso più rapido è un solo iframe. Niente plugin, niente build, niente libreria React di scacchi. Incolla il PGN nel Visualizzatore PGN di ScanChess gratuito, premi Embed e metti lo snippet in WordPress, Ghost o qualsiasi pagina HTML.
Partita intera o una sola posizione?
Scegli il formato prima dello strumento:
- Partita intera (PGN): i lettori avanzano mossa per mossa. Usa un embed interattivo. Questa guida.
- Una posizione (FEN): ti serve solo un diagramma o una stringa da incollare in una scacchiera di analisi. Usa cos’è il FEN, FEN in immagine o le opzioni di condivisione in come condividere una partita di scacchi online.
In dubbio, incorpora il PGN. Una partita completa contiene già tutte le posizioni intermedie.
Passo 1: Ottenere un PGN pulito
Ti servono le mosse in Portable Game Notation. Fonti che funzionano bene:
- Esporta da Lichess o Chess.com.
- Incolla mosse già digitate.
- Fotografa un foglio segnamosse cartaceo e digitalizzalo con ScanChess—utile quando la partita non ha mai lasciato il foglio.
Mosse illegali o digitate male rompono la ripresa dopo. Se il PGN è instabile, passalo prima dal validatore PGN.
Passo 2: Generare lo snippet di embed
- Apri il Visualizzatore PGN.
- Incolla il PGN (o carica una partita già condivisa da ScanChess).
- Verifica che la scacchiera ripeta come ti aspetti—ruotala se l’articolo è dal punto di vista del Nero.
- Clicca Embed nella barra degli strumenti. Il visualizzatore copia un iframe negli appunti.
Uno snippet tipico è così (il tuo src includerà il PGN codificato):
<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 è la superficie incorporabile. Usa quel percorso (o lo snippet del pulsante), non l’URL normale di uno strumento o di una pagina di condivisione—quelli sono bloccati di proposito dagli iframe.
Passo 3: Incollarlo nel CMS
WordPress (editor a blocchi)
- Aggiungi un blocco HTML personalizzato dove deve comparire la scacchiera.
- Incolla lo snippet iframe.
- Anteprima su desktop e telefono, poi pubblica.
Non serve alcun plugin di scacchi. La scacchiera scala con gli stili width: 100% dello snippet.
Ghost
- Nell’editor digita
/htmle scegli una card HTML. - Incolla lo snippet.
- Anteprima e pubblica.
Substack e newsletter simili
Molti editor di newsletter limitano gli iframe grezzi. Se la card HTML accetta lo snippet, usalo. Altrimenti collega la partita—deep link del Visualizzatore PGN (/tools/pgn-viewer?pgn=...) o URL permanente ScanChess di una partita scansionata—e invita ad «aprire la scacchiera interattiva». Abbinare quel link a un’immagine statica da FEN in immagine o a un breve PGN in GIF mantiene il post leggibile nella casella di posta.
Siti statici (Hugo, Astro, Jekyll, HTML puro)
Incolla l’iframe nel template della pagina o in un blocco HTML Markdown. Essendo HTML puro, non dipende da React, Vue o da un pacchetto npm di scacchi.
Dal foglio cartaceo all’embed
Le partite a tavolino spesso iniziano con l’inchiostro, non con un pulsante di download:
- Fotografa il foglio segnamosse.
- Scannerizzalo con ScanChess per ottenere un PGN validato (e di solito un link di condivisione).
- Apri quella partita nel Visualizzatore PGN o incolla lì il PGN.
- Premi Embed e incolla lo snippet sul sito del club o sul blog.
È la versione ScanChess di «trascrivere la partita a mano e poi litigare con un plugin di embed».
Consigli che evitano una ripubblicazione
- Anteprima della ripresa prima di incorporare. Lato sbagliato al tratto o PGN troncato è evidente nel visualizzatore e invisibile nell’anteprima CMS se salti questo passo.
- Preferisci PGN più corti nell’URL quando la partita è lunga. Gli embed in query string hanno limiti pratici di lunghezza. Se il pulsante Embed accorcia o riformatta il testo, tieni quella versione. Per le pagine d’archivio del club un link permanente è più durevole di cinquanta mosse nel
src. - Larghezza su mobile. Conserva gli stili a larghezza fluida dello snippet. Larghezze fisse in pixel che sembravano a posto nella bozza desktop spesso sforano sul telefono.
- Riga di attribuzione. Lo snippet copiato include una piccola riga «powered by ScanChess». Lasciala se puoi: dice ai lettori da dove viene la ripresa e aiuta a tenere lo strumento gratuito.
Quando basta un’immagine statica o una GIF
Una scacchiera interattiva è eccessiva per un puzzle di una mossa in chat o una miniatura social. In quei casi:
- FEN in immagine per un singolo diagramma.
- PGN in GIF per un highlight animato breve.
Se più avanti vorrai che studiino la partita completa sul tuo sito, torna all’embed iframe.
Opzionale: self-hosting per sviluppatori
Se controlli il frontend e preferisci non iframes un player ospitato, il pacchetto open-source chess-board-embed (licenza MIT) nel repository ScanChess offre un web component senza dipendenze (<chess-board-embed>) che puoi buildare e servire tu. La maggior parte dei webmaster di club non ne ha bisogno—l’iframe del Visualizzatore PGN basta. Usa il component quando vuoi gli asset della scacchiera sulla tua origin o in un design system che vieta i frame di terze parti.
Guide correlate
- Come condividere una partita di scacchi online — file PGN, link, FEN e quando non incorporare.
- Cos’è il PGN? — tag, movetext e come appare un file valido.
- Convertire un foglio segnamosse manoscritto in PGN — dalla carta al digitale prima di incorporare.
- Strumento gratuito: Visualizzatore PGN — ripeti, condividi e copia lo snippet di embed.