# Como adicionar comentários do Facebook no editor por Componentes

**Objetivo:** Aprender a adicionar comentários do Facebook\
em todos os construtores de páginas da leadlovers.\

**Para que serve:** Os comentários do Facebook são incorporados para que \
os visitantes possam interagir em sua página.\

**Requisito(s) Obrigatórios:** \
**1.** É preciso estar logado em sua conta Facebook durante todo o processo, assim como quem for\
realizar comentários. \
**2.** É preciso ter ou criar um **App no Facebook Developers**. \
**3**. É preciso ter uma página criada na leadlovers.

## **Como inserir comentários do Facebook na página.**

Para inserir os comentários do Facebook em uma página criada pelo construtor de página por componentes, será preciso gerar dois códigos no Facebook For Developers e depois inseri-los na página em que deseja exibir os comentários. Abaixo veremos o passo a passo.

**Para começar, acesse o Facebook for Developers,** [**clicando aqui**](https://developers.facebook.com/docs/plugins/comments/)**.**\
**Lembre-se de estar logado em sua conta do Facebook durante o processo.**

**1 –** **Em URL para comentar,** insira a URL da página da leadlovers na qual você deseja que os comentários sejam inseridos.

**2 –** **Em número de publicações,** você\
pode alterar a quantidade de comentários que poderá ser exibida na caixa de comentários\
em sua página. Nós recomendamos manter a quantidade de 5 publicações para não\
afetar o layout da exibição.

**3 –** Clique em **Obter código**.

![2-5-1024x494.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704050070541/2-5-1024x494.png)

**4 – Copie o código do passo 2 e cole um local seguro**, pode ser um bloco de notas, pois iremos utiliza-lo mais tarde.\
Este código será inserido no BODY TAG da página de sua página na leadlovers.

**5 – Copie o código do passo 3 e cole um local seguro**, pode ser um bloco de notas, pois iremos utiliza-lo mais tarde.\
Este código será inserido dentro da página, no local exato onde desejarmos que ele seja exibido em sua página na leadlovers.

## **Acessando e configurando a página que irá receber os comentários do Facebook.**

![1-14.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704068522509/1-14.png)

Acesse o projeto que contém a página que deseja inserir os comentários do Facebook.\
**6 –** Clique na opção **Páginas** do projeto.\
**7 –** Encontre a página construída pelo construtor por componentes que deseja inserir os comentários do Facebook e clique no botão de **engrenagem**.

**8 –** Clique em **Configurações.**

![1-15.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704083709325/1-15.png)

**9 –** Acesse a aba de **Configurações Avançadas.**

**10 –** Em Script do Corpo (Body), você irá inserir o **código do Step 2**, referente ao passo 4 deste tutorial, que você copiou e guardou para utilizar mais tarde.

**11 –** Clique em **Salvar.**

![2-6-1024x309.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704089363213/2-6-1024x309.png)

**12 –** Clique novamente no botão de engrenagem da página em questão.

**13 –** Clique em **Editar.**

![2-7-1024x486.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704068778509/2-7-1024x486.png)

**14 –** Na edição da página, você irá arrastar um elemento de HTML para o local exato onde deseja que os comentários sejam exibidos. No menu lateral esquerdo, **clique no elemento de HTML** e posicione ele onde desejar que os comentários sejam exibidos.

![2-8-1024x491.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704049852429/2-8-1024x491.png)

**15 –** Aqui é o local onde escolhemos para inserir o elemento de HTML. Será exibido assim em sua página.

**16 –** No menu lateral direito, abrirá uma opção de edição do conteúdo HTML.\
É aqui que você irá inserir o **código do Step 3**, referente ao passo 5 deste tutorial, que você copiou e guardou para utilizar mais tarde.

**17 –** Clique em **Salvar e Fechar.**

### **Resultado:**

A sua página irá exibir uma caixa com os comentários do Facebook, conforme segue\
no exemplo abaixo:

![2-9-1024x436.png](https://leadloverssupport.zendesk.com/hc/article_attachments/4704049852045/2-9-1024x436.png)

**Suporte**

Se surgir qualquer dúvida ou situação, ou se precisar de qualquer ajuda durante\
este procedimento, por favor, **entre em contato com o nosso suporte**!