Una publicación de Debaty en tu propio sitio

El fragmento

Pega esto donde deba aparecer la publicación. El blockquote es el contenido en sí — legible para buscadores, lectores de RSS y lectores de pantalla, incluso con JavaScript desactivado. El script lo reemplaza por una tarjeta viva que se ajusta sola de tamaño.

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

Nunca tienes que armar esto a mano: cada publicación tiene "Insertar" en su menú de compartir, y el código sale listo para usar — con el texto de la publicación incluido en el blockquote.

Insertar un liveblog

Además de una publicación, puedes insertar un liveblog entero: usa data-debaty-liveblog con el id del liveblog en lugar de data-debaty-post. La tarjeta muestra el título, la persona que lo lleva, las tres actualizaciones más recientes y un enlace al informe completo, y se actualiza sola cada treinta segundos mientras el liveblog está abierto, sin cookies y sin solicitudes a terceros. En cuanto el liveblog se cierra, deja de actualizarse y la tarjeta muestra el resumen final.

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

Cómo funciona

embed.js (±2 kB, sin dependencias) busca los blockquote con data-debaty-post y los reemplaza por un iframe que apunta a la página de inserción de esa publicación. El iframe se mide a sí mismo e informa su altura mediante postMessage; embed.js solo acepta ese mensaje si viene de nuestro origin y solo para un iframe que él mismo colocó. Los enlaces de la tarjeta abren Debaty en una pestaña nueva.

Tema e idioma

Por defecto, la tarjeta sigue el esquema de color del visitante (claro/oscuro). Fíjalo con data-debaty-theme="light" o "dark" en el blockquote; el idioma de las etiquetas de la tarjeta lo eliges con data-debaty-lang="nl" o "en".

oEmbed

Para CMS y editores que hablan oEmbed (WordPress, similares a Mastodon, apps de notas) hay un endpoint conforme a oembed.com: type rich, con el fragmento en html. height es null — la altura solo se conoce cuando el contenido se renderiza; embed.js la mide en vivo. maxwidth se respeta hasta nuestro tope 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
}

Cada página de publicación pública lleva el enlace de descubrimiento (<link rel="alternate" type="application/json+oembed">), así que un consumidor de oEmbed solo necesita el permalink normal.

Son dos productos distintos. El embed de publicación (esta página) muestra una publicación existente de Debaty, colocable en cualquier sitio, sin registro. El widget para editores es un panel de comentarios bajo tus propios artículos: los comentarios de tus lectores, con una cola de moderación y una lista de dominios permitidos, gestionado desde tu cuenta de editor.