Add Comments To a Website

Para adicionar comentários ao seu site WordPress, você pode encontrar nosso plugin do WordPress aqui.

Um guia completo de instalação e a documentação sobre o plugin estão aqui.

Este plugin oferece suporte a comentários ao vivo, SSO e instalação sem código. Basta seguir o guia de instalação na página de administração após instalar o plugin. Ele irá orientá-lo na conexão da sua instalação do WordPress à sua conta.

Quaisquer comentários deixados com o FastComments através do nosso plugin para WordPress podem ser sincronizados automaticamente de volta para sua instalação do WordPress, para que você mantenha controle sobre seus dados. Isso pode ser desativado para limitar o tamanho do banco de dados do WordPress.

A versão VanillaJS do widget é a maneira mais simples de adicionar comentários ao seu site, não exigindo nenhum sistema de build ou código do lado do servidor.

Basta adicionar o seguinte trecho de código a qualquer página para adicionar comentários ao seu site:

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

Você pode usar o mesmo trecho de código em várias páginas; ele criará automaticamente um tópico separado por página.

Muitas aplicações têm uma opção "HTML Embed Code". Selecione-a e cole o trecho de código acima.

Você também não precisa de uma conta para experimentar! Você pode ver "tenantId: demo" no trecho acima se não estiver logado. Dessa forma ele usará a conta demo.

Você pode encontrar a documentação sobre como configurar o widget aqui.

Todas as versões do widget FastComments são wrappers em torno da biblioteca core VanillaJS. Isso nos permite adicionar recursos e corrigir problemas em um só lugar - e as mudanças se propagam automaticamente para as outras variantes do widget de comentários.

Para adicionar comentários a um site construído com Angular, você pode encontrar nossa biblioteca Angular no NPM aqui.

O widget de comentários FastComments para Angular oferece todos os mesmos recursos do VanillaJS — comentários em tempo real, SSO, e assim por diante.

Você precisará de fastcomments-typescript, que é uma dependência peer. Por favor, certifique-se de que isso esteja incluído na sua compilação TypeScript. No futuro, essa dependência peer será movida para @types/fastcomments, o que simplificará essa instalação.

FastComments para Angular via NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

A dependência peer deve ser adicionada no seu arquivo tsconfig.json, por exemplo:

Adicionando a dependência peer fastcomments-typescript

Copy

1

2"include": [

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

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

5],

6

Então, adicione o FastCommentsModule à sua aplicação:

Adicione o módulo à sua aplicação

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

Usage

Para começar, passamos um objeto de configuração para o tenant de demonstração:

Uso - Configuração inline

Copy

1

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

3

Como a configuração pode ficar bastante complicada, podemos passar uma referência de objeto:

Uso - Passar objeto para configuração

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

O widget usa detecção de mudanças, então alterar qualquer propriedade do objeto de configuração fará com que ele seja recarregado.

Você pode encontrar a configuração que o componente Angular suporta aqui.

Para adicionar comentários a um site construído com React, você pode encontrar nossa biblioteca React no NPM aqui.

O widget de comentários FastComments para React suporta todos os mesmos recursos do de VanillaJS - comentários em tempo real, SSO, e assim por diante.

FastComments React pelo NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React pelo Yarn

Copy

1

2yarn add fastcomments-react

3

Exemplo em 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

Se você estiver na UE, defina o parâmetro region assim:

Exemplo em React - UE

Copy

1

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

3

Você pode encontrar a configuração que o componente React suporta aqui.

Para adicionar comentários ao seu site feito com Vue, você pode encontrar nossa biblioteca Vue no NPM aqui.

Além disso, uma biblioteca vue-next está no NPM aqui

O código-fonte pode ser encontrado no GitHub.

O widget de comentários FastComments para Vue oferece todos os mesmos recursos do VanillaJS — comentários ao vivo, SSO, e assim por diante.

As instruções abaixo são para o Vue 3, pois ele já está disponível há algum tempo; no entanto, o FastComments também oferece suporte ao Vue 2 via a biblioteca fastcomments-vue.

FastComments Vue via NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue via Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Exemplo 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

Se você estiver na UE, deverá definir region como EU:

FastComments Vue - UE

Copy

1

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

3

As bibliotecas fastcomments-vue e fastcomments-vue-next suportam a mesma configuração que o widget de comentários VanillaJS.

Você pode encontrar a configuração que o componente Vue suporta aqui.

As definições TypeScript para FastComments, que incluem tipos para toda configuração passada ao widget de comentários, podem ser encontradas no NPM aqui.

Você pode encontrá-las no GitHub aqui.

Cada instância do widget de comentários é isolada. Por isso, FastComments suporta nativamente mais de uma instância por página, ou múltiplas instâncias apontando para a mesma thread de chat.

No caso da biblioteca VanillaJS, por exemplo, você simplesmente precisa vincular o widget de comentários a diferentes nós DOM. Se você quer simplesmente atualizar a thread atual na página, veja Trocar Threads de Comentários Sem Recarregar a Página;

Sincronizando Estado de Autenticação Entre Múltiplas Instâncias

Vamos analisar o exemplo de uma aplicação single-page personalizada que é uma lista de perguntas frequentes com sua própria thread de comentários.

Neste caso, temos múltiplas instâncias de FastComments no DOM ao mesmo tempo.

Isso é ok, mas apresenta alguns desafios para a experiência do usuário.

Considere este fluxo:

1. O usuário visita a página com uma lista de perguntas, cada uma com seu próprio widget de comentários.
2. O usuário insere seu nome de usuário e email e deixa uma pergunta em uma das threads.
3. Ele vê outro item de FAQ sobre o qual tem uma pergunta.
4. Ele vai comentar novamente. Ele precisa inserir seu email e nome de usuário novamente?

Neste caso, FastComments cuida da sincronização do estado de autenticação entre instâncias do widget para você. No passo quatro, o usuário já estará temporariamente autenticado já que inseriu seu nome de usuário e email na mesma página.

Mostrando Comentários ao Vivo Imediatamente

O widget de comentários é ao vivo por padrão, no entanto comentários ao vivo aparecem sob um botão "Mostrar N Novos Comentários" para evitar que o conteúdo da página se mova.

Em alguns casos, ainda é desejável mostrar os novos comentários imediatamente, sem ter que clicar em um botão.

Neste caso, você vai querer habilitar a flag showLiveRightAway, cuja documentação você pode encontrar aqui.

Permitindo Comentários Anônimos (Não Exigindo Email)

Por padrão, FastComments exige que o usuário deixe um email quando comenta.

Isso pode ser desabilitado, instruções estão aqui.

Estilo Personalizado

Muitos de nossos clientes aplicam seu próprio estilo ao widget de comentários. Você pode encontrar a documentação aqui.

Mostrando os Mesmos Comentários em Múltiplos Domínios

Mostrar os mesmos comentários em múltiplos sites é algo que FastComments suporta nativamente. Veja nossa documentação sobre este assunto.

Mudando a Página Atual

FastComments suporta SPAs e aplicações complexas. Mudar a página atual é fácil e é coberto aqui.