Пост Debaty на твоём собственном сайте

Фрагмент

Вставь это туда, где должен появиться пост. Blockquote — это и есть само содержимое, читаемое поисковиками, RSS-читалками и скринридерами, даже когда JavaScript выключен. Скрипт заменяет его на живую карточку, которая сама подстраивает размер.

<blockquote class="debaty-embed" data-debaty-post="<post-id>">
  <p>De posttekst — leesbaar zonder JavaScript.</p>
  <p>— Naam (@handle) · <a href="https://debaty.com/nl/bubbel/<post-id>">https://debaty.com/nl/bubbel/<post-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>

Тебе никогда не нужно собирать это вручную: у каждого поста в меню «Поделиться» есть «Встроить», и код выдаётся готовым — вместе с текстом поста внутри blockquote.

Как встроить лайв-блог

Кроме поста ты можешь встроить целый лайв-блог: используй data-debaty-liveblog с id лайв-блога вместо data-debaty-post. Карточка показывает заголовок, того, кто его ведёт, три самых свежих обновления и ссылку на полный отчёт и сама обновляется каждые тридцать секунд, пока лайв-блог открыт, — без файлов cookie и без запросов к каким-либо третьим сторонам. Как только лайв-блог закрывается, обновление прекращается и карточка показывает итоговую сводку.

<blockquote class="debaty-embed" data-debaty-liveblog="<liveblog-id>">
  <p><strong>De titel van het liveblog</strong></p>
  <p>De intro — leesbaar zonder JavaScript.</p>
  <p>— Naam (@handle) · <a href="https://debaty.com/nl/liveblog/<liveblog-id>">https://debaty.com/nl/liveblog/<liveblog-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>

Как это работает

embed.js (±2 kB, без зависимостей) находит blockquote с data-debaty-post и заменяет их на iframe, ведущий на страницу встраивания этого поста. Iframe измеряет сам себя и сообщает свою высоту через postMessage; embed.js принимает такое сообщение только от нашего origin и только для iframe, который он сам поставил. Ссылки в карточке открывают Debaty в новой вкладке.

Тема и язык

По умолчанию карточка следует цветовой схеме посетителя (светлая/тёмная). Закрепи её с помощью data-debaty-theme="light" или "dark" на blockquote; язык подписей карточки выбираешь через data-debaty-lang="nl" или "en".

oEmbed

Для CMS и редакторов, понимающих oEmbed (WordPress, аналоги Mastodon, заметочные приложения), есть эндпоинт по стандарту oembed.com: type rich, с фрагментом в html. height равен null — высота становится известна только после рендеринга контента; embed.js измеряет её вживую. maxwidth учитывается вплоть до нашего потолка в 600.

GET /api/oembed?url=https%3A%2F%2Fdebaty.com%2Fnl%2Fbubbel%2F<post-id>&format=json

{
  "version": "1.0",
  "type": "rich",
  "provider_name": "Debaty",
  "author_name": "…",
  "html": "<blockquote class=\"debaty-embed\" …>…</blockquote><script async src=\"…/embed.js\"></script>",
  "width": 600,
  "height": null
}

На каждой публичной странице поста есть ссылка обнаружения (<link rel="alternate" type="application/json+oembed">), поэтому потребителю oEmbed достаточно обычной постоянной ссылки.

Это два разных продукта. Встраивание поста (эта страница) показывает один существующий пост Debaty, его можно разместить где угодно, без регистрации. Виджет для издателей — это панель комментариев под твоими собственными статьями: комментарии твоих читателей, с очередью модерации и белым списком доменов, управляется через твой аккаунт издателя.