Substituindo a caixa de comentários do Blogger pela do Facebook

Compartilhar:
Olá querido leitor, hoje aprenderemos a como substituir a caixa de comentários do Blogger pela caixa de comentários do Facebook. É um processo bem simples e estamos atendendo o pedido do nosso leitor Nicolas. Mas, a plataforma não é tão legal assim, pois você não terá como saber quem comentou na postagem através do painel do Blogger. Vamos começar a criação da caixa de comentários? Então vamos!

1. Acesse a página de criação de aplicativos do Facebook e clique no botão Criar Novo Aplicativo. Como mostra a imagem.


2. Aparecerá uma pop-up com formulários para você digitar o que se pede.

Clique na imagem para ampliar
  • Nome de exibição do aplicativo: Coloque o nome do aplicativo, por exemplo, comentários;
  • Espaço de nome do aplicativo: Coloque um name user do do aplicativo, por exemplo, seublog. No mínimo de 7 carácteres.
Clique em Continuar.

3. Logo em seguida, digite as palavras que aparecem na caixa e clique e Enviar.

4. Depois, aparecerá uma espécie de painel de controle. Logo de início, encontra-se os detalhes do seu aplicativo. Procure por App ID ao lado da foto de seu aplicativo e guarde-a.


5. Faça o login no Blogger e acesse a guia Modelo, clique no botão Editar HTML e marque a caixa Expandir modelos de widgets, em seguida pressione Ctrl+F para abrir o Localizador do navegador e procure pelo código abaixo.

<div class='post-footer-line post-footer-line-3'/>

6. Depois de encontrado o código, cole o seguinte código abaixo do mesmo.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol  +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Substitua a parte destacada de vermelho pela ID que você copiou no passo 4.

7. Clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

8. Depois, acesse a guia Configurações > Postagens e Comentários, na guia Comentários e na opção Local do comentário escolha a opção Ocultar.


9. Clique em Salvar organização.

Pronto! Sua caixa de comentários do Blogger foi ocultada e a nova está pronta para ser usada por seus leitores. Mas lembre-se que você não saberá quem comentou, saberá somente através de sua conta de Facebook. Veja nosso outros artigos de plataformas de comentários. Até a próxima e abraços. 
► Postagens Relacionadas:

33 Comentários

Nicolas Danielski disse...

eu n sei como confirma a conta n tenho celular

7 de fevereiro de 2012 11:10
Kelleny Santos disse...

oi João você recebeu meu e-mail só falta você mandar o e-mail de autora pra mim confirmar seu post e ótimo

7 de fevereiro de 2012 13:49
João Almeida disse...

Tudo bem! Já enviei!

7 de fevereiro de 2012 20:53
João Almeida disse...

Bom, esse é o único modo de confirmar sua conta do Facebook. O jeito será você conseguir um celular.

7 de fevereiro de 2012 20:53
Álisson Zimermann disse...

Como faz pra ficar com o modelo dark? Fica muito claro pro meu blog =(

26 de março de 2012 11:01
João Almeida disse...

Isso não é possível, ele não tem personalização de cores.

26 de março de 2012 12:01
E.E.M Minas Gerais disse...

Ola...eu coloquei tudo certinho ta quase perfeito pena que ta cortando a opçao de responde quando chega na 2º vez de responde o 1º comentario para entender melhor acesse este link da imagem http://i.imgur.com/OcMnr.jpg

5 de junho de 2012 22:26
João Almeida disse...

Pelo que vi na imagem, você não estava logado. Então, ao invés de mostrar as opções normais, irá lhe pedir para você se conectar de algumas das contas oferecidas. Tente fazer o Login e me diga a resposta.

5 de junho de 2012 22:55
Cristian Sk disse...

Como eu saberei quando comentarem ?

18 de junho de 2012 06:03
João Almeida disse...

cristian, você será alertado na área de Notificações do Facebook.

18 de junho de 2012 15:19
Poul WoOsh Oficial disse...

como redimensionar o tamanho do plugin?

16 de agosto de 2012 15:47
João Almeida disse...

Isso você configura nas Configurações quando você está criando o plugin.

16 de agosto de 2012 17:50
Leonardo Brandão Gonçalves disse...

Cara, não tem essa linha



tem a 1 e a 2... ajuda ai :)

