تضمين تعليقات Discourse على موقع آخر عبر Javascript

<div data-theme-toc="true"> </div>

يمتلك Discourse القدرة على تضمين التعليقات من موضوع في موقع خارجي باستخدام واجهة برمجة تطبيقات Javascript تنشئ إطار iframe. للحصول على مثال على ذلك عمليًا، تحقق من [مدونة Coding Horror](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments). يتم تشغيل المدونة عبر [Ghost](https://ghost.org/) ولكن التعليقات مضمّنة من [منتدى Discourse الخاص به](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550).

أحد الأمور الهامة التي يجب ملاحظتها في هذا الإعداد هو أنه **يجب على المستخدمين الانتقال إلى منتدىك لنشر الردود**. هذا مقصود، لأننا نعتقد أن واجهة النشر في منتدى Discourse أغنى حاليًا مما يمكننا تضمينه عبر Javascript.

سيوضح هذا الدليل كيفية إعداد تضمين التعليقات على مدونتك أو موقعك الإلكتروني.

### كيف يعمل

في Discourse، يتكون الموضوع من العديد من المشاركات. عندما تقوم *بتضمين* Discourse على موقع آخر، فإنك تربط مستندًا (مقالة مدونة، صفحة HTML، إلخ) بـ *موضوع* واحد. عندما ينشر الأشخاص في ذلك الموضوع، ستظهر تعليقاتهم تلقائيًا على الصفحة التي قمت بتضمينها فيها.

لديك الخيار لتمكين Discourse من إنشاء المواضيع تلقائيًا عند العثور على تضمين جديد، أو يمكنك إنشاء المواضيع بنفسك مسبقًا.

### تكوين Discourse للتضمين (إعداد بسيط)

سيقوم الإعداد التالي بتضمين موجز تعليقات في صفحة على رابط مدونة وهمي هو `http://example.com/blog/entry-123.html`، من منتدى Discourse يعمل على `=DISCOURSE=`.

[wrap=placeholder key=DISCOURSE default=discourse.example.com]النطاق لـ &nbsp;[/wrap]
[wrap=placeholder key=BLOG default=example.com]النطاق لـ &nbsp;[/wrap]

1. قم بزيارة **Admin > Customize > Embedding** (المسؤول > تخصيص > تضمين) في تثبيت Discourse الخاص بك. https://=DISCOURSE=/admin/customize/embedding

2. قم بإنشاء **مضيف قابل للتضمين (Embeddable Host)** واحد على الأقل. يجب أن يكون هذا اسم المضيف (النطاق) حيث تريد تضمين تعليقاتك. في هذه الحالة، المضيف هو `=BLOG=` - لاحظ عدم وجود `http://` والمسار.

    - **السماح بالمسار (Path Allowlist)** يسمح لك بتحديد المسارات على المضيف البعيد التي ستقبل التضمين الخاص بك.

   - **النشر في الفئة (Post to Category)** - إذا قمت بتوفير فئة جنبًا إلى جنب مع المضيف الذي تدخله، فستنتهي المنشورات المستوردة من ذلك المضيف تلقائيًا في تلك الفئة. يمكن للمضيفين المختلفين النشر في فئات مختلفة.

   - **العلامات (Tags)** - يمكنك تعيين علامات ليتم تطبيقها تلقائيًا على المواضيع التي تم إنشاؤها من مضيف معين.

   - **مؤلف المنشور (Post Author)** - يمكنك اختياريًا تجاوز مستخدم إنشاء الموضوع على أساس كل مضيف. إذا لم يتم تعيينه، يتم استخدام الإعداد الافتراضي من علامة التبويب **Posts and Topics** (المنشورات والمواضيع).

3. انتقل إلى علامة التبويب **Posts and Topics** (المنشورات والمواضيع) واملأ حقل **Username for topic creation** (اسم المستخدم لإنشاء الموضوع). هذا هو المستخدم الذي سينشئ المواضيع عند العثور على تضمينات جديدة. لنفترض أن منتدى Discourse الخاص بنا يحتوي على مستخدم يسمى eviltrout، لذا فإن القيمة هي `eviltrout`.

4. أدرج HTML التالي في صفحة الويب على `http://=BLOG=/blog/entry-123.html`

```html
<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://discourse.example.com/',
    discourseEmbedUrl: 'http://example.com/blog/entry-123.html',
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

الأجزاء القابلة للتهيئة في المقتطف هي في الكائن DiscourseEmbed. discourseUrl هو المسار الكامل إلى قاعدة Discourse الخاص بك، بما في ذلك الشرطة المائلة اللاحقة. discourseEmbedUrl هو المستند الذي يقوم حاليًا بتضمين موجز التعليقات.

إذا قمت بإعداد هذا بشكل صحيح، في المرة الأولى التي تزور فيها http://=BLOG=/blog/entry-123.html، سيحاول تحميل التعليقات الخاصة بمنشور المدونة. نظرًا لعدم وجود أي منها، سيطلب من منتدى Discourse إنشاء موضوع جديد في الخلفية. سيتم إنشاء موضوع جديد بواسطة eviltrout وسيتم الزحف إلى محتويات المنشور الأول من مدونتك وسيتم استخراج النص تلقائيًا.

بمجرد إنشاء الموضوع الجديد، يمكن للمستخدمين النشر فيه، وستظهر تعليقاتهم تلقائيًا في المرة التالية التي تتم فيها زيارة http://=BLOG=/blog/entry-123.html.

className اختياري وسيضيف فئة من اختيارك إلى التضمين حتى تتمكن من تخصيصه باستخدام CSS.

:bulb: نصيحة: إذا كانت مدونتك تحتوي على مؤلفين متعددين، يمكنك إضافة علامة <meta name="discourse-username" content="author_username"> إلى كل صفحة. عندما يزحف Discourse إلى الصفحة لإنشاء الموضوع، فسيستخدم علامة التعريف هذه لتحديد مؤلف المنشور، متجاوزًا اسم المستخدم الافتراضي المحدد في إعدادات المسؤول.

التضمين في أكثر من صفحة واحدة

في المثال أعلاه، قمنا بتشفير عنوان URL الثابت http://=BLOG=/blog/entry-123.html عند تضمين مقتطف Javascript. هذا عادةً لا يكون كافيًا لأن العديد من المواقع تحتوي على العديد من الصفحات التي يتم إنشاؤها تلقائيًا. على سبيل المثال، في المدونة، يحصل كل إدخال عادةً على صفحته الخاصة. لدعم ذلك، ضع نفس المقتطف على كل صفحة تريد عرض التعليقات فيها، ولكن استبدل القيمة المارة إلى discourseEmbedUrl بعنوان URL للصفحة الحالية. في مدونتي، أستخدم القيمة التالية لـ discourseEmbedUrl: 'http://eviltrout.com<%= current_page.url %>' - مع إنشاء صفحات مدونة جديدة، سيتم إنشاء مواضيع جديدة لها تلقائيًا على Discourse.

تنسيق المحتوى المضمن الخاص بك

لديك القدرة على إضافة ورقة أنماط (stylesheet) لتعليقاتك المضمنة. استخدم قسم Embedded CSS (CSS المضمن) في محرر المظهر في Admin > Customize > Themes > [your theme] > Edit CSS/HTML (المسؤول > تخصيص > السمات > [السمة الخاصة بك] > تعديل CSS/HTML) ويمكنك إضافة ورقة أنماط مخصصة سيتم تقديمها مع تعليقاتك المضمنة. افتراضيًا، نعتقد أن التخطيط يبدو لطيفًا على خلفية بيضاء، ولكن إذا كان موقعك يحتوي على تخطيط فريد، فستحتاج إلى تنسيقه بنفسك.

(اختياري) إضافة موجز للاستقصاء

كما ذكرنا أعلاه، سيقوم Discourse بالزحف تلقائيًا إلى أي موقع يتم تضمينه فيه. ومع ذلك، قد يكون تحليل HTML صعبًا في بعض الأحيان وقد لا يستخرج محتويات منشوراتك بشكل صحيح. تدعم العديد من المدونات ومواقع الويب خلاصات RSS/Atom للنشر، ويمكن لـ Discourse استخدام هذا لاستخراج محتويات منشورات مدونتك بدقة أكبر.

يأتي Discourse مزودًا بـ إضافة استقصاء RSS (مضمنة افتراضيًا). إذا كان لديك خلاص RSS أو Atom مُعدًا على الموقع الذي تقوم بتضمين Discourse فيه، يمكنك تمكين إعداد الموقع rss_polling_enabled وإضافة عنوان URL للخلاصة عبر Admin > Plugins > RSS Polling (المسؤول > الإضافات > استقصاء RSS). بمجرد إضافة عنوان URL للخلاصة، سيقوم Discourse بتحليل الخلاصة ونشر منشوراته في الفئة المناسبة بناءً على المضيفين المسموح بهم الذين تضيفهم إلى إعدادات التضمين الخاصة بك.

(إعداد بديل) الربط بالمواضيع الموجودة

يفضل البعض عدم جعل Discourse ينشئ مواضيع لهم تلقائيًا في منتدياتهم. إنهم يريدون إنشاء المواضيع بأنفسهم، ثم إخبار كود التضمين الخاص بهم ببساطة بالموضوع الذي يريدون ربطه به. يمكنك القيام بذلك عن طريق تغيير كود التضمين الخاص بك قليلاً:

<div id='discourse-comments'></div>

<script type="text/javascript">
  window.DiscourseEmbed = {
    discourseUrl: 'https://=DISCOURSE=/',
    topicId: 12345
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = window.DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

الفرق الوحيد هنا هو أننا استبدلنا discourseEmbedUrl بمعرف موضوع من Discourse. إذا قمت بذلك، فلن يتم إنشاء أي موضوع وسيتم عرض التعليقات من هذا الموضوع تلقائيًا.

تحديد سياسة المُحيل (referrer policy)

بسبب التغييرات الأخيرة (سبتمبر 2020) التغييرات على سياسة المُحيل الافتراضية التي يتم تعيينها بواسطة العديد من المتصفحات، يقوم Discourse الآن صراحةً بتعيين سياسة المُحيل لإطار iframe بشكل افتراضي على "no-referrer-when-downgrade". إذا كان موقعك يتطلب سياسة مُحيل أكثر صرامة لأسباب أمنية، فيمكن تعيينها عن طريق إضافة قيمة discourseReferrerPolicy إلى كائن DiscourseEmbed الخاص بسكريبت التضمين. على سبيل المثال:

DiscourseEmbed = { discourseUrl: 'https://forum.example.com/',
                                  discourseEmbedUrl: '<your_posts_canonical_URL>',
                                  discourseReferrerPolicy: 'strict-origin-when-cross-origin'};

الاستعلام البرمجي لتفاصيل التضمين

لدينا نقطة نهاية واجهة برمجة تطبيقات للاستعلام عن تفاصيل التضمين باستخدام embed_url كمعلمة:

curl 'https://meta.discourse.org/embed/info?embed_url=https://blog.discourse.org/2021/04/discourse-team-grows-to-50' -H 'API-KEY: logapikeygoeshere' -H 'API-USERNAME: apiusernamehere' 

والاستجابة هي:

{
  "topic_id": 187794,
  "post_id": 925017,
  "topic_slug": "discourse-team-grows-to-50-blog",
  "comment_count": 2
}

تضمين التعليقات من موقع خاص

بالنسبة لتثبيتات Discourse الخاصة، إذا كان Discourse على نطاق فرعي من نطاق المدونة، فسيتم عرض التعليقات للمستخدمين الذين قاموا بتسجيل الدخول إلى Discourse. سيرى المستخدمون الذين لم يسجلوا الدخول إلى Discourse رسالة “رفض الاتصال”. إذا كان Discourse والمدونة على نطاقات منفصلة تمامًا، فلن يتم عرض أي تعليقات للمنتديات الخاصة.

استكشاف الأخطاء وإصلاحها

القضية الأكثر شيوعًا التي يواجهها المستخدمون عند تضمين Discourse هي تعيين القيمة الصحيحة للمضيفين القابلين للتضمين الذين أضفتهم. تأكد من التحقق مرتين من أنه نطاق موقعك فقط، ولا يحتوي على شرائط مائلة إضافية أو أحرف غير صالحة.

116 إعجابًا
Deeply integrating Discourse into website
Is it possible to test Discourse Embed comment on localhost?
Discourse 1.4 Released!
Is it possible to use Discourse as a "commenting system"?
Trouble connecting drupal and discourse
Create topic when a link is clicked
Learning Management Systems
Using Discourse in a web app
Using Discourse as a comment system
Comment Reply Threading / Linking on the WordPress Side
Discourse blog comments like your blog comments
Can be integrated with liquid templates?
Embedded Comments iframe Height
Use Discourse as the comments section of a Jekyll site?
Using Discourse to power comments in an event system or blog?
Using Discourse as commenting system via JavaScript: Delay load or load on scroll
Cannot get embedding to work
News Plugin :newspaper:
Embedded topic comments are missing if containing page's URL includes a fragment identifier
Imported topic via embedding will not render normally
Integrating Discourse with a larger social network app?
What is Discourse Blog built with?
Anybody using Discourse for Blog Comments on a Gatsby site?
What software you use for blog.discourse.org?
"Error Embedding" comments
Shared Discourse/Static Site Login
Discourse + Ghost Blog Integration. Is my Understanding Wrong?
Trying to do embedding. Hit with “The referer did not match any of the following hosts:” issue
Looking for Ruby-based CMS recommendations as a compliment to Discourse
[Paid] Embedding: Allowing one RSS feed and one username per host
Discourse comment-like discussion
Discourse embedding error: Failed to execute postMessage on DOMWindow
Discourse + Ghost integration and SEO
Error Embedding
Hide or remove "Listed/Unlisted" comments when embedded
Display all posts in embedding topics with +100 comments
Embedding Topic topic-map or Topic Summary on Other Site
Wordpress integration by iFrame instead of sync
Not generate topic automatically for all blog posts
Link to Discourse topic without displaying Comments (in Drupal)
Which CMS for Discourse
Understanding how embedding works on remote site
Arguments against integrated intranet solutions?
Embed single discourse Topics to articles on news website
Displaying comments embed as a link without using the WP plugin
Get right title embedding comments
Disqus-like commenting on Wordpress
Embedding Discourse Comments *without* Javascript
How to integrate in discourse in zenodo
Co-author topics
How might we better structure #howto?
Issue with image uploads on embedded topics
Getting Discourse URL on embedded comments
Integrating registered users notifications+avatar into static website
Pandoc integration
Can I use Discourse to add Commenting to my Blogs?
How can I get the list of Discourse Topic IDs dynamically
[Question/Request] Featured image url for post
JS embed fails with "Job exception: invalid stored block lengths (Zlib::DataError)"
No `Referer:`, no embedding
Commenting system: integrate Discourse and Webflow
WP Discourse Embed Plugin
Embedding error
Best option to have category "hidden" on Discourse, but otherwise accessible if you have the link?
Topic list on the right side
Create an empty topic via API
Using Discourse for Comments?
Add button with link post forum
Add button with link post forum
Discourse embed crawls cookie warning text
The Gamification of Discourse
Embedding Discourse comment box to blog page
Pinned topic summary is using first-line link text instead of body text
Nextcloud support
Discourse comment button on blog?
Is there a Disqus like comment implementation?
One Discourse instance, Two Blogs?
Embeddable Discourse activity widget
Blog Post Styling
Integration: Discourse comments in Gitbook
Is it possible to autologin discourse via iframe?
Widget to embed in 3rd party websites
How to customize the text in an embedded post?
Benefits to using WP comments over JS embed?
Benefits to using WP comments over JS embed?
What CSS was used for Comments here?
Setting canonical URL when posting/cross-posting
Threaded comments when using Discourse for website comments?
Embedded site stuck at "Loading Discussions"
Embedding Categories in Existing SPA
[Update] Simplify embed feature
Does setting the discourseUrl prevent other clients from creating embedded posts for moved pages?
To use Discourse completely on shopify
I'm unsure of how oneboxing is setup for blog posts to Discourse
I'm unsure of how oneboxing is setup for blog posts to Discourse
Embed my Discourse Forum as IFrame
Discourse blog (article and comments)
Most efficient way to use Discourse for comments on Shopify blog posts?
Is the Discourse content markdown toolbar available as a standalone?
Is there a blog plugin for Discourse's meta blog implementations?
Discourse Comments stuck on "Loading..."
Topic Ratings Plugin
Discourse implementation in create react app
Embed forum
BricksForge and Bricks API Query Builder with Discourse
Wordpress posts are now unlisted from latest update of forum and plugin
Most efficient way to use Discourse for comments on Shopify blog posts?
AI sockpuppet accounts to jumpstart my community?
Should Discourse make an effort to become a viable comment platform?
Problem embeding a topic in a page on another domain
Want to set internal forum on our reactjs member's platform
Embed Discourse using external_id
Expose external_id in embed.js
Grow my community
Forbidden error on embed widget
Strapi discourse integration
Migrating embedded topics from topicId to automatic topic creation
Migrating embedded topics from topicId to automatic topic creation
Problem with "Publish as Unlisted Topics"
RSS Polling
Failed to execute 'postMessage' on 'DOMWindow'
Failed to execute 'postMessage' on 'DOMWindow'
RSS plugin default show full post
Is there a Disqus like comment implementation?
Embending topic in 'another' website. And change redirect page after login
Embedding full threads - possible?
How to customize the text in an embedded post?
How to show the latest discussion on the front page of our main website
Embed Most Recent Replies To Post in Specific Category
Is anyone using Discourse in higher ed for courses?
Embed a list of Discourse topics onto an external site
Is Discourse a full website or just a forum add-in?
Is Discourse a full website or just a forum add-in?
Can I send an external URL to the Discourse API for it to return topics linking to that URL?
How to use Discourse API for article forums and independent community spaces
How to Enable Terms of Service and Privacy Policy Pages in Discourse?
Bug with URLs in Embedded Comments
Blog posts would be nicer if authored by an identifiable person
Structuring an active support community migrating from Facebook
Where in Discourse can users publicly share PII?
"Show Full Post" button doesn't work in subfolder installations
"Show Full Post" button doesn't work in subfolder installations
Embed comments from Discourse in your single page app
JavaScript embed won’t display embed, console log shows: Failed to execute postMessage on DOMWindow…
Can i use / embed discourse to make comments on pages hosted for example on Aquia
Emoji are huge when embedding
Set topic title with Discourse Embed
Embedding Discourse Profile via Javascript
WP-discourse: comments are not pulled over
discourseEmbed, does not match recipient window origin
Statamic integration
How to embed whole forum in another site
Possible to add comment count (to a Ghost blog)?
How can I delete or undelete topics?
Link existing forum topic to new WordPress post
How to enable Discourse comments via JavaScript in Wordpress?
How to link the existing discourse comments to wordpress posts?
Embed whole forum
WP Discourse Embed Plugin
WP Discourse Embed Plugin
Synchronising log out of discourse when logging out of WordPress
Topic as widget
Discourse a a comment system with React Native and Meteor
A post's TopicEmbed isn't destroyed when the post is deleted
Pages from Google search are not rendering
Controlling amount of embedded text
Zendesk Article Comment in Discourse Integration
Flood of new topics from Embedded Discourse
Discourse topics as Dokuwiki talk pages
Multiple cors origins on hosted discourse?
WordPress / Discourse API Strategy: Get Reply Count via API Efficiently
Error Embedding for existing posts
Making embedded JavaScript based discourse commenting responsive
[paid] Preference to create & embed a topic via JavaScript only when a user clicks the "Start Discussion" link
Embedding: Discussion not showing up for new posts
Allowing WP comments while showing Discourse comments too
Handling large pictures of embedded comments inside jquery window
"Error Embedding" comments
Embedded comments not displayed due to X-Frame-Options DENY
Failed to execute postMessage on DOMWindow: The target origin provided does not match
Embedding Discourse сomments with GitBook