Insertar comentarios de Discourse en otro sitio web mediante Javascript

Las cientos de veces que he estado en esa página CSS, y nunca me di cuenta del CSS para las incrustaciones…

1 me gusta

Si alguien tiene problemas para encontrar cómo se ve la página de incrustación, aquí está:

Intenté implementar esto hoy, pero tengo algunos problemas:

  • En la publicación del foro, la URL derivada (¿de discourseEmbedUrl?) se convierte a minúsculas, rompiendo las URL que distinguen mayúsculas y minúsculas en el enlace que sigue al texto “Este es un tema de discusión complementario para la entrada original en…”
  • En la primera carga de página, el embed dice “Cargando discusión…” y se cuelga. En la segunda carga de página, todo funciona.
  • Paginación: cuando el iframe se está cargando, tendrá una altura predeterminada, pero si no se encuentran comentarios, la altura se reduce para mostrar solo una línea con “Iniciar discusión”. Esto empeora el error de “cargando discusión”, ya que mantiene una gran altura vertical abierta.
  • Sería bueno si los datos extraídos del padre del embed pudieran favorecer una etiqueta meta en lugar de convertir toda la página en texto, supongo que este es un comportamiento más general de Discourse.

La mayor sorpresa fue descubrir que cada vez que visitas una URL con un embed, se crea un nuevo tema. Esto está en el OP:

La única solución que se me ocurre es un truco, que depende del SSR/caché a corto plazo para hacer ping al punto final del embed:

así que creo que la lógica sería:

  1. comprueba $discourse/embed/info?embed_url=$link

  2. si el tema existe, muestra el embed como de costumbre.

  3. si no, muestra un botón “iniciar conversación” que enlaza a $discourse/new-topic?subject=$link.

¿Funcionaría eso, o hay algún otro enlace que deba tener lugar?

Se crea un nuevo tema solo cuando se visita una página con el embed por primera vez. En visitas posteriores, se renderiza el tema existente asociado a la URL.

Si no deseas la creación automática de temas, puedes crear los temas mediante llamadas a la API de la forma que mejor te convenga y luego pasar el topicID al embed para controlar manualmente la asociación.

Entendido, esto es brutal para mi caso porque hay decenas de miles de páginas

¿Así?

  1. La API comprueba si el tema existe
  2. No existe, muestra el botón
  3. Haz clic en el botón, la API añade el tema
  4. Éxito, el contenedor del botón se transforma en el embed

…eso también tiene algunos problemas, como clics en botones sin seguimiento de interacción.

¿Hay alguna forma de crear el tema solo cuando un usuario ha comentado realmente, algo como esto?:

$discourse/new-topic?subject=$link.

¿o el problema aquí es que no podemos pasar el topicID para un acoplamiento determinista?

No es posible responder a un tema que no existe en Discourse.

Para abordar esta necesidad, hicimos posible crear todos los temas incrustados como temas no listados que se listan automáticamente la primera vez que alguien responde.

Creo que la creación del tema requerirá una solicitud autenticada que se ejecute en el servidor. Si no quieres lidiar con eso, otro enfoque sería añadir un botón a la interfaz de usuario que active código similar a este (el código que de otro modo se añadiría automáticamente a la etiqueta <head> de la página): discourse/public/javascripts/embed.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub. Simplemente crea un elemento <iframe> usando estos datos:

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

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'http://127.0.0.1:4200/',
    discourseEmbedUrl: 'EMBED_URL',
    // className: 'CLASS_NAME',
  };
</script>

Editar: Tuve que intentarlo. Esto es solo una prueba de concepto: discourse-embed-iframe-test/app/routes/triggering-embed-code.tsx at main · scossar/discourse-embed-iframe-test · GitHub. No creo que sea una buena solución para tu problema.

La lógica está completamente en el cliente (la función loader es solo por conveniencia). Desafortunadamente, no hay una buena manera para que el cliente sepa si el tema existe en Discourse. Por lo tanto, no es posible personalizar la interfaz de usuario según si el tema ya existe o no. Hay formas de resolver eso, pero probablemente requerirían escribir algo en la base de datos de la aplicación.

