Se você quer dar mais uma opção para os seus leitores
comentarem no seu blog e
ao mesmo tempo promovê-lo, você está lendo o post certo.
Aqui, ensinaremos como pôr acaixa de comentário
atualizada do Facebook e manter a caixa de comentário
do blog, assim, o leitor poderá escolher um dos dois para
comentar. Ensinaremos também como moderar esses comentários e como ser
notificado quando alguém comentar.
Infelizmente, o tutorial é grande, mas está bem
explicadinho, "nos seus mínimos detalhes". Está dividido em três etapas para
melhor visualização. Então, vamos lá!
1 - Criando um "app" (aplicativo) no Facebook
1.1
- Primeiramente,
deve-se criar um aplicativo no Facebook.
Para isso, acesse https://developers.facebook.com/apps/ e clique
em +Add a
New App (Adicionar um novo aplicativo).
 |
| Adicionando um novo App |
Na janela que se abre, selecione www:
Após isso, você será levado para outra página que
mostrará alguns de seus aplicativos, caso vocês os tenha. Ignore isso e clique
em Skip
and Create App ID:
Na janela que se abre, preencha o que se pede
(Observação: pode ser que estas opções já estejam traduzidas):
 |
| Selecione www |
 |
| Clique em Skip and Create App ID |
Display
name (Nome de
exibição): Escolha um nome para o aplicativo;
Contact Email (Email de contato): Coloque o seu e-mail de contato;
Contact Email (Email de contato): Coloque o seu e-mail de contato;
Namespace: Coloque o mesmo nome de cima, só que sem espaço (e
sem acentos);
Is this a test version... (Esta é uma versão de teste de outro aplicativo?): Não
Is this a test version... (Esta é uma versão de teste de outro aplicativo?): Não
Categoria: escolha "Apps for Pages (Aplicativos para
Páginas)".
E clique em Create
App ID (Criar um ID do Aplicativo).
 |
| Criando o aplicativo |
Aparecerá uma janela chamada Security Check. Basta
preenchê-la com o que for pedido e clicar em Submit.
Por exemplo, pode ser pedido para que você selecione as imagens que têm uma
flor.
1.2 - Finalmente,
você estará com o Aplicativo criado, mas precisará configurar algumas coisas. Na
coluna de opções, selecione Settings
(Configurações) e preencha os campos que ainda não estejam
preenchidos:
App
Domains (Domínios
do aplicativo): Digite aqui o endereço do seu blog, sem o "https":
 |
| Coloque o endereço do seu blog sem o "https" |
1.3 - Depois, ainda nessa janela, clique
em + Add
Platform (+Adicionar Plataforma) e selecione “Site”.
Na aba que aparecer, em Site
URL, adicione o endereço completo do seu blog,
com o https://. Clique em Save
Changes (Salvar alterações).
 |
| Adicionando endereço completo do blog |
1.4
- Agora, vá
para App
Review (Revisão do
Aplicativo) (1), clique em "Yes (Sim)" (2) para tornar o
App público e clique em Confirm (3):
 |
| Tornando o App público |
 |
| Guarde o ID do seu aplicativo |
2 - Colocando os códigos no template do blogger
2.1 - Vá
para o painel do seu blog, selecione “Modelo” e
clique em Editar
HTML:
ATENÇÃO:
* Antes de qualquer alteração no seu template, faça o backup do mesmo.
* Recomendamos que você crie um blog de teste e faça os passos lá. Se tudo ocorrer bem, você poderá aplicá-lo ao seu blog principal.
*Não nos responsabilizamos por quaisquer danos causados pelo seguimento deste tutorial.
* Antes de qualquer alteração no seu template, faça o backup do mesmo.
* Recomendamos que você crie um blog de teste e faça os passos lá. Se tudo ocorrer bem, você poderá aplicá-lo ao seu blog principal.
*Não nos responsabilizamos por quaisquer danos causados pelo seguimento deste tutorial.
 |
| Não esqueça de fazer o backup antes de qualquer alteração |
2.2 - Agora, clique em qualquer área dentro do editor de códigos e aperte Ctrl+F para abrir uma caixa de busca dentro do próprio template.
ATENÇÃO: Você deve clicar em qualquer área do editor de texto (1), e não fora dela. Após deixar o cursor piscando nela, você aperta Ctrl+F para abrir a caixa de busca dentro dele (2), e não fora. Veja na imagem abaixo:
 |
| Como procurar partes do código no Blogger |
2.3 - Nessa caixa de pesquisa, procure por </head>, cole antesdele o seguinte código e clique em “Salvar modelo”:
Atualização (13 de abril de 2016): Este código foi atualizado. Caso você tenha acessado este tutorial anteriormente, localize essa parte e faça a substituição do anterior. Obs.: o código anterior ainda está em funcionamento.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SEU_APP_ID',
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<meta content='SEU_APP_ID' property='fb:app_id'/>
<script type='text/javascript'>
function commentToggle(comentario) {
if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';
window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
} else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>
window.fbAsyncInit = function() {
FB.init({
appId : 'SEU_APP_ID',
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_BR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<meta content='SEU_APP_ID' property='fb:app_id'/>
<script type='text/javascript'>
function commentToggle(comentario) {
if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';
window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
} else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>
2.4
- Troque SEU_APP_ID pelo ID do
aplicativo que você acabou de criar. (Cuidado para não
retirar as aspas).
Atualização (15 de novembro de 2016): A documentação do Facebook diz que você deve configurar o ID do Aplicativo ou de sua conta, não ambos. Então, não precisa mais descobrir qual é o ID da sua conta.
2.5 - Agora vamos inserir os
códigos CSS. São eles que darão
a aparência e estilo da box do Facebook e do Blogger. Procure
por ]]></b:skin>,
cole esse código antes dele
e clique em “Salvar modelo”:
.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;}
.comments-page .fb_iframe_widget,
.comments-page .fb_iframe_widget span,
.comments-page .fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}
#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;}
.comments-page .fb_iframe_widget,
.comments-page .fb_iframe_widget span,
.comments-page .fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}
2.6 - Ainda não há nenhuma alteração visível no seu blog.
Procure por <div class='comments'
id='comments'> e cole o seguinte
código depoisdessa
linha.
Obs.: Você deverá encontrar dois resultados para essa
busca. Cole o código nas duas ocorrências, caso contrário, a box poderá aparecer
ou não em algumas postagens.
<div
class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btface.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentário(s)
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btblogger.png'/> <data:post.numComments/> Comentário(s)
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType != "index"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light' />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btface.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentário(s)
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docjoanir/img/btblogger.png'/> <data:post.numComments/> Comentário(s)
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType != "index"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light' />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Caso você tenha encontrado apenas um <div
class='comments' id='comments'>, procure por <div
class='comments'> ou <div
id='comments'> e cole também o código abaixo dele.
Note que destacamos o "light". Ele é o valor padrão para a sua box do Face. Caso seu template seja escuro, troque o "light" pelo "dark" e veja o que acontece.
Note que destacamos o "light". Ele é o valor padrão para a sua box do Face. Caso seu template seja escuro, troque o "light" pelo "dark" e veja o que acontece.
Quer a Box do Blogger antes da do Face?
Se você quiser que a Box do Blogger esteja
selecionada por padrão e apareça antes da Box do Face, acesse: Colocar os comentários do Blogger antes dos comentários do
Facebook.
A box do Facebook não está aparecendo. E agora?
Se você seguiu todos os passos até aqui e
a box do
Facebook não apareceu (ou apareceu parcialmente), siga esse tutorial que escrevi
hoje (22 de junho de 2015) apontando algumas causas e soluções para esses
problemas: Bug nos
comentários do Facebook no Blogger
3 - Moderando os comentários do Facebook
Com todos os códigos colocados, agora precisamos
configurar a moderação. Se alguém comenta algo no seu blog, você precisa receber
uma notificação para que saiba que essa pessoa comentou, não é mesmo? O Facebook
oferece essa funcionalidade nessa box, desde que esteja tudo configurado
corretamente. Lembra dos IDs pedidos no passo 2.4? Eles servem para o Facebook
saber que você é o administrador do blog onde
a box está inserida e pra qual App enviar
os dados comentados.
3.1 - Então, acesse: https://developers.facebook.com/tools/comments e você verá seu Painel de Controle de comentários. Adicione esse endereço aos seus favoritos, pois é bom que você faça visitas periódicas a ele.
3.1 - Então, acesse: https://developers.facebook.com/tools/comments e você verá seu Painel de Controle de comentários. Adicione esse endereço aos seus favoritos, pois é bom que você faça visitas periódicas a ele.
Clique em configurações:
 |
| Moderar comentários |
3.2 - Na
janela que abrir, adicione-se como moderador. Veja abaixo o que significa cada
uma das opções:
Atualização (13 de abril de 2016): Esta janela foi atualizada e agora está dividida por abas. Faça as observações necessárias para aplicar as configurações abaixo.
Moderators: Adicione
pessoas que poderão moderar os comentários feitos. Adicione-se
também;
Blacklisted Words: Escreva
aqui algumas palavras que serão bloqueadas na box. Comentários que as contenham
ficaram ocultos e irá para a aba "hidden". Lá, você pode torná-lo público ou
não;
Comment Length Limit:
Defina até quantos caracteres poderão ter em um comentário;
Enable Attachments: Ative a
anexação de imagens nos comentários;
Sort Comments By: Defina a
ordem em que os comentários aparecerão: Top (mais populares), Newest (novos
primeiros) e Oldest (antigos primeiros);
Moderation: Public (os
comentários serão públicos automaticamente; Review Blacklisted Comments(os
comentários que conterem as palavras bloqueadas definidas estarão ocultos
passivos à moderação) e Closed (todos os comentários estarão ocultos e apenas os
comentários que não estiverem na lista de palavras bloqueadas ficarão passíveis
de moderação);
Notifications: Defina se
você e outros moderadores serão notificados a cada comentário novo.
Se você tem uma página do Facebook dedicada ao seu blog, ative o Espelhamento de comentários. Assim, os comentários feitos nos seus posts também aparecerão na sua página.
Se você tem uma página do Facebook dedicada ao seu blog, ative o Espelhamento de comentários. Assim, os comentários feitos nos seus posts também aparecerão na sua página.
 |
| Ajustando as notificações |
