Add Comments to Wix Sites

Para este exemplo, vamos adicionar os Comentários ao Vivo do FastComments às páginas de postagens do blog.

Para isso, vamos abrir nosso site no editor do Wix.

Em seguida, precisamos ter certeza de que estamos editando a página correta.

Queremos garantir que exibimos um tópico de comentários exclusivo para cada post do blog, então vamos editar Blog Pages -> Post.

Passo Um: Edite a Página Dinâmica do Post

Em seguida, vamos para Add -> Embed Code -> Embed HTML.

Passo Dois: Adicionar um Bloco Embed HTML

Isso nos dará uma caixa com aparência triste para começar:

O Bloco Inicial

Este exemplo usa código personalizado para ser compatível com o Wix. Você não poderá usar os trechos de código do FastComments de outros tutoriais.

Abra o formulário para adicionar nosso diálogo HTML personalizado clicando em Enter Code e selecionando HTML:

Etapa 3: Abrir Diálogo HTML

Copie o trecho HTML a seguir e cole-o no diálogo, e clique em Atualizar:

Trecho de código dos comentários do Wix

Copy

1

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

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

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Etapa 3: Colar e Salvar

Agora você deverá ver uma versão bem pequena do widget de comentários:

Etapa 3: O Resultado

Em seguida, iremos posicionar e dimensionar isso para caber em nossa página.

Agora que adicionamos o widget de comentários, vamos organizá-lo na nossa página.

Passo 4: Redimensionar

Com este tutorial seremos capazes de alterar o tópico atual com base na página ativa. No entanto, não poderemos redimensionar o widget de comentários dinamicamente até que o Wix libere essa funcionalidade. Até lá, você terá que decidir qual o tamanho desejado para a área de comentários na sua página e dimensioná-la adequadamente.

A seguir, vamos configurar tudo para que o fio de comentários mude com base na página atual, permitindo que os usuários discutam o conteúdo exibido no momento.

Sem os passos a seguir, você terá apenas um fio de comentários global para todo o seu site — o que não é muito útil.

Modo Dev

Para adicionar essa funcionalidade, teremos que entrar no que o Wix chama de Dev Mode.

Clique na opção Dev Mode no topo da tela.

Ativar Modo Dev

Definir o ID do Elemento

Vamos adicionar um código personalizado para conseguir isso, mas primeiro precisamos dar ao novo elemento embed um ID para nos referirmos a ele.

Vamos chamá-lo de fastcomments.

Clique no novo elemento embed que adicionamos e, no modo dev, no canto inferior direito, você deverá ver um campo de ID com um valor como html1:

O campo ID

Altere isto para fastcomments e pressione Enter:

Definir o ID

Agora podemos adicionar nosso código personalizado que indica à área de comentários qual página estamos visualizando.

Na parte inferior da tela você deverá ver um editor de código como este:

Abrir o Editor

Copie o código a seguir e cole ali:

Trecho de Navegação de Comentários do Wix

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Adicionar o Código de Navegação

Agora podemos respirar e visualizar nosso site. Você deve ver uma área de comentários que muda conforme a página. Parabéns!

Se tiver algum problema, informe-nos na caixa de comentários abaixo.

O FastComments foi projetado para ser personalizado para combinar com o seu site.

Se você quiser adicionar estilos personalizados ou ajustar a configuração, Confira nossa Documentação de Personalização para saber como.