Add Comments To a Website

Para añadir comentarios a su sitio de WordPress, puede encontrar nuestro complemento de WordPress aquí.

Una guía completa de instalación y la documentación sobre el complemento se encuentran aquí.

Este complemento admite comentarios en vivo, SSO y una instalación sin código. Simplemente siga la guía de instalación en la página de administración después de instalar el complemento. Le guiará a través de la conexión de su instalación de WordPress a su cuenta.

Cualquier comentario realizado con FastComments a través de nuestro complemento de WordPress puede sincronizarse automáticamente de vuelta a su instalación de WordPress para que usted mantenga el control sobre sus datos. Esto se puede desactivar para limitar el tamaño de su base de datos de WordPress.

La versión VanillaJS del widget es la forma más sencilla de añadir comentarios a tu sitio web, sin requerir sistemas de compilación ni código del lado del servidor.

Simplemente añade el siguiente fragmento de código a cualquier página para añadir comentarios a tu sitio:

Simple Code Snippet

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

Puedes usar el mismo fragmento de código en muchas páginas; automáticamente creará un hilo separado para cada página.

Muchas aplicaciones tienen una opción "HTML Embed Code". Selecciónala y pega el fragmento de código anterior en.

¡Tampoco necesitas una cuenta para probarlo! Quizá veas "tenantId: demo" en el fragmento anterior si no has iniciado sesión. De este modo usará la cuenta demo.

Puedes encontrar documentación sobre cómo configurar el widget aquí.

Todas las versiones del widget FastComments son envoltorios alrededor de la biblioteca núcleo VanillaJS. Esto nos permite añadir funciones y corregir problemas en un solo lugar; los cambios se propagan automáticamente a las demás variantes del widget de comentarios.

Para añadir comentarios a un sitio construido con Angular, puede encontrar nuestra biblioteca de Angular en NPM aquí.

El widget de comentarios FastComments para Angular admite todas las mismas funciones que el de VanillaJS: comentarios en tiempo real, sso, y demás.

Necesitará fastcomments-typescript, que es una dependencia peer. Asegúrese de que esto esté incluido en la compilación de TypeScript. En el futuro, esta dependencia peer se moverá a @types/fastcomments, lo que simplificará esta instalación.

FastComments Angular vía NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

La dependencia peer debe añadirse en su archivo tsconfig.json, por ejemplo:

Agregar la dependencia peer fastcomments-typescript

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

Luego, agregue el FastCommentsModule a su aplicación:

Agregar el módulo a su aplicación

Copy

1

2import { BrowserModule } from '@angular/platform-browser';

3import { NgModule } from '@angular/core';

4

5import { AppComponent } from './app.component';

6import { FastCommentsModule } from 'ngx-fastcomments';

7

8@NgModule({

9 declarations: [

10 AppComponent

11 ],

12 imports: [

13 BrowserModule,

14 FastCommentsModule

15 ],

16 providers: [],

17 bootstrap: [AppComponent]

18})

19export class AppModule { }

20

Uso

Para comenzar, pasamos un objeto de configuración para el tenant de demostración:

Uso - Configuración en línea

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

3

Dado que la configuración puede volverse bastante complicada, podemos pasar una referencia a un objeto:

Uso - Pasar objeto para la configuración

Copy

1

2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

3

Uso - UE

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

3

El widget utiliza la detección de cambios, por lo que modificar cualquier propiedad del objeto de configuración provocará que se recargue.

Puede encontrar la configuración que admite el componente Angular aquí.

Para añadir comentarios a un sitio construido con React, puedes encontrar nuestra librería React en NPM aquí.

El widget de comentarios FastComments para React admite todas las mismas funciones que el de VanillaJS: comentarios en vivo, sso, y demás.

FastComments React vía NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React vía Yarn

Copy

1

2yarn add fastcomments-react

3

Ejemplo en React

Copy

1

2import React, { Component } from 'react'

3

4import {FastCommentsCommentWidget} from 'fastcomments-react'

5

6class Example extends Component {

7 render() {

8 return <FastCommentsCommentWidget tenantId="demo" />

9 }

10}

11

Si te encuentras en la UE, querrás establecer el parámetro region así:

Ejemplo React - UE

Copy

