Ein Debaty-Post auf deiner eigenen Seite

Das Snippet

Füge das dort ein, wo der Beitrag erscheinen soll. Das Blockquote ist der Inhalt selbst – lesbar für Suchmaschinen, RSS-Reader und Screenreader, auch bei ausgeschaltetem JavaScript. Das Script ersetzt es durch eine lebendige, automatisch mitskalierende Karte.

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

Du musst das nie von Hand bauen: Jeder Beitrag hat „Einbetten“ im Teilen-Menü, und der Code kommt fertig heraus – inklusive des Beitragstexts im Blockquote.

Einen Liveblog einbetten

Neben einem Post kannst du auch einen ganzen Liveblog einbetten: Nutze data-debaty-liveblog mit der Liveblog-ID statt data-debaty-post. Die Karte zeigt den Titel, die Person, die ihn betreut, die drei neuesten Updates und einen Link zum vollständigen Bericht und aktualisiert sich alle dreißig Sekunden von selbst, solange der Liveblog offen ist – ohne Cookies und ohne Anfragen an Dritte. Sobald der Liveblog geschlossen wird, stoppt die Aktualisierung und die Karte zeigt die Abschlusszusammenfassung.

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

So funktioniert's

embed.js (±2 kB, ohne Dependencies) findet Blockquotes mit data-debaty-post und ersetzt sie durch ein iframe zur Embed-Seite des jeweiligen Posts. Das iframe misst sich selbst und meldet seine Höhe per postMessage; embed.js akzeptiert eine solche Nachricht nur von unserer Origin und nur für ein iframe, das es selbst platziert hat. Links in der Karte öffnen Debaty in einem neuen Tab.

Thema und Sprache

Standardmäßig folgt die Karte dem Farbschema der besuchenden Person (hell/dunkel). Fixiere es mit data-debaty-theme="light" oder "dark" am Blockquote; die Sprache der Karten-Labels wählst du mit data-debaty-lang="nl" oder "en".

oEmbed

Für CMS und Editoren, die oEmbed sprechen (WordPress, Mastodon-Klone, Notiz-Apps), gibt es einen Endpoint gemäß oembed.com: type rich, mit dem Snippet in html. height ist null — die Höhe steht erst fest, wenn der Inhalt gerendert wird; embed.js misst sie live. maxwidth wird bis zu unserer Obergrenze von 600 respektiert.

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
}

Jede öffentliche Beitragsseite trägt den Discovery-Link (<link rel="alternate" type="application/json+oembed">), einem oEmbed-Consumer genügt also der normale Permalink.

Das sind zwei verschiedene Produkte. Das Post-Embed (diese Seite) zeigt einen bestehenden Debaty-Post, überall platzierbar, ohne Registrierung. Das Publisher-Widget ist ein Kommentarpanel unter deinen eigenen Artikeln: Kommentare deiner Leser, mit Moderationswarteschlange und einer Domain-Allowlist, verwaltet über dein Publisher-Konto.