Как встроить интерактивную шахматную доску на сайт

Вы хотите, чтобы читатели щёлкали партию на вашей странице—отчёт клуба, тренерский пост, рассылка—не уходя на Lichess или Chess.com. Для этого и нужен embed: интерактивная доска внутри вашей вёрстки.

Самый быстрый путь—один iframe. Без плагина, без сборки, без React-библиотеки для шахмат. Вставьте PGN в бесплатный PGN-просмотрщик ScanChess, нажмите Встроить и вставьте фрагмент в WordPress, Ghost или любую HTML-страницу.

Вся партия или одна позиция?

Сначала выберите формат, потом инструмент:

• Вся партия (PGN): читатели идут ход за ходом. Интерактивный embed. Эта инструкция.
• Одна позиция (FEN): нужен только диаграмма или строка для доски анализа. См. что такое FEN, FEN в изображение или варианты шаринга в как поделиться шахматной партией онлайн.

Если не уверены—встраивайте PGN. Полная партия уже содержит все промежуточные позиции.

Шаг 1: Получите чистый PGN

Нужны ходы в Portable Game Notation. Удобные источники:

1. Экспорт с Lichess или Chess.com.
2. Вставка ходов, которые вы уже набрали.
3. Фото бумажного бланка и оцифровка через ScanChess—когда партия так и осталась на бланке.

Нелегальные или опечатанные ходы ломают просмотр позже. Если PGN сомнительный, сначала прогоните его через валидатор PGN.

Шаг 2: Сгенерируйте фрагмент embed

1. Откройте PGN-просмотрщик.
2. Вставьте PGN (или загрузите партию, которой уже делитесь через ScanChess).
3. Убедитесь, что доска воспроизводит как нужно—разверните её, если статья с точки зрения чёрных.
4. Нажмите Встроить на панели инструментов. Просмотрщик скопирует iframe в буфер обмена.

Типичный фрагмент выглядит так (в вашем src будет закодированный PGN):

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

URL /embed/pgn-viewer—это встраиваемая поверхность. Используйте этот путь (или фрагмент с кнопки), а не обычный URL инструмента или страницы шаринга—их специально нельзя открыть в iframe.

Шаг 3: Вставьте в CMS

WordPress (блочный редактор)

1. Добавьте блок Custom HTML там, где должна быть доска.
2. Вставьте фрагмент iframe.
3. Проверьте превью на десктопе и телефоне, затем опубликуйте.

Шахматный плагин не нужен. Доска масштабируется стилями width: 100% во фрагменте.

Ghost

1. В редакторе наберите /html и выберите карточку HTML.
2. Вставьте фрагмент.
3. Превью и публикация.

Substack и похожие рассылки

Многие редакторы рассылок ограничивают «сырые» iframe. Если HTML-карточка принимает фрагмент—используйте его. Если нет, дайте ссылку на партию—deep link PGN-просмотрщика (/tools/pgn-viewer?pgn=...) или постоянный URL ScanChess отсканированной партии—и напишите «откройте интерактивную доску». Вместе со статичной картинкой из FEN в изображение или коротким PGN в GIF пост остаётся читаемым во входящих.

Статические сайты (Hugo, Astro, Jekyll, обычный HTML)

Вставьте iframe в шаблон страницы или HTML-блок Markdown. Это обычный HTML—без React, Vue и npm-пакета для шахмат.

От бумажного бланка к embed

Очные партии часто начинаются с чернил, а не с кнопки «скачать»:

1. Сфотографируйте бланк.
2. Отсканируйте его в ScanChess—получите проверенный PGN (и обычно ссылку для шаринга).
3. Откройте партию в PGN-просмотрщике или вставьте туда PGN.
4. Нажмите Встроить и вставьте фрагмент на сайт клуба или в блог.

Это путь ScanChess вместо «набить партию руками, а потом бороться с плагином embed».

Советы, которые экономят повторную публикацию

• Просмотрите партию до встраивания. Не та сторона ходить или обрезанный PGN сразу видны в просмотрщике и часто незаметны в превью CMS, если шаг пропустить.
• Для длинных партий—короче PGN в URL. Embed через query string имеет практические лимиты длины. Если кнопка Embed сокращает или переформатирует текст, оставьте эту версию. Для архивных страниц клуба постоянная ссылка надёжнее, чем пятьдесят ходов в src.
• Ширина на мобильных. Сохраните «жидкие» стили ширины фрагмента. Фиксированные пиксели, которые хорошо смотрелись в десктоп-черновике, часто вылезают за край на телефоне.
• Строка атрибуции. Скопированный фрагмент включает маленькую строку «powered by ScanChess». Оставьте её, если можете: читатели видят источник просмотра, а инструмент остаётся бесплатным.

Когда хватит статичной картинки или GIF

Интерактивная доска избыточна для одноходовой задачи в чате или соцсетевой миниатюры. Тогда:

• FEN в изображение для одной диаграммы.
• PGN в GIF для короткого анимированного хайлайта.

Если позже захотите, чтобы партию изучали целиком на вашем сайте, вернитесь к iframe-embed.

Опционально: self-host для разработчиков

Если вы контролируете фронтенд и не хотите iframe с хостинг-плеером, open-source пакет chess-board-embed (лицензия MIT) в репозитории ScanChess даёт web component без зависимостей (<chess-board-embed>), который можно собрать и отдавать самостоятельно. Большинству вебмастеров клубов этот путь не нужен—iframe из PGN-просмотрщика достаточно. Берите component, когда ассеты доски должны жить на вашем origin или когда design system запрещает сторонние frame.

Связанные материалы

• Как поделиться шахматной партией онлайн — файлы PGN, ссылки, FEN и когда embed не нужен.
• Что такое PGN? — теги, movetext и как выглядит валидный файл.
• Конвертация рукописного бланка в PGN — с бумаги в цифру перед встраиванием.
• Бесплатный инструмент: PGN-просмотрщик — просмотр, шаринг и копирование фрагмента embed.