Enfim, hoje ensinarei como colocar esse sistema de comentários que coloquei aqui no DSA, que permite que os leitores comentem também pelo Facebook, além da opção padrão de comentários do Blogger. Quer saber como? Continue lendo e siga o passo a passo!
Comentários do Facebook e do Blogger juntos no blog!
Primeiro você precisará criar um app no próprio Facebook. Para isso, acesse: https://developers.facebook.com/ e clique em "Apps > Create a New App". Vai abrir o seguinte formulário:
Em "Display Name" coloque o nome do seu aplicativo e em "Namespace" coloque um nome único para ele (sem letras maiúsculas e nem espaços). Depois é só escolher uma categoria qualquer e clicar em "Criar Aplicativo". Você terá que digitar umas letras de confirmação e também precisará confirmar a sua conta (caso ela não esteja confirmada). Para confirmar, basta informar um número de celular com o DDD na frente (sem o zero, nem hífen, nem espaços). O Facebook enviará um número via SMS, que você deve escrever no espaço indicado (pode também pedir um celular emprestado para alguém, não tem problema).
Depois que seu app já estiver criado, aparecerá o Painel de Controle do mesmo. Guarde bem o número que aparece em "App ID", pois nós o usaremos mais de uma vez nesse tutorial.
Depois de guardar o número em algum lugar, clique em "Settings". Abrirá seguinte página:
Conforme eu destaquei com a segunda seta, clique em "+ Add Platform". Abrirá a seguinte janelinha:
Escolha a opção "Website". Veja que apareceu mais dois campos:
Preencha o formulário da seguinte forma: em "App Domains", escreva o endereço do seu blog sem o" http://". Se o seu blog foi feito quando ainda era ".blogspot.com", coloque dessa forma: nomedoseublog.blogspot.com. Se o seu blog tem Domínio Personalizado, coloque o domínio apenas com o "www". Já em "Site URL", escreva o mesmo endereço anterior, só que com o "http://".
Por fim, clique em "Save Changes".
Colocando o código no blog:
Antes de prosseguir, peço que você faça um backup do seu template atual (é só clicar no botão "Fazer Backup/Restaurar" na aba "Modelo"). Esse backup garantirá que, caso algo dê errado durante a execução do tutorial, você possa restaurar o template anterior.
Agora sim, nós vamos mexer no código do seu template. No seu Painel do Blogger, clique em "Modelo" e depois no botão "Editar HTML". Logo na terceira linha do seu código deve estar a tag de abertura <html Exatamente depois dela, adicione o seguinte código (e dê um espaço antes e depois dele):
xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema'O seu código vai ficar mais ou menos assim:
<htmlxmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema'b:version='2' class='v2'Entendeu? O código tem que ficar entre o "<html" e o "b:version='2'", separado apenas por espaços. Depois clique em "Salvar Modelo" (sempre salve o modelo toda vez que eu disser para salvar, isso é muito importante!)
Agora clique em qualquer parte do código e aperte as teclas "Ctrl + F" no seu teclado. Na caixinha que abriu, escreva <head> e aperte a tecla "Enter". Abaixo do trecho que ficou destacado, cole o código:
<meta content='SEU_USER' property='fb:admins'/>Onde está escrito SEU_USER, substitua pelo nome que vem no final do link do seu perfil do Facebook, depois da barra (ou seja, http://facebook.com/seuuser). Já em "SEU_NÚMERO_APP_ID" , coloque aquele número que eu destaquei lá em cima, quando criamos o aplicativo, o seu App ID. Essas duas metatags vão dizer à página quem é o administrador daquele aplicativo. Depois clique em "Salvar Modelo".
<meta content='SEU_NÚMERO_APP_ID' property='fb:app_id'/>
Agora procure por <body e, depois do fechamento dessa tag (ou seja, depois do >), cole o seguinte código:
<div id="fb-root"></div>Mais uma vez, em "SEU_NÚMERO_APP_ID" , coloque aquele número que eu destaquei lá em cima, quando criamos o aplicativo. Depois, salve o modelo novamente.
<script>(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/all.js#xfbml=1&appId=SEU_NÚMERO_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Agora procure por </head> e, logo acima, cole o seguinte código:
<!-- script para Comentários do Blogger e Facebook Simultaneamente - Sem bugs! [Autoria de Yara G. - www.seethehalo.net] -->Todos os códigos hexadecimais que estão destacados em vermelho podem ser trocados para a cor que você desejar. Não apague nenhum "!!!
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
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"; //cor da aba ativa editavel
window.document.getElementById('fb-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
} else if (tipo == 2) {
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"; // cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
}
}
window.onload = function(){
showComments(1);
}
</script>
Note que também destaquei, em azul, o número 1. Caso você queira que os seus comentários do Blogger apareçam primeiro, deixe o número como está. Se quiser que os comentários do Facebook apareçam primeiro, substitua-o por 2. Quando tudo estiver pronto, salve o modelo novamente.
Agora procure por <div class='comments' id='comments'>. No seu template, esse código aparecerá duas vezes, e depois de ambos você deve colocar um dos códigos abaixo (ou seja, você vai colar o mesmo código duas vezes). Se você for colocar os comentários do Blogger para aparecer primeiro, coloque esse código laranja:
<div class='comments-tab' id='blogger-comments' onClick='showComments(1);' title='Comentários no Blogger'>Agora, se for colocar os comentários do Facebook para aparecer primeiro, coloque esse código azul:
<img class='comments-tab-icon' src='https://sites.google.com/site/docesonhodemenina/Blogger_logo_glossy.png'/> <data:post.numComments/> Comentários
</div>
<div class='comments-tab' id='fb-comments' onClick='showComments(2);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docesonhodemenina/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments-tab' id='fb-comments' onClick='showComments(1);' title='Comentários no Facebook'>Em ambos os códigos, você pode trocar o número 10 que destaquei em vermelho pelo número de comentários do Facebook que você deseja que apareça em cada página. O número 670 em vermelho também pode ser trocado pela largura que você quer que seus comentários do Facebook tenha (coloque os dois números iguais!)
<img class='comments-tab-icon' src='https://sites.google.com/site/docesonhodemenina/facebook.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab' id='blogger-comments' onClick='showComments(2);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='https://sites.google.com/site/docesonhodemenina/Blogger_logo_glossy.png'/> <data:post.numComments/> Comentários
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Depois que tudo estiver OK, salve o modelo mais uma vez.
Agora vamos mudar a aparência dos comentários do Facebook usando o CSS. Procure por ]]></b:skin> e cole o seguinte código acima dele:
.comments-page {Todos os trechos que destaquei em vermelho podem ser personalizados de acordo com o seu gosto. Quando tudo estiver OK, salve o modelo.
background-color: #ffffff; /* use a mesma cor que você colocou lá no script */
}
#blogger-comments-page {
padding: 0px 5px;
display: none;
}
.comments-tab {
float: left !important;
padding: 5px !important;
margin-right: 3px !important;
font-size: 18px !important;
cursor: pointer !important;
background-color: #f2f2f2;
}
.comments-tab-icon {
height: 32px !important;
width: 32px !important;
margin-right: 3px !important;
}
.comments-tab:hover {
background-color: #eeeeee !important;
}
Para receber as notificações no seu perfil do Facebook:
Para terminar esse gigantesco tutorial, acesse o seguinte link:https://developers.facebook.com/tools/comments?view=recent_comments
A página que abrirá é a sua página de administrador dos comentários. Clique no link azul "Configurações", esse mesmo da imagem a seguir:
Vai abrir uma janelinha com várias opções. No lugar onde diz "Moderadores" você deve escrever o seu próprio nome e clicar nele. Com isso, você estará adicionando a si mesmo como moderador, e sempre será notificado quando novos comentários forem feitos. Veja só como a janelinha deve ficar:
Depois de ajustar as demais configurações, de acordo com o seu gosto, clique em "Salvar".
Pronto! A partir de agora você terá os comentários do Facebook no seu blog e receberá todas as notificações (menos quando você mesmo comentar, é claro!) Espero que o meu tutorial tenha ajudado.
Beijinhos Alados,