1

2 <FastCommentsCommentWidget tenantId="demo" region="eu" />

3

Puedes encontrar la configuración que admite el componente React aquí.

Para añadir comentarios a tu sitio web creado con Vue, puedes encontrar nuestra biblioteca Vue en NPM aquí.

Además, una biblioteca vue-next está en NPM aquí

El código fuente puede encontrarse en GitHub.

El widget de comentarios FastComments para Vue soporta todas las mismas características que el de VanillaJS - live commenting, sso, y demás.

Las siguientes instrucciones son para Vue 3 ya que lleva tiempo disponible, sin embargo FastComments también soporta Vue 2 vía la biblioteca fastcomments-vue.

FastComments Vue vía NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue vía Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Ejemplo de Vue

Copy

1

2<template>

3 <img alt="Vue logo" src="./assets/logo.png">

4 <fast-comments v-bind:config="{tenantId: 'demo'}"/>

5</template>

6

7<script>

8import {FastComments} from 'fastcomments-vue-next';

9

10export default {

11 name: 'App',

12 components: {

13 FastComments

14 }

15}

16</script>

17

Si estás en la UE, querrás establecer la region a EU:

FastComments Vue - UE

Copy

1

2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

3

The fastcomments-vue and fastcomments-vue-next libraries support the same configuration as the VanillaJS commenting widget.

Puedes encontrar la configuración que soporta el componente Vue aquí.

Las definiciones de TypeScript para FastComments, que incluyen tipos para toda la configuración pasada al widget de comentarios, se pueden encontrar en NPM aquí.

Puede encontrarlas en GitHub aquí.

Cada instancia del widget de comentarios está aislada. Por esta razón, FastComments admite de forma nativa más de una instancia por página, o múltiples instancias apuntando al mismo hilo de chat.

En el caso de la biblioteca VanillaJS, por ejemplo, simplemente tiene que vincular el widget de comentarios a diferentes nodos DOM. Si desea simplemente actualizar el hilo actual en la página, consulte Cambiar hilos de comentarios sin recargar la página;

Sincronización del estado de autenticación entre múltiples instancias

Veamos el ejemplo de una aplicación de página única personalizada que es una lista de preguntas frecuentes con su propio hilo de comentarios.

En este caso, tenemos múltiples instancias de FastComments en el DOM al mismo tiempo.

Esto está bien, pero plantea algunos desafíos para la experiencia del usuario.

Considere este flujo:

1. El usuario visita la página con una lista de preguntas, cada una con su propio widget de comentarios.
2. El usuario ingresa su nombre de usuario y correo electrónico y deja una pregunta en uno de los hilos.
3. Ve otro elemento de FAQ sobre el que tiene una pregunta.
4. Va a comentar de nuevo. ¿Tiene que ingresar su correo electrónico y nombre de usuario nuevamente?

En este caso, FastComments maneja la sincronización del estado de autenticación entre instancias del widget por usted. En el paso cuatro, el usuario ya estará autenticado temporalmente ya que ingresó su nombre de usuario y correo electrónico en la misma página.

Mostrar comentarios en vivo inmediatamente

El widget de comentarios está en vivo por defecto, sin embargo, los comentarios en vivo aparecen bajo un botón "Mostrar N nuevos comentarios" para evitar que el contenido de la página se mueva.

En algunos casos, aún es deseable mostrar los nuevos comentarios de inmediato, sin tener que hacer clic en un botón.

En este caso, querrá habilitar la bandera showLiveRightAway, cuya documentación puede encontrar aquí.

Permitir comentarios anónimos (no requerir correo electrónico)

Por defecto, FastComments requiere que el usuario deje un correo electrónico cuando comenta.

Esto puede deshabilitarse, las instrucciones están aquí.

Estilo personalizado

Muchos de nuestros clientes aplican su propio estilo al widget de comentarios. Puede encontrar la documentación aquí.

Mostrar los mismos comentarios en múltiples dominios

Mostrar los mismos comentarios en múltiples sitios es algo que FastComments admite de forma nativa. Consulte nuestra documentación sobre este tema.

Cambiar la página actual

FastComments admite SPAs y aplicaciones complejas. Cambiar la página actual es fácil y se cubre aquí.