Intégrer une liste de sujets Discourse sur un site externe

:bookmark: Ce guide explique comment intégrer et afficher une liste de sujets Discourse sur des sites externes en utilisant JavaScript, vous permettant de mettre en valeur le contenu du forum, tel que des discussions ou des annonces, sur des blogs, des sites web ou d’autres plateformes de contenu externes.

:person_raising_hand: Niveau utilisateur requis : Administrateur

Résumé

L’intégration de sujets Discourse sur des sites externes vous permet d’afficher des listes de sujets de votre forum Discourse directement sur d’autres sites. Cette intégration aide à générer du trafic vers votre forum et à maintenir l’engagement de votre audience avec le contenu de votre communauté. Les sujets intégrés apparaissent sous forme de widget JavaScript qui s’intègre à la structure DOM de votre site, facilitant ainsi la personnalisation via CSS.

Activer l’intégration des sujets

Pour configurer l’intégration des sujets sur votre site externe :

  1. Accédez à Admin > Avancé > Intégration et basculez vers l’onglet Paramètres. Activez le paramètre du site embed_topics_list.

  1. Ajoutez le script d’intégration dans la section <head> HTML de votre site externe :
<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>

Remplacez discourse.example.com par l’URL réelle de votre forum Discourse.

  1. Placez l’élément de liste des sujets à l’endroit où vous souhaitez afficher les sujets (par exemple, dans un article de blog ou sur une page individuelle du site) :
<d-topics-list discourse-url="https://discourse.example.com" category="1234" per-page="5"></d-topics-list>
  1. Si vous intégrez des sujets sur un domaine différent de celui de votre site Discourse, ajoutez le domaine de votre site externe dans Admin > Avancé > Intégration > Hôtes.

Par exemple, si votre site Discourse est situé à yourdiscourseforum.com et que vous souhaitez intégrer des sujets sur yourexternalsite.com, vous devez ajouter yourexternalsite.com à votre liste d’hôtes autorisés.

:warning: Vous ne pouvez pas intégrer de sujets provenant d’un site Discourse privé nécessitant une connexion.

Paramètres de configuration

L’élément d-topics-list prend en charge les attributs suivants pour personnaliser l’affichage de vos sujets :

  • discourse-url - L’URL de votre site Discourse (obligatoire)
  • template - Options de style d’affichage :
    • basic (par défaut) - Affiche les titres des sujets sous forme de liens
    • complete - Affiche le titre, le nom d’utilisateur, l’avatar, la date de création, l’heure de la dernière réponse, le nombre de likes, le nombre de réponses et l’image mise en avant/miniature
  • per-page - Nombre de sujets à afficher (limité par le paramètre du site caché embed_topic_limit_per_page, par défaut 200)
  • category - ID de catégorie pour filtrer les sujets d’une catégorie spécifique
  • tags - Filtrer les sujets par des balises spécifiques
  • allow-create - Lorsqu’il est défini sur true, affiche un bouton « Nouveau sujet »
  • embed-class - Ajoute une classe CSS personnalisée au conteneur de la liste des sujets intégrés (lettres alphanumériques, tirets et underscores uniquement)
  • top-period - Afficher les meilleurs sujets d’une période spécifique :
    • all
    • yearly
    • quarterly
    • monthly
    • weekly
    • daily

Vous pouvez combiner plusieurs paramètres pour affiner l’affichage de votre liste de sujets. Par exemple :

<d-topics-list 
  discourse-url="https://discourse.example.com" 
  category="5" 
  tags="announcements" 
  per-page="10"
  template="complete">
</d-topics-list>

Personnalisation de l’apparence

Vous pouvez styliser les sujets intégrés en utilisant du SCSS personnalisé dans votre panneau Admin > Apparence > Thèmes et composants. Cliquez sur votre thème actuel ou par défaut, puis cliquez sur Modifier le code. Vous pouvez ensuite sélectionner Show_advanced et choisir CSS intégré pour ajouter votre code personnalisé :

Voici un exemple de SCSS pour créer une mise en page en grille :

.topics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
  .topic-list-item {
    .main-link {
      border: 1px dotted gray;
      padding: 0;
    }
    
    .topic-column-wrapper {
      flex-direction: column-reverse;
      
      .topic-column.details-column {
        width: 100%;
      }
      
      .topic-column.featured-image-column .topic-featured-image img {
        max-width: initial;
        max-height: initial;
        width: 100%;
      }
    }
  }
}

Bonnes pratiques

  • Utilisez des filtres de catégorie et de balise significatifs pour afficher du contenu pertinent pour votre audience.
  • Définissez une valeur per-page appropriée pour ne pas submerger les visiteurs.
  • Testez vos sujets intégrés sur différentes tailles d’écran pour garantir un design réactif.
  • Envisagez d’utiliser le modèle complete pour un meilleur attrait visuel lorsque l’espace le permet.
  • Examinez régulièrement votre liste d’hôtes autorisés pour vous assurer que seuls les domaines autorisés peuvent intégrer vos sujets.

Problèmes courants et solutions

