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.
 |
Adicionar comentários do Facebook juntamente com o do
Blogger
|
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
 |
| Adicionando um novo
App |
Na janela que se abre, selecione www:
 |
| 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:
 |
| 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):
Display
name (Nome de
exibição): Escolha um nome para o aplicativo;
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
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 |
1.5 - Na
coluna lateral, selecione novamente o Dashboard
(Painel) e guarde o ID do aplicativo (ou deixe essa janela
aberta).
 |
| 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.
 |
| 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>
Caso
você seja de Portugal ou Espanha, ou qualquer outro país, troque
o pt_BR por pt_PT(Portugal), es_ES (Espanha)
ou a sigla correspondente ao seu país.
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;
}
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'>
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.
Quer a Box do Blogger antes da do
Face?
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.
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.
 |
| Ajustando as
notificações |
Social Plugin