Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

09/07/2014

Tutorial - Comentários do Facebook e do Blogger juntos no blog!

É o seguinte, alados meus, o tutorial a seguir nada mais é do que uma versão renovada, completa e explicada em miúdos de outro tutorial da net. Desde já, deixo claro que a minha intenção é unicamente a de ajudar os blogueiros que não conseguiram entender o tutorial original, já que a interface dos apps do Facebook mudou e também porque muitos preferem um tutorial mais "mastigado". Caso queiram ver o tutorial original que me serviu como fonte, no "Dicas para Blogs", basta clicar neste link.
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:
<html xmlns: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'/>
<meta content='SEU_NÚMERO_APP_ID' property='fb:app_id'/>
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".

Agora procure por <body e, depois do fechamento dessa tag (ou seja, depois do >), cole o seguinte código:
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &quot;//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=SEU_NÚMERO_APP_ID&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;
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.

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] -->
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
window.document.getElementById(&#39;blogger-comments-page&#39;).style.display=&quot;block&quot;;
window.document.getElementById(&#39;fb-comments-page&#39;).style.display=&quot;none&quot;;
window.document.getElementById(&#39;blogger-comments&#39;).style.background=&quot;#ffffff&quot;; //cor da aba ativa editavel
window.document.getElementById(&#39;fb-comments&#39;).style.background=&quot;#d1d1d1&quot;; // cor da aba inativa editavel
} else if (tipo == 2) {
window.document.getElementById(&#39;fb-comments-page&#39;).style.display=&quot;block&quot;;
window.document.getElementById(&#39;blogger-comments-page&#39;).style.display=&quot;none&quot;;
window.document.getElementById(&#39;fb-comments&#39;).style.background=&quot;#ffffff&quot;; // cor da aba ativa editavel
window.document.getElementById(&#39;blogger-comments&#39;).style.background=&quot;#d1d1d1&quot;; // cor da aba inativa editavel
}
}
window.onload = function(){
showComments(1);
}
</script>
Todos os códigos hexadecimais que estão destacados em vermelho podem ser trocados para a cor que você desejar. Não apague nenhum &quot!!!
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'>
<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 == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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'>
Agora, se for colocar os comentários do Facebook para aparecer primeiro, coloque esse código azul:
<div class='comments-tab' id='fb-comments' onClick='showComments(1);' 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='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 == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='670'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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'>
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!)
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 {
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;
}
Todos os trechos que destaquei em vermelho podem ser personalizados de acordo com o seu gosto. Quando tudo estiver OK, salve o modelo.

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,
6 Comentários
Comentários

6 comentários:

  1. Sheila, que post maravilhoso! Aliás, seu blog é todo maravilhoso hahaha
    Muito obg, até eu que sou péssima nessas coisas consegui fazer e deu certo!
    Parabéns pelo blog! um mega bju

    ResponderExcluir
  2. Interessante, tentei esse tutorial no meu blog, mas o espaço pra comentar no facebook sempre ficava "por cima" do espaço de comentar pelo blogger, aí você tinha que ficar trocando de aba pra comentar normalmente com o perfil do blogger... Acabei tirando, já é dificil receber comentarios, imagina dificultando a operação? haha'

    Mas vi aqui que o do blogger vem primeiro, depois o do face. Talvez eu tente ^^

    ResponderExcluir
  3. Consegui colocar, porem não to conseguindo colocar para os comentários do blogger aparecer primeiro, como tá aqui no blog por exemplo. Sempre fica o facebook primeiro. HELP!

    ResponderExcluir
    Respostas
    1. Olá, Carlos!

      Respondendo à sua dúvida no meu tutorial, verifique se o código que eu destaquei em laranja foi colocado duas vezes. No caso de ter editado alguma parte do código, verifique se você não acabou apagando algo sem querer. Se ainda não der certo, recomendo que coloque o template anterior (caso tenha feito um Backup) e repita o processo.
      Lembrando que às vezes templates muito modificados também podem atrapalhar o funcionamento dos códigos. Tente colocar o código num blog de testes com o template padrão do Blogger. Se der errado, reporte para mim o resultado que eu tentarei ver o que há de errado com o código.

      Beijinhos Alados ♥

      Excluir
    2. Obrigado pelo retorno! Coloquei o código no blog de testes e funcionou. A aba do blogger tá ativa pra aparecer primeiro. Mas no meu blog mesmo, continua com a aba do facebook. Vou continuar mexendo aqui pra ver se consigo resolver. Obrigado.

      Excluir
  4. Oi Sheila,espero que tenha conseguido...rs ...muito bom seu blog bjs

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados