Uma publicação do Debaty no seu próprio site
Incorpore uma publicação isolada com um único trecho de copiar e colar — sem cookies, sem rastreamento, então seus visitantes nunca precisam fechar um banner de cookies por causa disso.
O trecho
Cole isto onde a publicação deve aparecer. O blockquote é o próprio conteúdo — legível por buscadores, leitores de RSS e leitores de tela, mesmo com o JavaScript desligado. O script o substitui por um cartão vivo que se redimensiona sozinho.
<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>Você nunca precisa montar isto na mão: toda publicação tem "Incorporar" no menu de compartilhar, e o código sai pronto — com o texto da publicação incluído no blockquote.
Incorporar um liveblog
Além de um post, você pode incorporar um liveblog inteiro: use data-debaty-liveblog com o id do liveblog em vez de data-debaty-post. O card mostra o título, a pessoa que o conduz, as três atualizações mais recentes e um link para o relato completo, e se atualiza sozinho a cada trinta segundos enquanto o liveblog está aberto — sem cookies e sem solicitações a terceiros. Assim que o liveblog é encerrado, a atualização para e o card mostra o resumo 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>Como funciona
O embed.js (±2 kB, sem dependências) encontra os blockquote com data-debaty-post e os substitui por um iframe que aponta para a página de incorporação daquela publicação. O iframe se mede sozinho e informa sua altura via postMessage; o embed.js só aceita essa mensagem vinda do nosso origin e só para um iframe que ele mesmo colocou. Os links do cartão abrem o Debaty numa nova aba.
Sem cookies, sem rastreamento
O documento de incorporação não define nenhum cookie, não lê nenhuma sessão e não faz nenhuma requisição a terceiros — fontes do sistema, o próprio CSS, imagens apenas do nosso próprio origin. Ou seja, não há nada a consentir: você pode colocar a incorporação sem obrigações de banner de cookies, e ela continua funcionando em navegadores que bloqueiam totalmente cookies de terceiros (como o Safari).
Vai construir o iframe você mesmo em vez de usar o embed.js? Então coloque nele este atributo sandbox — o cartão não precisa de mais nada:
<iframe src="https://debaty.com/embed/post/<post-id>"
sandbox="allow-scripts allow-same-origin allow-popups"></iframe>Tema e idioma
Por padrão, o cartão segue o esquema de cores do visitante (claro/escuro). Fixe-o com data-debaty-theme="light" ou "dark" no blockquote; o idioma dos rótulos do cartão você escolhe com data-debaty-lang="nl" ou "en".
oEmbed
Para CMSs e editores que falam oEmbed (WordPress, similares ao Mastodon, apps de notas) há um endpoint conforme o oembed.com: type rich, com o trecho em html. height é null — a altura só é conhecida quando o conteúdo renderiza; o embed.js a mede ao vivo. maxwidth é respeitado até o nosso teto 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
}Toda página de publicação pública carrega o link de descoberta (<link rel="alternate" type="application/json+oembed">), então um consumidor oEmbed só precisa do permalink comum.
E o widget para publishers?
São dois produtos diferentes. O embed de publicação (esta página) mostra uma publicação existente do Debaty, colocável em qualquer lugar, sem cadastro. O widget para publishers é um painel de comentários abaixo dos seus próprios artigos: os comentários dos seus leitores, com uma fila de moderação e uma allowlist de domínios, gerenciado pela sua conta de publisher.
Ir para o widget para publishers →