Como Adicionar uma Seção de Comentários ao seu Site Estático

Os sites estáticos fornecem conteúdo por meio de uma coleção predefinida de arquivos HTML, CSS e JavaScript, tornando uma opção simples e econômica para muitos.

Apesar de sua natureza fixa, os sites estáticos podem ser aprimorados com elementos de conteúdo dinâmico para promover a interação do usuário. A integração de uma seção de comentários permite que os visitantes expressem suas opiniões, deem feedback ou façam perguntas sobre o seu conteúdo, ou serviços.

Essa adição promove o engajamento da comunidade e permite que você se conecte com seu público e refine suas ofertas com base no feedback deles. Este tutorial demonstra como adicionar uma seção de comentários a um site estático hospedado na hospedagem de sites estáticos da Kinsta.

Configure um site estático básico na Kinsta

Este tutorial usa o template do Docusaurus criado na conta GitHub da Kinsta. O Docusaurus é um gerador de site estático popular que usa o React, uma das principais bibliotecas JavaScript, como sua biblioteca de interface do usuário para a criação de páginas.

Siga as etapas abaixo para configurar esse site na Kinsta:

1. Para usar o template do Docusaurus, clique em Usar este template > Criar um novo repositório.
2. Clone o repositório para sua máquina local executando o seguinte comando:

   https://github.com/kinsta/hello-world-docusaurus.git

3. Faça login ou crie uma conta para visualizar seu painel MyKinsta.
4. Autorize a Kinsta com seu provedor Git.
5. Clique em Sites estáticos na barra lateral esquerda e, em seguida, clique em Adicionar site.
6. Selecione o repositório e a branch a partir da qual você deseja implantar.
7. Atribua um nome exclusivo ao seu site.
8. Adicione as configurações de build no seguinte formato:
   • Comando build: npm run build
   • Versão do node: 18.16.20
   • Diretório de publicação: build
9. Por fim, clique em Criar site.

Após o sucesso na implantação do seu site, você pode visitar a URL listada como o domínio na aba de Visão Geral do site implantado.

Crie uma conta Disqus

O Disqus oferece ferramentas para aumentar o engajamento por meio de integração social, ferramentas de moderação e análises. Ele oferece suporte a discussões on-line por meio de comentários. Siga estas etapas para usar o Disqus:

1. Crie uma conta do Disqus.
2. Preencha as informações necessárias para o processo de registro.
3. Após a inscrição, selecione Desejo instalar o Disqus em meu site.
4. Registre seu site no Disqus. Durante o registro, escolha um nome curto e uma categoria para o seu site. Uma organização gera automaticamente uma lista contendo seu novo site e todos os sites adicionais que você criar no futuro.
5. Selecione um plano do Disqus para sua organização. O Disqus oferece vários planos de assinatura, incluindo Plus, Pro e Business. Para esta demonstração, você pode selecionar o plano Basic, que inclui os principais recursos, como o plugin de comentários, a filtragem avançada de spam, as ferramentas de moderação e a análise básica.

Integre o Disqus com seu site estático na Kinsta

A próxima etapa é integrar o snippet de código do Disqus em seu gerador de site estático.

1. Depois de registrar seu site, clique em I don’t see my platform listed, install manually with Universal Code.

   

   A página exibida contém um snippet de código JavaScript na seção rotulada Place the following code where you’d like Disqus to load. Como o site estático é um aplicativo React, você deve modificar esse snippet de código para funcionar com o React.

2. Crie uma pasta chamada Disqus dentro da pasta src/components .
3. Use o seguinte código dentro do arquivo index.js. Certifique-se de substituir https://your_shortname_placeholder.disqus.com/embed.js pela URL que você recebeu no Código Universal:

   import React, { useEffect } from 'react';
   
   const DisqusComments = () => {
       useEffect(() => {
   
       const disqus_config = function () {
           this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
   canonical URL variable
           this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
   your page's unique identifier variable
       };
   
       // Load Disqus script dynamically
       (function () {
           const d = document;
           const s = d.createElement('script');
           s.src = 'https://your_shortname_placeholder.disqus.com/embed.js';
           s.setAttribute('data-timestamp', +new Date());
           (d.head || d.body).appendChild(s);
       })();
   
       // Cleanup Disqus on component unmount
       return () => {
           const disqusThread = document.getElementById('disqus_thread');
           if (disqusThread) {
           disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
   interference with other components
           }
       };
       }, []); // Run this effect only once on component mount
   
       return (
       <div>
           <div> id="disqus_thread"></div>
           <noscript>Please enable JavaScript to view the <a>  
   href="https://disqus.com/?ref_noscript">comments powered by  
   Disqus.</a></noscript>
       </div>
       );
   };
   
   export default DisqusComments;

   A função disqus_config define duas variáveis:

   • this.page.url – Essa variável é definida como PAGE_URL, que você deve substituir pela URL canônica da página. O Disqus usa essa URL para identificar a página específica à qual os comentários pertencem.
   • this.page.identifier – Esta variável é definida como PAGE_IDENTIFIER, que você deve substituir por um identificador exclusivo da página. Esse identificador permite que o Disqus diferencie entre páginas com a mesma URL e associar comentários à página correta.
