Cómo incrustar un tablero de ajedrez interactivo en tu web

Quieres que los lectores avancen por una partida en tu página —crónica del club, artículo de entrenamiento, newsletter— sin mandarlos a Lichess o Chess.com. Para eso sirve un embed: un tablero interactivo que vive dentro de tu diseño.

El camino más rápido es un solo iframe. Sin plugin, sin build, sin librería React de ajedrez. Pega tu PGN en el Visor PGN de ScanChess gratuito, pulsa Embed y suelta el fragmento en WordPress, Ghost o cualquier página HTML.

¿Partida completa o una sola posición?

Elige el formato antes de elegir la herramienta:

• Partida completa (PGN): los lectores avanzan jugada a jugada. Usa un embed interactivo. Esta guía.
• Una posición (FEN): solo necesitas un diagrama o una cadena que alguien pegue en un tablero de análisis. Usa qué es FEN, FEN a imagen o las opciones de compartir en cómo compartir una partida de ajedrez online.

Si dudas, incrusta el PGN. Una partida completa ya contiene todas las posiciones del camino.

Paso 1: Consigue un PGN limpio

Necesitas las jugadas en Portable Game Notation. Fuentes que funcionan bien:

1. Exportar desde Lichess o Chess.com.
2. Pegar jugadas que ya hayas escrito.
3. Fotografiar una planilla en papel y digitalizarla con ScanChess—útil cuando la partida nunca salió de la planilla.

Las jugadas ilegales o mal escritas rompen la reproducción después. Si el PGN es dudoso, pásalo antes por el validador PGN.

Paso 2: Genera el fragmento de embed

1. Abre el Visor PGN.
2. Pega tu PGN (o carga una partida que ya compartas desde ScanChess).
3. Confirma que el tablero reproduce como esperas—gira el tablero si el artículo está desde el punto de vista de las negras.
4. Haz clic en Embed en la barra de herramientas. El visor copia un iframe al portapapeles.

Un fragmento típico se ve así (tu src incluirá tu PGN codificado):

<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>

La URL /embed/pgn-viewer es la superficie integrable. Usa esa ruta (o el fragmento que te da el botón), no la URL normal de una herramienta o de una página de compartir: esas están bloqueadas a propósito para no abrirse en iframe.

Paso 3: Pégalo en tu CMS

WordPress (editor de bloques)

1. Añade un bloque de HTML personalizado donde deba aparecer el tablero.
2. Pega el fragmento iframe.
3. Previsualiza en escritorio y móvil, y publica.

No hace falta ningún plugin de ajedrez. El tablero se adapta con los estilos width: 100% del fragmento.

Ghost

1. En el editor, escribe /html y elige una tarjeta HTML.
2. Pega el fragmento.
3. Previsualiza y publica.

Substack y newsletters similares

Muchos editores de newsletters restringen los iframes en bruto. Si la tarjeta HTML acepta el fragmento, úsalo. Si no, enlaza a la partida—el deep link del Visor PGN (/tools/pgn-viewer?pgn=...) o una URL permanente de ScanChess de una partida escaneada—y dile al lector que «abra el tablero interactivo». Combinar ese enlace con una imagen estática del tablero desde FEN a imagen o un PGN a GIF corto mantiene el post legible en la bandeja de entrada.

Sitios estáticos (Hugo, Astro, Jekyll, HTML plano)

Pega el iframe en la plantilla de la página o en un bloque HTML de Markdown. Al ser HTML puro, no depende de React, Vue ni de un paquete npm de ajedrez.

De la planilla en papel al embed

Las partidas presenciales suelen empezar en tinta, no en un botón de descarga:

1. Fotografía la planilla.
2. Escanéala con ScanChess para obtener un PGN validado (y, casi siempre, un enlace para compartir).
3. Abre esa partida en el Visor PGN o pega ahí el PGN.
4. Pulsa Embed y pega el fragmento en la web del club o en el blog.

Ese flujo es la versión ScanChess de «transcribir la partida a mano y pelearte después con un plugin de embed».

Consejos que te ahorran republicar

• Previsualiza la reproducción antes de incrustar. Un bando al que no le toca o un PGN truncado se ve claro en el visor y pasa desapercibido en la vista previa del CMS si te saltas este paso.
• Prefiere un PGN más corto en la URL cuando la partida es larga. Los embeds por query string tienen límites prácticos de longitud. Si el botón Embed acorta o reformatea el texto, quédate con esa versión. En páginas de archivo del club, un enlace permanente aguanta mejor que meter cincuenta jugadas en el src.
• Ancho en móvil. Conserva los estilos de ancho fluido del fragmento. Anchos fijos en píxeles que quedaban bien en el borrador de escritorio suelen desbordarse en el teléfono.
• Línea de atribución. El fragmento copiado incluye una pequeña línea «powered by ScanChess». Déjala si puedes: indica a los lectores de dónde viene la reproducción y ayuda a mantener la herramienta gratuita.

Cuándo basta una imagen estática o un GIF

Un tablero interactivo es excesivo para un puzzle de un solo movimiento en un chat o una miniatura en redes. En esos casos:

• FEN a imagen para un diagrama suelto.
• PGN a GIF para un highlight animado corto.

Si más adelante quieres que estudien la partida completa en tu sitio, vuelve al embed con iframe.

Opcional: autoalojamiento para desarrolladores

Si controlas el frontend y prefieres no iframear un reproductor alojado, el paquete open-source chess-board-embed (licencia MIT) del repositorio de ScanChess ofrece un web component sin dependencias (<chess-board-embed>) que puedes compilar y servir tú mismo. La mayoría de webmasters de club no necesitan ese camino: el iframe del Visor PGN basta. Usa el componente cuando quieras los assets del tablero en tu propio origen o dentro de un design system que prohíbe frames de terceros.

Guías relacionadas

• Cómo compartir una partida de ajedrez online — archivos PGN, enlaces, FEN y cuándo no incrustar.
• ¿Qué es PGN? — etiquetas, movetext y cómo se ve un archivo válido.
• Convertir una planilla manuscrita a PGN — del papel a lo digital antes de incrustar.
• Herramienta gratuita: Visor PGN — reproducir, compartir y copiar el fragmento de embed.