Les sujets ne s’affichent pas sur un domaine externe

Problème : Les sujets intégrés apparaissent comme une boîte vide ou grise lorsqu’ils sont consultés sur un domaine externe.

Solution : Ajoutez le domaine externe aux hôtes de votre site Discourse dans Admin > Avancé > Intégration > Hôtes. Assurez-vous d’inclure le sous-domaine correct (par exemple, si votre site utilise www.example.com, ajoutez www.example.com plutôt que simplement example.com).

Erreurs de chargement du script

Problème : Le script d’intégration échoue à se charger ou renvoie des erreurs de connexion.

Solution :

  • Vérifiez que l’URL Discourse dans la source de votre script est correcte et accessible.
  • Assurez-vous que le paramètre du site embed_topics_list est activé.
  • Vérifiez que votre site Discourse ne nécessite pas de connexion pour les sujets publics.

Comportement du contexte SameSite

Dans les contextes SameSite où le site d’intégration et le forum partagent un domaine parent, Discourse respecte le statut de connexion et affiche les résultats en conséquence. Les utilisateurs connectés peuvent voir le contenu de catégories sécurisées auxquels les utilisateurs anonymes n’ont pas accès.

FAQ

Q : Puis-je intégrer des sujets provenant d’un site Discourse privé ?
R : Non, l’intégration de sujets ne fonctionne qu’avec des sites Discourse publics. Les sites privés nécessitant une connexion ne peuvent pas être intégrés.

Q : Puis-je intégrer plusieurs listes de sujets sur la même page ?
R : Oui, vous pouvez inclure plusieurs éléments <d-topics-list> sur la même page avec différents paramètres pour afficher diverses collections de sujets.

Q : Comment intégrer des sujets avec des images mises en avant ?
R : Utilisez le paramètre template="complete" dans votre élément <d-topics-list> pour afficher les sujets avec des miniatures et des images mises en avant.

Q : Puis-je modifier l’endroit où les liens de sujets s’ouvrent ?
R : Par défaut, les liens de sujets s’ouvrent dans la fenêtre parente. Vous pouvez modifier ce comportement via une personnalisation CSS ou JavaScript.

Ressources supplémentaires

9 « J'aime »

Est-ce que cela fonctionne avec les abonnements Discourse ? J’ai essayé de l’implémenter et il encadrait tout mon forum plutôt que les sujets ?

1 « J'aime »

Oui, cela devrait fonctionner sans problème avec le plugin Discourse Subscriptions .

L’intégration repose sur la configuration de paramètres spécifiques pour contrôler les sujets affichés, tels que category, tags ou per-page, via la balise d-topics-list dans le HTML de votre site Web. Si votre intégration a fini par encadrer l’intégralité de votre forum, vous voudrez peut-être vous assurer que l’URL de Discourse et tous les paramètres de la balise \u003cd-topics-list\u003e sont correctement définis pour refléter les sujets que vous avez l’intention d’afficher.

4 « J'aime »

Salut, c’est très bien ! Merci !

Je veux changer la valeur cible de l’élément a de la liste des sujets en “_blank” (la valeur par défaut est “_parent”, elle pose un problème inter-domaines et ce n’est pas ce que je veux), que dois-je faire ?

Bonjour, j’essaie d’afficher ceci sur 2 sites différents.

Mon URL Discourse est https://learn.getupearlier.com

J’ai ce script intégré ici et il fonctionne :

J’ai le même script intégré ici et il ne fonctionne pas :

Ceci est dans l’en-tête :

<script src="https://learn.getupearlier.com/javascripts/embed-topics.js"></script>

Ceci est dans la page :

<d-topics-list discourse-url="https://learn.getupearlier.com" category="5" per-page="10"></d-topics-list>

Toute aide est appréciée !

2 « J'aime »

Salut Michael,

Le problème que vous rencontrez ici est probablement lié à l’utilisation d’un domaine différent de votre domaine Discourse pour intégrer les sujets.

Votre script fonctionne sur getupearlier.com car il se trouve sur le même domaine que votre site Discourse learn.getupearlier.com, tandis que michaelbakerdigital.com est sur un domaine différent.

J’ai ajouté cette section au guide, qui explique comment résoudre cette situation.

Donc, dans votre situation, l’ajout de michaelbakerdigital.com à la section « Intégration » → « Hôtes autorisés » de votre site Discourse devrait vous permettre d’intégrer correctement les sujets sur ce domaine.

6 « J'aime »

Bonjour, j’ai autorisé cette URL comme vous pouvez le voir ci-dessous :

Voici l’URL de test :
https://www.michaelbakerdigital.com/discourse-test/

J’obtiens juste une boîte d’erreur grise vide

Et voici le code à l’intérieur de michaelbakerdigital.com

<div id='discourse-comments'></div>
<meta name='discourse-username' content='MikeB'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://learn.getupearlier.com/',
    discourseEmbedUrl: 'michaelbakerdigital.com',
    // 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>

Ou ceci :