4. Você pode importar esse componente para a página em que deseja exibir a seção de comentários do Disqus.

   import DisqusComments from '@site/src/components/Disqus';

5. Em seguida, adicione a seção de comentários do Disqus à página de destino, inclua a seguinte instrução de importação em index.js no diretório src/pages e use DisqusComments de acordo:

   export default function Home() {
       const {siteConfig} = useDocusaurusContext();
       return (
       <Layout
           title={`Hello from ${siteConfig.title}`}
           description="Description will go into a meta tag in <head />">
           <HomepageHeader />
           <main>
           <HomepageFeatures />
           <DisqusComments/>
           </main>
       </Layout>
       );
   }

6. Confirme essas alterações no seu repositório para que elas sejam refletidas no site estático hospedado na Kinsta:

   git add .
   git commit -m "Adding Disqus Comments"
   git push -u origin master

Se você clicou em Habilitar implantação automática no commit ao implantar seu site estático, o commit de novas alterações iniciará automaticamente uma implantação no MyKinsta. Caso contrário, você deverá implantar as alterações manualmente.

Parabéns – você criou um site estático usando a Hospedagem de Site Estático da Kinsta e integrou uma seção de comentários usando o Disqus!

Você pode querer modificar o componente DisqusComments para garantir que a seção de comentários seja carregada como pretendido.

Como personalizar a seção de comentários

Você pode personalizar a seção de comentários em seu site estático modificando sua aparência, implementando reações, realizando a moderação de comentários e muito mais. Algumas opções de personalização disponíveis no Disqus incluem o seguinte.

Personalizar o tema

Para personalizar o tema dos seus comentários do Disqus, navegue até o painel do Disqus, clique em General na aba Settings e selecione as opções adequadas nos menus suspensos Color Scheme e Typeface.

Ativar reações em seu site

Você pode aumentar o engajamento do público-alvo ativando as Reações em seu site. Personalize essas reações de acordo com suas preferências.

Para ativar esse recurso, navegue até a aba Settings no painel do Disqus. Selecione Reactions. Em seguida, clique em Enable Reactions on your site.

Atualize seu site. A opção para reações aparecerá.

Avatares de comentários

Você pode carregar um avatar de comentarista padrão para os usuários, fazendo com que eles se sintam parte da comunidade.

Para ativar esse recurso, navegue até o painel do Disqus, clique em General na aba Settings e carregue uma imagem de Default Commenter Avatar.

Classificar comentários

Adicione a personalização para permitir que os usuários classifiquem os comentários com base em Oldest First (Mais antigo), Newest First (Mais recente) ou Best First (Melhores primeiro). Clique em Community (Comunidade) na aba Settings (Configurações) do painel do Disqus e selecione a ordem na lista suspensa Default Sort (Classificação padrão).

Como moderar comentários

Para moderar comentários no Disqus, use o painel de moderação do Disqus na barra de navegação superior do painel do Disqus. Essa ferramenta fornece uma visão rápida dos comentários do fórum e do status deles (aprovados, pendentes e assim por diante).

Você também pode configurar as regras de moderação no menu Moderation, que está disponível no painel de navegação esquerdo na aba Settings do painel do Disqus.

Em seguida, consulte a documentação sobre as principais etapas e recursos para ajudar você a gerenciar e moderar comentários no Disqus.

Permita que visitantes comentem

Para permitir que usuários convidados comentem em seu site, marque a caixa de seleção Guest Commenting e clique em Save. Esses comentários permanecem pendentes até que um moderador os aprove no painel de moderação do Disqus.

Você pode aprovar, excluir e marcar comentários como spam

O painel de moderação permite que você execute ações em massa (aprovar, excluir e marcar comentários como spam) verificando vários comentários. Como alternativa, você pode moderá-los individualmente na exibição expandida de comentários.

Quando você ativar essa configuração, um moderador deverá aprovar os comentários antes que eles sejam exibidos.

Resumo

Este tutorial ensinou a você como adicionar uma seção de comentários ao seu site estático. Além do Docusaurus, você pode implementar o Disqus em qualquer outro SSG, como VuePress, Gatsby e outros.

A hospedagem de site estático da Kinsta permite que você adicione facilmente seus arquivos não dinâmicos pré-construídos. Para explorar os benefícios de hospedar seu site estático na Kinsta e integrar recursos como uma seção de comentários, confira a Hospedagem de Site Estático da Kinsta.

Você já implementou o Disqus ou qualquer outro serviço de comentários em seu site estático? Compartilhe suas experiências na seção de comentários abaixo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

• Site
• LinkedIn