[TUTORIAL] "Comentários do Facebook" pra PV de forma rapida e prática.

Adulto Black · Julho 26, 2022

Fala rataria, o conteúdo desse fórum já me ajudou bastante, chegou a hora de restribuir um pouco.

Em poucas palavras, pra ser breve e objetivo vamos direto ao ponto.

Siga o passo a passo e o resultado será algo assim:

Vamos lá...

1- Abra o Wordpress

2- Na Aba esquerda clique em "Aparência", depois em “Personalizar”. Vai abrir uma página onde você pode editar o layout do seu wordpress

3- Na Aba esquerda clique em “CSS Adicional”

4- Cole o código abaixo:

#comentarios_face {
font-family: Arial;
background-color: #F6F7F9;
font-size: 14px;
padding: 20px;
}
.titulo_comentario {
font-weight: bold;
border-bottom: 1px solid #E9EBEE;
display: block;
padding-bottom: 6px;
}
.perfil {
display: block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.perfil .nome {
color: #365899;
font-weight: bold;
}
.nome img {
float: left;
padding-right: 10px;
}
.perfil img {
width: 60px !important;
height: 50px;
}
.perfil p {
margin: 0;
margin-left: 60px;
margin-bottom: 0px;
}
.infos {
font-size: 11px;
color: #90949c;
}
.perfil2 {
padding-left: 9px;
border-left: 1px solid #E9EBEE;
margin-left: 50px;
padding-bottom: 0;
}

5- Clique em “Publicar” (botão azul)
6- Volte ao Wordpress
7- Clique em “Páginas” e abra a sua página (ou crie uma)
8- Coloque na página (abaixo do botão e, de preferência, numa nova sessão) um elemento novo de “HTML”
9- No HTML copie e cole o código abaixo:

<div id="comentarios_face">
<span class="titulo_comentario">32 comentários</span>
<div class="perfil">
<span class="nome"><img src="LINK1">Nome1</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 2 min</span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK2">Nome2</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 4 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK3">Nome3</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 5 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK4">Nome4</span>
<p>Escreva aqui o comentario dessa pessoa </p>
<span class="infos">Responder · Curtir · Seguir · 12 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK5">Nome5</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 19 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK6">Nome6</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 24 min</span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK7">Nome7 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 26 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK8">Nome8</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 31 min</span>
<div class="perfil perfil2">
<span class="nome"><img src="LINK9">Nome9</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 3 min </span>
</div>
<div class="perfil perfil2">
<span class="nome"><img src="LINK10">Nome8</span>
<p>Escreva aqui o comentario dessa pessoa </p>
<span class="infos">Responder · Curtir · Seguir · 3 min </span>
</div>
<div class="perfil perfil2"><span class="nome"><img src="LINK11">Nome10</span>
<p>Escreva aqui o comentario dessa pessoa</p><span class="infos">Responder · Curtir · Seguir · 3 min </span>
</div>
</div>
<div class="perfil">
<span class="nome"><img src="LINK12">Nome11</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 55 min </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK13">Nome12</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 58 min</span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK14">Nome13</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
<div class="perfil perfil2">
<span class="nome"><img src="LINK15">Nome14 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>
<div class="perfil perfil2">
<span class="nome"><img src="LINK16">Nome13 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>
</div>
<div class="perfil">
<span class="nome"><img src="LINK17">Nome15</span>
<p>Escreva aqui o comentario dessa pessoa </p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK18">Nome16 </span>
<p>Escreva aqui o comentario dessa pessoa </p><span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK19">Nome17</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>
<div class="perfil">
<span class="nome"><img src="LINK20">Nome18 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h</span>
<div class="perfil perfil2">
<span class="nome"><img src="LINK21">Nome19 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 46 min </span>
</div>
<div class="perfil perfil2">
<span class="nome"><img src="LINK22">Nome18 </span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 46 min </span>
</div>
</div>

<div class="perfil">
<span class="nome"><img src="LINK23">Nome20</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK24">Nome21</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK25">Nome22</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 1h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK26">Nome23</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 3h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK27">Nome24</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 2h </span>

<div class="perfil">
<span class="nome"><img src="LINK28">Nome25</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 2h</span>
</div>
<div class="perfil perfil2">
<span class="nome"><img src="LINK29">Nome26</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 3 min </span>
</div>

</div>

<div class="perfil">
<span class="nome"><img src="LINK30">Nome27</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 4h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK31">Nome28</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 4h </span>
</div>

<div class="perfil">
<span class="nome"><img src="LINK32">Nome29</span>
<p>Escreva aqui o comentario dessa pessoa</p>
<span class="infos">Responder · Curtir · Seguir · 5h </span>
</div>

</div>

10- Troque os itens necessários neste código acima, de acordo com a tabela abaixo:

Nome1, Nome2, Nome3, …

Coloque o nome de cada pessoa

LINK1, LINK2, LINK3, …

Coloque o link da imagem de perfil da pessoa. Cole o link entre as aspas “ “ , não tire elas.

“Escreva aqui o comentário dessa pessoa”

Escreva o comentário de cada pessoa

Abaixo é como vcs colocam as imagens....

1- Entre no Wordpress
2- Na Aba Esquerda clique em “Mídia”
3- Selecione a opção “Adicionar Nova” e faça o upload de todas as imagens dos perfis.

Para que as suas imagens de perfil não pesem o site, você precisa seguir exatamente essas configurações:

- Imagem redonda
- Imagem tamanho 80x80 pixels (assim elas ficarão leves)

Se você fez todos os itens anteriores, suas imagens estarão disponíveis para uso. Agora vamos pegar o link delas, para colocar em cada comentário.

4- Volte para a “Biblioteca”, dentro da Aba “Mídia”
5- Clique na imagem que deseja pegar o link
6- Do lado direito, ao lado de “URL do Arquivo”, estará o link da imagem
7- Coloque o link no comentário correspondente

É isso galera, se curtiram deixem um like aí e fiquem a vontade pra comentar.

@marcelomioto

Editado Julho 26, 2022 por Adulto Black