Discourse utiliza Window: postMessage() para pasar datos del iframe al documento principal. Por ejemplo, cuando se hace clic en un enlace de respuesta en los comentarios incrustados: discourse/app/assets/javascripts/discourse/scripts/embed-application.js at 581dbca97f2b55c9bbbe40dc3b58a9df7409d77f · discourse/discourse · GitHub. Me pregunto si se podría enviar un mensaje al documento principal para indicar que se ha creado un tema. Eso permitiría a los sitios hacer cosas como establecer indicadores de carga personalizados o mostrar una interfaz de usuario diferente según si el tema estaba listo para recibir comentarios o no.

1 me gusta

No creo que sea necesario si fuera posible asignar un enlace principal a una nueva publicación:

$discourse/new-topic-link?link=$link

Lo que presumiblemente redirigiría al hilo si ya existe y usaría la lógica existente en la configuración de incrustaciones. ¿Quizás con plantillas?

Supongo que otra forma de resolver esto es buscar cualquier publicación que haga referencia al enlace en cuestión y mostrar cualquier coincidencia como parte de una conversación en todo el sitio, renderizando directamente en la página a través de SSR. Esto podría ser equivalente dado que las incrustaciones solo se pueden ver de todos modos. El problema más obvio sería elegir a qué hilo enviar al usuario cuando quiera participar.

edición: si puedo averiguar cómo buscar publicaciones por contenido de enlace

Me pregunto si esta función podría usarse para atacar un foro de Discourse. Específicamente, ¿es posible que alguien falsifique visitas a páginas bajo múltiples URL de un host y cree muchos, muchos temas?

¡Hola comunidad de Discourse!

Estoy emocionado de compartir un plugin que he desarrollado para aquellos que usan Docusaurus v3 y desean incrustar comentarios de Discourse en sus sitios.

docusaurus-plugin-discourse-comments

Este plugin facilita la integración de comentarios de Discourse en tu sitio Docusaurus v3. Aquí tienes algunas características clave:

  • Integración perfecta con Docusaurus v3
  • Rutas de incrustación configurables
  • Modo de depuración para una fácil resolución de problemas
  • Manejo automático de URL de incrustación
  • Colocación personalizable de comentarios

Si estás usando Docusaurus v3 y deseas agregar comentarios de Discourse a tu documentación o publicaciones de blog, este plugin simplifica significativamente el proceso.

Puedes encontrar el plugin en npm: docusaurus-plugin-discourse-comments

4 Me gusta

Digamos que tengo un solo host incrustable, blog.example.com y una lista de permitidos de comodín como /.*.

Me gustaría añadir una incrustación adicional usando el mismo host, pero esta vez con una lista de permitidos diferente, por ejemplo, /new-release.* y con una etiqueta extra, digamos releases.

Obviamente, el tema del “nuevo lanzamiento” podría coincidir con ambas combinaciones de host/ruta, pero ¿cuál de las dos tendría prioridad? ¿En qué orden se evalúan las reglas?

¿Sigue siendo cierto que no podemos incrustar un tema de un foro privado en un host (servidor) separado? Mi caso de uso es que utilizamos Kajabi para alojar el producto y Discourse como nuestra plataforma de comentarios. Cada uno requiere inicios de sesión separados, por lo que sospecho que la respuesta sigue siendo “no es posible”, pero este es uno de los factores limitantes para nuestros usuarios y un gran inconveniente, ya que tenemos más de 750 módulos, cada uno con un espacio de discusión dedicado. Si pudiera incrustar el tema de Discourse para cada módulo de Kajabi en la misma página, incluso sin poder comentar en la página, simplificaría todo y permitiría un enlace fácil al tema relevante en Discourse. Entonces, ¿hay algún progreso en esto o siempre será una limitación de los foros privados?

Veo que no es posible incrustar comentarios de un foro privado (en un sitio que utiliza un dominio diferente):