<d-topics-list discourse-url="https://learn.getupearlier.com" category="5" per-page="5"></d-topics-list>

Toute aide est appréciée, je suis bloqué ici depuis une éternité et j’ai toujours voulu résoudre ce problème.

Bonjour, la solution ici était que mon nom de domaine, qui a été ajouté à la section d’intégration, nécessitait www.

C’est tout ! Tant de temps pour 4 caractères, mais j’ai résolu le problème avec l’aide du support de Discourse et de WP Engine.

Existe-t-il un exemple de code pour afficher également une image mise en avant sur le site externe ?

Merci beaucoup

Besoin d’aide : Intégration de la liste de sujets Discourse sur un site Next.js

Bonjour à tous,

J’essaie d’intégrer une liste de sujets Discourse sur mon site web (example.io) qui est construit avec le framework Next.js et Node.js, déployé via Vercel. J’ai créé une réplique de test du site web sur test-discourse.app à cet effet.

Voici ce que j’ai fait jusqu’à présent :

  1. Ajouté l’hôte dans les paramètres d’intégration de Discourse.
  2. Activé CORS dans l’environnement et ajouté l’hôte à l’origine CORS.
  3. Désactivé CSP (Content Security Policy).

Malgré ces étapes et l’ajout des scripts nécessaires, je ne parviens toujours pas à voir la liste des sujets sur mon site web.

Voici le code que j’utilise :

Dans la section head :

<script src="my-website/javascripts/embed-topics.js"></script>

Dans la section body :

<d-topics-list discourse-url="my-website" tags="example"></d-topics-list>

J’ai également essayé l’intégration des catégories comme montré dans le post.

Quelqu’un pourrait-il m’indiquer ce qui pourrait me manquer ou ce que je fais de mal ? Toute suggestion pour faire apparaître la liste des sujets sur mon site web serait grandement appréciée.

Merci d’avance pour votre aide !

J’ai une instance Discourse exécutée sur un VPS
J’ai un autre site Web exécuté sur un VPS différent
Les deux ont le même domaine racine, par exemple

community.mydomain.com
mydomain.com

J’ai utilisé avec succès cette méthode pour intégrer une liste de sujets du serveur de forum (Discourse) dans l’autre site Web. C’est vraiment formidable pour générer du trafic de mon site Web vers le forum.

J’utilise le composant de blocs de la barre latérale droite pour lister les « événements à venir » d’un calendrier à l’aide du plugin discourse-calendar

Je voudrais reproduire les « événements à venir » sur mon autre site Web. Je peux utiliser la méthode décrite dans ce sujet pour obtenir tous les sujets de ma catégorie de calendrier, mais ils sont triés par les plus récemment publiés.

Le composant de blocs de la barre latérale droite les trie par la date de l’événement
exemple

Y a-t-il un moyen de faire cela ? J’ai un contrôle administratif sur les deux sites Web.
Existe-t-il un autre moyen d’extraire des données de mon serveur Discourse, comme l’API ? L’API est-elle installée sur toutes les instances Discourse par défaut ou dois-je l’installer ?

1 « J'aime »

Puisque je n’ai reçu aucun indice, j’ai décidé de répondre à quelques-unes de mes propres questions pour ceux qui regardent

juste pour référence OUI, l’installation auto-hébergée installation officielle incluait l’API REST

J’ai obtenu des indices du fil d’exemple d’API sur la façon de faire des appels cURL depuis le terminal. Une fois que les commandes cURL ont fonctionné, j’ai utilisé ce site Web pour convertir la version en ligne de commande en PHP

Mon autre serveur exécute PHP en tant que backend et je fais des appels ajax depuis la page Web vers une fonction sur le serveur. Discourse génère du JSON et du JavaScript qu’il a construits pour le décoder. Adaptez le style au besoin… soupe
notez que cela peut seulement fonctionner parce que

et j’utilise une clé API et un utilisateur par comment le trouver ici
J’espère que cela aidera quelqu’un :+1:

1 « J'aime »

Il semble que nous puissions également utiliser le lien d’intégration dans un message de forum, comme ceci :

<iframe>

(cela ne fonctionnera pas ici car ils n’ont pas activé leur propre site dans les paramètres d’administration des iframes)

Cependant, scrolling="no" ne fonctionne pas… Apparemment, le groupe de normalisation a déprécié le défilement dans HTML5 et l’a remplacé par… rien. Les iframes s’améliorent chaque année, n’est-ce pas ?

Lors de mes tests, si je change le <body> dans l’iframe en overflow: hidden, la barre de défilement horizontale disparaît. Je n’ai pas trouvé de moyen de faire disparaître celle verticale. Depuis mon plugin, existe-t-il un moyen de modifier la page d’intégration pour définir overflow: hidden ?

Lors de l’intégration d’une liste de sujets, quelle serait la « meilleure » façon si je veux créer un carrousel à partir de tous les sujets intégrés avec défilement horizontal ?

Existe-t-il un moyen de faire en sorte que chaque lien de sujet s’ouvre dans un nouvel onglet/une nouvelle fenêtre ?