In Debaty-post op dyn eigen side
Slút in losse post yn mei ien knip-en-plak-snippet — sûnder cookies, sûnder tracking, en dus sûnder dat dyn besikers dêr in cookiebanner foar fuortklikke hoege.
It snippet
Plak dit dêr't de post stean moat. De blockquote is de ynhâld sels — lêsber foar sykmasines, RSS-lêzers en screenreaders, ek as JavaScript út stiet. It skript ferfangt him troch in libjende, meiskaaljende kaart.
<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>Do hoechst dit net mei de hân te bouwen: eltse post hat "Ynslute" yn it dielmenu, en de koade komt der kant-en-klear út — ynklusyf de posttekst yn de blockquote.
In liveblog ynslute
Neist in post kinst ek in hiele liveblog ynslute: brûk data-debaty-liveblog mei it liveblog-id yn plak fan data-debaty-post. De kaart lit de titel, de persoan dy't it fiert, de trije nijste updates en in keppeling nei it folsleine ferslach sjen, en fernijt himsels elke tritich sekonden salang't de liveblog iepen stiet — sûnder cookies en sûnder fersiken nei in tredde partij. Sagau't de liveblog sletten wurdt, stopet it fernijen en lit de kaart de slotgearfetting sjen.
<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>Hoe't it wurket
embed.js (±2 kB, gjin dependencies) siket blockquotes mei data-debaty-post en ferfangt se troch in iframe nei de embed-side fan dy post. It iframe mjit himsels en meldt syn hichte fia postMessage; embed.js akseptearret sa'n berjocht allinne fan ús origin én allinne foar in iframe dat it sels pleatste. Keppelings yn de kaart iepenje yn in nij ljepblêd op Debaty.
Gjin cookies, gjin tracking
It embed-dokumint set gjin inkele cookie, lêst gjin sesje en docht gjin inkel third-party-request — systeemfonts, eigen CSS, ôfbyldings allinne fan ús eigen origin. Der falt dus neat om tastimming foar te jaan: do kinst it embed pleatse sûnder cookiebanner-ferplichtings, en it wurket ek yn browsers dy't third-party-cookies folslein blokkearje (lykas Safari).
Bouwst do it iframe sels ynstee fan fia embed.js? Set der dan dit sandbox-attribút op — mear hat de kaart net nedich:
<iframe src="https://debaty.com/embed/post/<post-id>"
sandbox="allow-scripts allow-same-origin allow-popups"></iframe>Tema en taal
Standert folget de kaart it kleurskema fan de besiker (ljocht/tsjuster). Pin it mei data-debaty-theme="light" of "dark" op de blockquote; de taal fan de kaart-labels kiest do mei data-debaty-lang="nl" of "en".
oEmbed
Foar CMS'en en editors dy't oEmbed prate (WordPress, Mastodon-eftigen, notysje-apps) is der in endpoint neffens oembed.com: type rich, mei it snippet yn html. height is null — de hichte is pas bekend as de ynhâld rendert; embed.js mjit him live. maxwidth wurdt respektearre oant ús plafond fan 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
}Elke publike postside draacht de discovery-link (<link rel="alternate" type="application/json+oembed">), dus in oEmbed-consumer hat oan de gewoane permalink genôch.
En de publisher-widget dan?
Dit binne twa ferskillende produkten. It post-embed (dizze side) toant ien besteande Debaty-post, oeral pleatsber, sûnder registraasje. De publisher-widget is in reaksjepaniel ûnder dyn eigen artikels: reaksjes fan dyn lêzers, mei moderaasjewachtrige en in domein-allowlist, beheard fia dyn publisher-akkount.
Nei de publisher-widget →