Lovable Maria: Comentários do Facebook no Blogger


Recentemente mostrei aqui mesmo no blog como colocar uma caixa de comentários do Facebook no WordPress, para que os visitantes possam fazer comentários usando o Facebook.

Agora chegou a vez do Blogger, vou mostrar como fazer o mesmo para quem usa a plataforma Blogger, vamos colocar uma caixa de comentários no final de cada postagem permitindo que os visitantes façam comentários via Facebook, e importante sem repetir os comentários.

– Veja também:

Em alguns tutoriais as pessoas conseguem colocar a caixa do Facebook só que quando se comenta em uma página, esse comentários aparece em todas as páginas, dessa forma que vou mostrar nos testes não apareceu, cada comentários só apareceu na página em que foi feito.

Veja como ficará na imagem abaixo:

89897

O Tutorial será separado em duas etapas, na primeira vou mostrar como criar uma ID no Facebook e na segunda etapa como colocar no Blogger.

Criando nossa ID no Facebook

1º Passo: Entre no seu Facebook normalmente já que é preciso estar logado para poder criar um aplicativo que no nosso caso é uma caixa de comentários.

Já logado em seu Facebook clique no link abaixo para ir direto na página de criação de aplicativos:

Criar meu Aplicativo

2º Passo: Agora clique em “Apps” e depois em “Register as a Developer“:

789789889

3º Passo: Mude essa chave de “Não” para “SIM” para aceitar os termos do Facebook e clique em “Próxima“:

8974566464

4º Passo: O próximo passo é verificar sua conta via mensagem de texto, onde você deve informar um número celular, clicar em “Send as Text” e esperar receber um código em seu celular. Esse código deve ser informado na tela e com isso, continuar clicando em “Cadastrar-se“:

7894544444

5º Passo: Após confirmar sua conta você deve novamente clicar em “Apps” e depois em “Add a New App” ou então clicar em “Website” como na imagem abaixo:

7894545454

6º Passo: Agora clique em “Skip Quickstart” no canto superior direito:

565646

7º Passo: Parar criar o aplicativo escolha uma nome para você identificar o aplicativo, um nome de usuário, uma categoria e clique em “Criar aplicativo“:

123454787787

8º Passo: Pronto! Agora já podemos ver nossa ID em “ID do aplicativo”. NÃO feche a página ainda!:

00014898

9º Passo: Copie o código abaixo e cole em um bloco de notas por exemplo:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
  2. <script src='http://code.jquery.com/jquery-latest.js'/>
  3. <meta content='ID-DO-APLICATIVO' property='fb:admins'/>

Agora sim você copia os números da sua ID do passo quatro e coloca no lugar do “ID-DO-APLICATIVO” do passo cinco. Ficará assim:

132467897

Colocando no Blogger

1º Passo: Entre no painel do seu Blogger e clique em “Modelo” e depois em “Editar HTML“:

124747787878

2º Passo: Clique levemente sobre o código do seu blog, aperte “CTRL + F” e procure por:

E abaixo desse código cole o código do bloco de notas já com sua ID:

22257897897

3º Passo: Agora clique no botão “Ir para um widget” e selecione “Blog1“:

252578789

4º Passo: Encontrando nosso widget de nome “Blog1” na frente dele clique na setinha preta para se expandir:

897895646545

5º Passo: Nesses novos códigos que se expandiu, procure por:

E assim que encontrar clique na setinha preta na frente dele:

12311212345578789

6º Passo: Assim que clicar na seta vai se expandir outros códigos e logo abaixo deles cole o seguinte código:

Fundo claro

8978979

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <div class='comments-page' id='fb-comments-page'>
  2. <b:if cond='data:blog.homepageUrl != data:blog.url'>
  3. <div id='fb-root'/>
  4. <fb:comments expr:href='data:post.url' num_posts='52' width='620'/>
  5. </b:if>
  6. </div>
  7. <div class='comments comments-page' id='blogger-comments-page'/>

Fundo escuro

87879

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL
  1. <div class='comments-page' id='fb-comments-page'>
  2. <b:if cond='data:blog.homepageUrl != data:blog.url'>
  3. <div id='fb-root'/>
  4. <fb:comments data-colorscheme='dark' expr:href='data:post.url' num_posts='52' width='520'/>
  5. </b:if>
  6. </div>
  7. <div class='comments comments-page' id='blogger-comments-page'/>

Veja na imagem abaixo como ficará:

1234589897

7º Passo: Pronto! Agora basta clicar em “Salvar modelo” e ver como ficou!:

124568798

Detalhe: Se o tamanho da caixa de comentários ficar menor ou maior do que a largura do seu blog você pode mudar a largura da caixa no código acima em:

Vídeo Tutorial

Importante

Veja agora como fazer para você moderar os comentários recebidos pelo sistema de comentários do Facebook em seu blog: