<div data-theme-toc="true"> </div>
Discourse verfügt über die Möglichkeit, die Kommentare aus einem Thema in einer externen Website mithilfe einer Javascript-API einzubetten, die einen IFRAME erstellt. Ein Beispiel hierfür finden Sie im [Coding Horror Blog](http://blog.codinghorror.com/welcome-to-the-internet-of-compromised-things/#discourse-comments). Der Blog wird über [Ghost](https://ghost.org/) betrieben, aber die Kommentare werden aus seinem [Discourse Forum](http://discourse.codinghorror.com/t/welcome-to-the-internet-of-compromised-things/3550) eingebettet.
Bei dieser Einrichtung ist ein wichtiger Punkt zu beachten: **Benutzer müssen Ihre Website besuchen, um Antworten zu posten**. Dies ist beabsichtigt, da wir der Meinung sind, dass die Posting-Oberfläche in einem Discourse-Forum derzeit wesentlich umfangreicher ist als das, was wir über Javascript einbetten könnten.
Diese Anleitung zeigt Ihnen, wie Sie das Einbetten von Kommentaren auf Ihrem eigenen Blog oder Ihrer Website einrichten.
### Funktionsweise
In Discourse besteht ein Thema aus vielen Beiträgen. Wenn Sie Discourse auf einer anderen Seite *einbetten*, verknüpfen Sie ein Dokument (Blogeintrag, HTML-Seite usw.) mit einem einzelnen *Thema*. Wenn Leute in diesem Thema posten, werden ihre Kommentare automatisch auf der Seite angezeigt, auf der Sie es eingebettet haben.
Sie haben die Wahl, ob Discourse die Themen automatisch erstellen soll, wenn eine neue Einbettung gefunden wird, oder ob Sie die Themen im Voraus selbst erstellen möchten.
### Konfigurieren von Discourse für das Einbetten (einfache Einrichtung)
Die folgende Einrichtung bettet einen Kommentar-Feed auf einer Seite mit der fiktiven Blog-URL `http://example.com/blog/entry-123.html` von einem Discourse-Forum ein, das unter `=DISCOURSE=` läuft.
[wrap=placeholder key=DISCOURSE default=discourse.example.com]Domain für [/wrap]
[wrap=placeholder key=BLOG default=example.com]Domain für [/wrap]
1. Besuchen Sie **Admin > Anpassen > Einbetten** in Ihrer Discourse-Installation. https://=DISCOURSE=/admin/customize/embedding
2. Erstellen Sie mindestens einen **Einbettbaren Host**. Dies sollte der Hostname (Domain) sein, auf dem Sie Ihre Kommentare einbetten möchten. In diesem Fall ist der Host `=BLOG=` – beachten Sie das Fehlen von `http://` und Pfaden.
- **Pfad-Allowlist** ermöglicht es Ihnen, die Pfade auf dem externen Host anzugeben, die Ihre Einbettung akzeptieren.
- **In Kategorie posten** - Wenn Sie zusammen mit dem eingegebenen Host eine Kategorie angeben, werden Beiträge, die von diesem Host importiert werden, automatisch in dieser Kategorie abgelegt. Verschiedene Hosts können in verschiedene Kategorien posten.
- **Tags** - Sie können Tags zuweisen, die automatisch auf Themen angewendet werden, die von einem bestimmten Host erstellt wurden.
- **Beitragsautor** - Sie können den Benutzer für die Themen-Erstellung optional pro Host überschreiben. Wenn dies nicht festgelegt ist, wird die Standardeinstellung aus der Registerkarte **Beiträge und Themen** verwendet.
3. Navigieren Sie zur Registerkarte **Beiträge und Themen** und füllen Sie das Feld **Benutzername für Themen-Erstellung** aus. Dies ist der Benutzer, der Themen erstellt, wenn neue Einbettungen gefunden werden. Nehmen wir an, unser Discourse hat einen Benutzer namens eviltrout, also lautet der Wert `eviltrout`.
4. Fügen Sie den folgenden HTML-Code auf der Webseite unter `http://=BLOG=/blog/entry-123.html` ein.
```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>
Die konfigurierbaren Teile des Snippets befinden sich im DiscourseEmbed-Objekt. discourseUrl ist der vollständige Pfad zur Basis Ihres Discourse, einschließlich des abschließenden Schrägstrichs. Die discourseEmbedUrl ist das Dokument, das gerade einen Kommentar-Feed einbettet.
Wenn Sie dies korrekt einrichten, versucht die Seite beim ersten Besuch von http://=BLOG=/blog/entry-123.html, Kommentare für den Blogbeitrag zu laden. Da keine vorhanden sind, wird das Discourse-Forum angewiesen, im Hintergrund ein neues Thema zu erstellen. Ein neues Thema wird von eviltrout erstellt, und der Inhalt des ersten Beitrags wird von Ihrem Blog gecrawlt und der Text automatisch extrahiert.
Sobald das neue Thema erstellt wurde, können Benutzer darin posten, und ihre Kommentare werden automatisch angezeigt, wenn http://=BLOG=/blog/entry-123.html das nächste Mal besucht wird.
className ist optional und fügt dem Embed eine Klasse Ihrer Wahl hinzu, damit Sie es mit CSS anpassen können.
Tipp: Wenn Ihr Blog mehrere Autoren hat, können Sie jeder Seite ein
<meta name=\"discourse-username\" content=\"author_username\">-Tag hinzufügen. Wenn Discourse die Seite crawlt, um das Thema zu erstellen, verwendet es dieses Meta-Tag, um den Beitragsautor zu bestimmen, wodurch der in den Admin-Einstellungen festgelegte Standard-Benutzername überschrieben wird.
Einbetten auf mehr als einer Seite
Im obigen Beispiel haben wir unsere URL http://=BLOG=/blog/entry-123.html beim Einbetten des Javascript-Snippets fest codiert. Dies wird normalerweise nicht ausreichen, da viele Websites viele automatisch generierte Seiten haben. Zum Beispiel erhält jeder Eintrag in einem Blog normalerweise eine eigene Seite. Um dies zu unterstützen, fügen Sie dasselbe Snippet auf jeder Seite ein, auf der Sie Kommentare anzeigen möchten, ersetzen Sie jedoch den Wert für discourseEmbedUrl durch die URL der aktuellen Seite. Auf meinem Blog verwende ich den folgenden Wert für discourseEmbedUrl: 'http://eviltrout.com<%= current_page.url %>' – wenn neue Blogseiten erstellt werden, werden automatisch neue Themen dafür in Discourse erstellt.
Stylen Ihrer eingebetteten Inhalte
Sie haben die Möglichkeit, ein Stylesheet für Ihre eingebetteten Kommentare hinzuzufügen. Verwenden Sie den Abschnitt Eingebettetes CSS des Theme-Editors unter Admin > Anpassen > Themes > [Ihr Theme] > CSS/HTML bearbeiten, und Sie können ein benutzerdefiniertes Stylesheet hinzufügen, das mit Ihren eingebetteten Kommentaren ausgeliefert wird. Standardmäßig finden wir, dass das Layout auf weißem Hintergrund gut aussieht, aber wenn Ihre Website ein einzigartiges Layout hat, möchten Sie es wahrscheinlich selbst gestalten.
(Optional) Hinzufügen eines Feeds zum Polling
Wie oben erwähnt, crawlt Discourse automatisch jede Seite, auf der es eingebettet ist. Manchmal ist HTML jedoch schwer zu parsen, und es extrahiert die Inhalte Ihrer Beiträge möglicherweise nicht korrekt. Viele Blogs und Websites unterstützen RSS/Atom-Feeds für die Syndizierung, und Discourse kann dies nutzen, um den Inhalt Ihrer Blogbeiträge genauer zu extrahieren.
Discourse wird mit dem RSS Polling Plugin (standardmäßig enthalten) ausgeliefert. Wenn Sie einen RSS- oder Atom-Feed auf der Seite eingerichtet haben, in die Sie Discourse einbetten, können Sie die Site-Einstellung rss_polling_enabled aktivieren und die URL Ihres Feeds über Admin > Plugins > RSS Polling hinzufügen. Sobald die Feed-URL hinzugefügt wurde, parst Discourse den Feed und veröffentlicht seine Beiträge in der entsprechenden Kategorie basierend auf den erlaubten Hosts, die Sie Ihren Einbettungseinstellungen hinzufügen.
(Alternative Konfiguration) Verknüpfen mit vorhandenen Themen
Manche Leute ziehen es vor, nicht zu haben, dass Discourse automatisch Themen in ihren Foren erstellt. Sie möchten die Themen selbst erstellen und dann ihrem Einbettungscode einfach mitteilen, mit welchem Thema sie verknüpft werden sollen. Sie können dies tun, indem Sie Ihren Einbettungscode leicht ändern:
<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>
Der einzige Unterschied besteht darin, dass wir discourseEmbedUrl durch die ID eines Themas aus Discourse ersetzt haben. Wenn Sie dies tun, wird kein Thema erstellt und die Kommentare dieses Themas werden automatisch angezeigt.
Festlegen der Referrer-Richtlinie
Aufgrund jüngster (September 2020) Änderungen an der Standard-Referrer-Richtlinie, die von vielen Browsern festgelegt wird, legt Discourse nun explizit standardmäßig die Referrer-Richtlinie des Iframes auf \"no-referrer-when-downgrade\" fest. Wenn Ihre Website aus Sicherheitsgründen eine strengere Referrer-Richtlinie erfordert, kann diese festgelegt werden, indem ein discourseReferrerPolicy-Wert zum DiscourseEmbed-Objekt des Einbettungsskripts hinzugefügt wird. Zum Beispiel:
DiscourseEmbed = { discourseUrl: 'https://forum.example.com/',
discourseEmbedUrl: '<your_posts_canonical_URL>',
discourseReferrerPolicy: 'strict-origin-when-cross-origin'};
Programmatisches Abfragen der Embed-Details
Wir haben einen API-Endpunkt, um die Embed-Details mithilfe der embed_url als Parameter abzufragen:
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'
Und die Antwort lautet:
{
"topic_id": 187794,
"post_id": 925017,
"topic_slug": "discourse-team-grows-to-50-blog",
"comment_count": 2
}
Einbetten von Kommentaren von einer privaten Website
Für private Discourse-Instanzen werden Kommentare für Benutzer angezeigt, die bei Discourse angemeldet sind, wenn Discourse auf einer Subdomain der Domain des Blogs gehostet wird. Benutzer, die bei Discourse nicht angemeldet sind, sehen eine Meldung „Verbindung verweigert“. Wenn Discourse und das Blog auf völlig getrennten Domains gehostet werden, werden für private Foren keine Kommentare angezeigt.
Fehlerbehebung
Das häufigste Problem, das Benutzer beim Einbetten von Discourse haben, ist die korrekte Einstellung des Wertes für die hinzugefügten einbettbaren Hosts. Stellen Sie sicher, dass es sich nur um die Domain Ihrer Website handelt und keine zusätzlichen Schrägstriche oder ungültigen Zeichen enthält.