FastComments.com


Instalación

FastComments está diseñado para instalarse en cualquier tipo de página - estática o dinámica, con tema claro o oscuro, páginas públicas o internas. Debe ser fácil de instalar y adaptar a cualquier tipo de sitio o aplicación web.


WordPress Internal Link

Puede encontrar nuestro plugin de WordPress aquí.

Una guía de instalación completa y documentación sobre el plugin están aquí.

Este plugin admite comentarios en vivo, SSO e 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 plugin. Le guiará para conectar su instalación de WordPress con su cuenta.

Cualquier comentario dejado con FastComments a través de nuestro plugin de WordPress puede sincronizarse automáticamente con su instalación de WordPress para que conserve el control de sus datos. Esto puede desactivarse para limitar el tamaño de su base de datos de WordPress.

VanillaJS / Fragmento HTML Internal Link

La versión VanillaJS del widget es muy fácil de instalar, sin requerir sistemas de compilación ni código del lado del servidor.

Simplemente agregue el siguiente fragmento de código a cualquier página:

Simple Code Snippet
Copy CopyRun External Link
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

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

Muchas aplicaciones tienen una opción de "Código de incrustación HTML". Selecciónela y pegue el fragmento de código anterior.

¡Tampoco necesita una cuenta para probarlo! Es posible que vea "tenantId: demo" en el fragmento anterior si no ha iniciado sesión. De esta manera, usará la cuenta de demostración.

Puede encontrar documentación sobre la configuración del widget aquí.

Todas las versiones del widget FastComments son envolturas alrededor de la biblioteca central VanillaJS. Esto nos permite agregar funciones y corregir problemas en un solo lugar, y los cambios se propagan automáticamente a las otras variantes del widget de comentarios.

Angular Internal Link

Puede encontrar nuestra biblioteca Angular en NPM aquí.

El widget de comentarios FastComments para Angular admite todas las mismas funciones que la versión VanillaJS: comentarios en vivo, SSO y más.

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

FastComments Angular via NPM
Copy Copy
1
2 npm install fastcomments-typescript --save
3 npm install ngx-fastcomments --save
4

La dependencia de pares debe agregarse en su archivo tsconfig.json, por ejemplo:

Adding fastcomments-typescript peer dependency
Copy 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:

Add The Module to Your App
Copy 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 inquilino de demostración:

Usage - Inline Configuration
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>
3

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

Usage - Pass Object for Configuration
Copy Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>
3
Usage - EU
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>
3

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

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

React Internal Link

Puede encontrar nuestra biblioteca React en NPM aquí.

El widget de comentarios FastComments para React admite todas las mismas funciones que la versión VanillaJS: comentarios en vivo, SSO y más.

FastComments React via NPM
Copy Copy
1
2npm install --save fastcomments-react
3
FastComments React via Yarn
Copy Copy
1
2yarn add fastcomments-react
3
React Example
Copy 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 está en la UE, querrá establecer el parámetro region así:

React Example - EU
Copy Copy
1
2 <FastCommentsCommentWidget tenantId="demo" region="eu" />
3

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

Vue Internal Link

Puede encontrar nuestra biblioteca Vue en NPM aquí.

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

El código fuente se puede encontrar en GitHub.

El widget de comentarios FastComments para Vue admite todas las mismas funciones que la versión VanillaJS: comentarios en vivo, SSO y más.

Las instrucciones a continuación son para Vue 3 ya que ha estado disponible durante algún tiempo, sin embargo, FastComments también admite Vue 2 a través de la biblioteca fastcomments-vue.

FastComments Vue via NPM
Copy Copy
1
2npm install --save fastcomments-vue-next
3
FastComments Vue via Yarn
Copy Copy
1
2yarn add fastcomments-vue-next
3
Vue Example
Copy 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á en la UE, querrá establecer la region a EU:

FastComments Vue - EU
Copy Copy
1
2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>
3

Las bibliotecas fastcomments-vue y fastcomments-vue-next admiten la misma configuración que el widget de comentarios VanillaJS.

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

TypeScript Internal Link

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í.

Múltiples instancias en la misma página Internal Link

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.

Casos de uso comunes Internal Link

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í.