منشور 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-liveblog مع معرّف المدونة المباشرة بدلاً من data-debaty-post. تعرض البطاقة العنوان والشخص الذي يديرها وأحدث ثلاثة تحديثات ورابطًا إلى التقرير الكامل، وتحدّث نفسها كل ثلاثين ثانية ما دامت المدونة المباشرة مفتوحة — دون كوكيز ودون إرسال طلبات إلى أي طرف ثالث. وبمجرد إغلاق المدونة المباشرة يتوقف التحديث وتعرض البطاقة الملخص الختامي.
<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، بلا أي اعتماديات) عن عناصر blockquote التي تحمل data-debaty-post ويستبدلها بـ iframe يشير إلى صفحة تضمين ذلك المنشور. يقيس الـ iframe نفسه ويُبلغ عن ارتفاعه عبر postMessage؛ ولا يقبل embed.js مثل هذه الرسالة إلا من الـ origin الخاص بنا وفقط لـ iframe وضعه هو بنفسه. روابط البطاقة تفتح Debaty في تبويب جديد.
بلا كوكيز، بلا تتبّع
لا يضع مستند التضمين أي كوكي، ولا يقرأ أي جلسة، ولا يُجري أي طلب لطرف ثالث على الإطلاق — خطوط النظام، وCSS خاص به، والصور من الـ origin الخاص بنا فقط. فلا شيء تُطلب الموافقة عليه: يمكنك وضع التضمين دون التزامات شريط الكوكيز، ويظل يعمل في المتصفحات التي تحجب كوكيز الطرف الثالث حجبًا كاملًا (مثل Safari).
تبني الـ iframe بنفسك بدل استخدام embed.js؟ إذًا أضِف إليه سمة sandbox هذه — لا تحتاج البطاقة إلى أكثر من ذلك:
<iframe src="https://debaty.com/embed/post/<post-id>"
sandbox="allow-scripts allow-same-origin allow-popups"></iframe>السمة واللغة
افتراضيًا تتبع البطاقة نظام ألوان الزائر (فاتح/داكن). ثبّته بـ data-debaty-theme="light" أو "dark" على الـ blockquote؛ وتختار لغة عناوين البطاقة بـ data-debaty-lang="nl" أو "en".
oEmbed
لأنظمة إدارة المحتوى والمحرّرات التي تتكلم oEmbed (WordPress، وما يشبه Mastodon، وتطبيقات الملاحظات) توجد نقطة نهاية مطابقة لـ oembed.com: النوع 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 واحدًا موجودًا، يمكن وضعه في أي مكان، دون تسجيل. أداة الناشر هي لوحة تعليقات أسفل مقالاتك الخاصة: تعليقات قرّائك، مع طابور إشراف وقائمة نطاقات مسموح بها، تُدار عبر حساب الناشر الخاص بك.
إلى أداة الناشر →