19 de agosto de 2012 21:26
João Almeida disse...

O DISQUS curta linhas de códigos. Por favor, entre em contato ou indique o passo do tutorial em que os códio se encontram.

19 de agosto de 2012 21:34
Danúbia Linhares disse...

Ola no meu deu tudo certo ficou uma parada de configuração em cima e quando clica dápra ver todas as minhas informações de ID como eu tiro isso já fui em configurar aplicativo mais não to conseguindo''/

26 de agosto de 2012 08:53
João Almeida disse...

Isso só aparece para os administradores do Aplicativo, que no caso é você. Não tem coo retirar.

26 de agosto de 2012 11:55
Danúbia Linhares disse...

Pois é eu percebi isso depois kkkk mais mesmo assim obrigada pela a ajuda !

26 de agosto de 2012 17:12
João Almeida disse...

Por nada. Obrigado e volte sempre!

26 de agosto de 2012 17:30
Anne Kelly disse...

O meu aparece q voc tem que adicionar a conta ao celular ou cartã de credito . não deu certo

13 de setembro de 2012 22:01
João Almeida disse...

Acho que você precisa confirmar... Seria melhor mostrar um screen shot do erro.

13 de setembro de 2012 22:12
Raquel disse...

Oi.....bem...pra mim não está aparecendo o texto:

clico na caixa de control f...e nao aparece nada....
seleciono a caixa de Expandir modelos de widgets mas tambem não acho...

3 de outubro de 2012 21:12
João Almeida disse...

Desculpe, não apareceu nada dos códigos postos. Por favor, entre em contato pela página de contato.

3 de outubro de 2012 23:36
pedrofelipe disse...

ei cara nao achei o


so tem o


20 de outubro de 2012 21:05
pedrofelipe disse...

Nao achei o

só tem o

20 de outubro de 2012 21:06
João Almeida disse...

Tente colocar o (footer-line-5).

20 de outubro de 2012 21:14
Emerson Carvalho disse...

Amigo, boa tarde! o Link criação de aplicativos ainda funciona? Não estou conseguindo seguir o Tutorial. Obrigado!

14 de novembro de 2012 14:27
João Almeida disse...

Aqui o link está funcionando corretamente. Caso ainda esteja dando errado, acesse: https://developers.facebook.com/apps/?action=create

14 de novembro de 2012 14:33
Gabriela Freitas disse...

Tem como redimensionar a largura da caixa de comentários do facebook? :/ queria adaptar para a mesma largura da área de postagem.

23 de novembro de 2012 16:27
João Almeida disse...

Desculpe a demora para responder. Infelizmente não tem como.

27 de novembro de 2012 15:09
Igor disse...

Como faço para diminuir o tamanho? no meu blog http://www.wormdowns.org/ não encaixou no tamanho certo!

23 de janeiro de 2013 19:14
João Almeida disse...

Procure por ]]> e acima dela, cole o código e personalize até ficar proporcional (width: auto;)

.comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

24 de janeiro de 2013 13:05
anapolo2 disse...

Cara, gostaria muito de agradecer, pois finalmente eu consegui colocar caixa de comentários do face no meu blog! Nossa, to muito feliz, pois venho tentando a meses. Encontrei o seu site na terceira página de procura no google, o que achei muita sacanagem, porque a sua explicação é a melhor! Enfim, muito obrigada! Olha aqui como ficou bonitinho hahaha: www.olacocorderosa.com

28 de maio de 2013 14:02
Bruno Bezerra disse...

Como é muito complicado, algumas pessoas que não sabem mexer com HTML migram para o Disqus, ou permanecem no Google mesmo.

24 de dezembro de 2013 15:11

Postar um comentário