Un post Debaty sur ton propre site

L'extrait

Colle ceci là où le post doit apparaître. Le blockquote est le contenu lui-même — lisible par les moteurs de recherche, les lecteurs RSS et les lecteurs d'écran, même quand JavaScript est désactivé. Le script le remplace par une carte vivante qui se redimensionne toute seule.

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

Tu n'as jamais à construire ça à la main : chaque post a « Intégrer » dans son menu de partage, et le code sort prêt à l'emploi — texte du post inclus dans le blockquote.

Intégrer un liveblog

En plus d'un post, tu peux intégrer un liveblog entier : utilise data-debaty-liveblog avec l'id du liveblog à la place de data-debaty-post. La carte affiche le titre, la personne qui l'anime, les trois mises à jour les plus récentes et un lien vers le compte rendu complet, et se rafraîchit toute seule toutes les trente secondes tant que le liveblog est ouvert — sans cookies et sans requêtes vers un tiers. Dès que le liveblog se ferme, le rafraîchissement s'arrête et la carte affiche le résumé de clôture.

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

Comment ça marche

embed.js (±2 kB, sans dépendances) repère les blockquote avec data-debaty-post et les remplace par un iframe pointant vers la page d'intégration de ce post. L'iframe se mesure lui-même et signale sa hauteur via postMessage ; embed.js n'accepte un tel message que depuis notre origin et uniquement pour un iframe qu'il a placé lui-même. Les liens de la carte ouvrent Debaty dans un nouvel onglet.

Thème et langue

Par défaut, la carte suit le schéma de couleurs du visiteur (clair/sombre). Fixe-le avec data-debaty-theme="light" ou "dark" sur le blockquote ; tu choisis la langue des libellés de la carte avec data-debaty-lang="nl" ou "en".

oEmbed

Pour les CMS et éditeurs qui parlent oEmbed (WordPress, équivalents de Mastodon, apps de notes), il existe un endpoint conforme à oembed.com : type rich, avec l'extrait dans html. height vaut null — la hauteur n'est connue qu'une fois le contenu rendu ; embed.js la mesure en direct. maxwidth est respecté jusqu'à notre plafond de 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
}

Chaque page de publication publique porte le lien de découverte (<link rel="alternate" type="application/json+oembed">), donc un consommateur oEmbed n'a besoin que du permalien ordinaire.

Ce sont deux produits différents. L'embed de publication (cette page) affiche une publication Debaty existante, à placer n'importe où, sans inscription. Le widget éditeur est un panneau de commentaires sous tes propres articles : les commentaires de tes lecteurs, avec une file de modération et une liste blanche de domaines, géré depuis ton compte éditeur.