Sin embargo, lo que un colega está utilizando para los comentarios en un sitio de Ghost es un foro público (en un dominio completamente diferente), publicando principalmente publicaciones gratuitas. Recientemente publicó su primera publicación solo para miembros y, al cambiar su tema asociado en Discourse a una categoría donde no es visible para “Todos”, sino para un Grupo en particular (asociado con los miembros que pagan en el sitio de Ghost), la incrustación ahora muestra el mensaje “Error al incrustar”.

Aunque el OP dijo que los foros privados (en dominios separados) no permitirán que la incrustación funcione, este es un foro público pero con una categoría privada. ¿El problema que estoy viendo se debe a que una categoría privada en un foro público es funcionalmente lo mismo que un foro privado? Después de todo, leí el siguiente comentario, que parece respaldar esa afirmación:

Si es el caso de que los temas de categorías privadas en foros públicos no se pueden incrustar de inmediato, ¿hay alguna manera de que esto se pueda hacer con alguna modificación de la incrustación (y/o la plataforma)? No tengo ninguna prisa importante por (con suerte) “solucionar” este problema, ya que estoy bastante de acuerdo con establecer temporalmente la categoría privada como pública (ya que Discourse no puede extraer la publicación privada de Ghost y, por lo tanto, mostrar inadvertidamente su contenido a usuarios que no pagan en Discourse), pero si conseguir que esto funcione es posible, no me importaría contratar a alguien más adelante para que modifique la incrustación y/o presente una PR para la plataforma.

Hola, estoy usando la funcionalidad de incrustación con mi blog de Ghost, sin embargo, estoy teniendo algunos problemas con la forma en que las publicaciones del blog terminan en mi foro. Tengo configurados los siguientes hosts:

Debido a los desafíos con la configuración del subdominio (tengo mi dominio con un ISP diferente a donde tengo mi foro de Discourse), decidí usar la ruta de Etiquetas.

El problema con el que me encuentro es que todas mis publicaciones de blog terminan en la categoría Blog en mi foro de Discourse. Estoy usando un usuario administrador para el autor de la publicación en Discourse, las 3 categorías permiten a los administradores crear nuevos temas.

¿Alguna idea de qué podría estar causando esto?

¿Quizás especificar las rutas para cada una? Por ejemplo, si las publicaciones que van en la categoría del blog están bajo /blog/<slug>, si mal no recuerdo, puedes hacer /blog/*.

1 me gusta

Eso no funciona con el blog de Ghost (al menos no con una instalación bastante estándar). Estoy usando mi dominio principal (alphagamer.net), el blog de Ghost básicamente agrega la ruta automáticamente basándose en el título de la publicación del blog después del dominio. Intenté agregar una ruta pero simplemente la elimina.

1 me gusta

Me preguntaba si los comentarios de discourse (tema) podrían incrustarse en un tema de discourse. Quizás con un iframe que incluya el botón de respuesta pero no el resto del sitio. Es decir, sin encabezado ni pie de página.

Lo he usado con Ghost sin problemas, aparte de la falta de integración SSO, lo que molesta a los usuarios.

Recuerdo que tuve que ajustar un poco el código de ejemplo.

Creo que funciona bien si tienes 1 incrustación. Creo que si intentas incrustar diferentes tipos de publicaciones de blog en diferentes categorías de Discourse, requerirá un poco más de ajuste.

Pensé que podría hacer que funcionara usando las etiquetas, pero las etiquetas solas no parecen hacerlo (para mi configuración). Creo que en Ghost necesitaré crear Colecciones de contenido que básicamente me permiten agregar una estructura de carpetas (como alphagamer.net/blog/ y las otras que necesito). Intentaré esto durante el fin de semana, actualizaré mi “lista de permitidos de rutas” y publicaré aquí si logro que esto funcione.

¿Puede la lista de permitidos estar separada por comas como esta?

/blog/.*,/articles/.*

Editar: parece que eso no funciona. Esto tampoco funciona:

/(blog|articles)/.*

¿Quizás necesitan ser dos hosts separados?