अपनी ही साइट पर एक Debaty पोस्ट

स्निपेट

इसे वहाँ पेस्ट करो जहाँ पोस्ट दिखनी चाहिए। blockquote खुद कंटेंट है — सर्च इंजन, RSS रीडर और स्क्रीन रीडर इसे पढ़ सकते हैं, JavaScript बंद होने पर भी। स्क्रिप्ट इसे एक जीवंत, अपने-आप आकार बदलने वाले कार्ड से बदल देती है।

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

तुम्हें यह हाथ से बनाने की ज़रूरत नहीं: हर पोस्ट के शेयर मेन्यू में "एम्बेड करो" होता है, और कोड बना-बनाया मिल जाता है — blockquote में पोस्ट का टेक्स्ट भी शामिल।

लाइवब्लॉग एम्बेड करना

पोस्ट के अलावा तुम पूरा लाइवब्लॉग भी एम्बेड कर सकते हो: data-debaty-post की जगह data-debaty-liveblog का इस्तेमाल करो और उसमें लाइवब्लॉग id दो। कार्ड शीर्षक, इसे चलाने वाले व्यक्ति, तीन सबसे नई अपडेट और पूरे विवरण का लिंक दिखाता है, और जब तक लाइवब्लॉग खुला है तब तक हर तीस सेकंड में खुद रिफ्रेश होता रहता है — बिना कुकीज़ के और बिना किसी तीसरे पक्ष को अनुरोध भेजे। जैसे ही लाइवब्लॉग बंद होता है, रिफ्रेश होना रुक जाता है और कार्ड समापन सारांश दिखाता है।

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

यह कैसे काम करता है

embed.js (±2 kB, बिना किसी डिपेंडेंसी के) data-debaty-post वाले blockquote ढूँढता है और उन्हें उस पोस्ट के एम्बेड पेज की ओर इशारा करने वाले एक iframe से बदल देता है। iframe खुद अपना माप लेता है और postMessage के ज़रिए अपनी ऊँचाई बताता है; embed.js ऐसा संदेश सिर्फ़ हमारी origin से और सिर्फ़ उस iframe के लिए स्वीकार करता है जिसे उसने खुद रखा था। कार्ड के लिंक Debaty को एक नए टैब में खोलते हैं।

थीम और भाषा

डिफ़ॉल्ट रूप से कार्ड विज़िटर की कलर स्कीम (लाइट/डार्क) के साथ चलता है। इसे blockquote पर data-debaty-theme="light" या "dark" से पिन कर दो; कार्ड-लेबल की भाषा data-debaty-lang="nl" या "en" से चुनो।

oEmbed

जो CMS और एडिटर oEmbed समझते हैं (WordPress, Mastodon जैसे, नोट ऐप), उनके लिए oembed.com के अनुरूप एक एंडपॉइंट है: type rich, स्निपेट html में। height null है — ऊँचाई तभी पता चलती है जब कंटेंट रेंडर होता है; embed.js इसे लाइव मापता है। maxwidth का पालन होता है, हमारी अधिकतम सीमा 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
}

हर सार्वजनिक पोस्ट पेज में डिस्कवरी लिंक होता है (<link rel="alternate" type="application/json+oembed">), इसलिए किसी oEmbed कंज्यूमर को बस सामान्य परमालिंक ही चाहिए।

ये दो अलग-अलग प्रोडक्ट हैं। पोस्ट एम्बेड (यह पेज) एक मौजूदा Debaty पोस्ट दिखाता है, कहीं भी लगाओ, बिना रजिस्ट्रेशन के। पब्लिशर विजेट तुम्हारे अपने लेखों के नीचे एक कमेंट पैनल है: तुम्हारे पाठकों के कमेंट, एक मॉडरेशन कतार और एक डोमेन allowlist के साथ, तुम्हारे पब्लिशर अकाउंट से मैनेज होता है।