Вы хотите, чтобы читатели щёлкали партию на вашей странице—отчёт клуба, тренерский пост, рассылка—не уходя на Lichess или Chess.com. Для этого и нужен embed: интерактивная доска внутри вашей вёрстки.
Самый быстрый путь—один iframe. Без плагина, без сборки, без React-библиотеки для шахмат. Вставьте PGN в бесплатный PGN-просмотрщик ScanChess, нажмите Embed и вставьте фрагмент в WordPress, Ghost или любую HTML-страницу.
Вся партия или одна позиция?
Сначала выберите формат, потом инструмент:
- Вся партия (PGN): читатели идут ход за ходом. Интерактивный embed. Эта инструкция.
- Одна позиция (FEN): нужен только диаграмма или строка для доски анализа. См. что такое FEN, FEN в изображение или варианты шаринга в как поделиться шахматной партией онлайн.
Если не уверены—встраивайте PGN. Полная партия уже содержит все промежуточные позиции.
Шаг 1: Получите чистый PGN
Нужны ходы в Portable Game Notation. Удобные источники:
- Экспорт с Lichess или Chess.com.
- Вставка ходов, которые вы уже набрали.
- Фото бумажного бланка и оцифровка через ScanChess—когда партия так и осталась на бланке.
Нелегальные или опечатанные ходы ломают просмотр позже. Если PGN сомнительный, сначала прогоните его через валидатор PGN.
Шаг 2: Сгенерируйте фрагмент embed
- Откройте PGN-просмотрщик.
- Вставьте PGN (или загрузите партию, которой уже делитесь через ScanChess).
- Убедитесь, что доска воспроизводит как нужно—разверните её, если статья с точки зрения чёрных.
- Нажмите Embed на панели инструментов. Просмотрщик скопирует 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 (блочный редактор)
- Добавьте блок Custom HTML там, где должна быть доска.
- Вставьте фрагмент iframe.
- Проверьте превью на десктопе и телефоне, затем опубликуйте.
Шахматный плагин не нужен. Доска масштабируется стилями width: 100% во фрагменте.
Ghost
- В редакторе наберите
/htmlи выберите карточку HTML. - Вставьте фрагмент.
- Превью и публикация.
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
Очные партии часто начинаются с чернил, а не с кнопки «скачать»:
- Сфотографируйте бланк.
- Отсканируйте его в ScanChess—получите проверенный PGN (и обычно ссылку для шаринга).
- Откройте партию в PGN-просмотрщике или вставьте туда PGN.
- Нажмите Embed и вставьте фрагмент на сайт клуба или в блог.
Это путь 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.