Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

Comofaz: comentários no blog usando o Facebook

Uma das coisas que mais facilitou minha vida aqui no blog foi a opção de comentar usando o Facebook. Além de ser super fácil, acaba servindo de incentivo para deixar uma marquinha no post. Afinal, quase todo mundo tem uma conta na rede social, né? Isso sem contar que evita a necessidade de fazer login em outra conta, digitar as palavras de confirmação e tudo o mais que o Blogspot exige. 
Achei vários links ensinando a colocar o código no blog. Porém, a maioria deixava a caixa de comentários logo na página inicial. E como eu queria que aparecesse só no post, tive que fazer uns ajustes.
E como sempre me pedem um tutorial para ensinar a colocar a opção no blog, resolvi trazer para o JDB do jeito que eu fiz e reajustei. Vale lembrar que o código vem do Entenda Web, site que usei para colocar os comentários pelo Facebook aqui no Julie de Batom.
1. Antes de tudo, vá neste link e clique em “+ Criar novo aplicativo”. Coloque um nome para o aplicativo em “app name” e clique em continuar.
Salve no final da página que vai abrir. Como você vai precisar do “App ID/API Key”, é bom salvá-lo no bloco de notas ou em qualquer lugar que você tenha acesso depois. Por último, coloque o link do seu blog em “Website with Facebook login”.
2. Abra uma nova guia ou janela no seu navegador e entre no Blogspot. Antes de qualquer coisa, faça um backup para ter seu layout salvo por segurança.
Nessa mesma página, vá em Personalizar e, depois, em Editar HTML. Clique em “Expandir modelos de widgets” e localize a tag </head>. Logo abaixo dela você vai ver o começo da tag “<body>”. Cole o código abaixo dela:

<div id=”fb-root”></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : ‘YOUR_APP_ID‘, // App ID
      channelUrl : ‘//WWW.YOUR_DOMAIN.COM/channel.html’, // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    // Additional initialization code here
  };
  // Load the SDK Asynchronously
  (function(d){
     var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(‘script’); js.id = id; js.async = true;
     js.src = “//connect.facebook.net/pt_BR/all.js”;
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
Agora vamos às modificações:
Substitua YOUR_APP_ID pelo número do App ID/API Key (que pedi para salvar mais acima). Troque o WWW.YOUR_DOMAIN.COM pelo endereço do seu blog. 
3. Esta parte em diante é onde começo a personalizar do meu jeito. Por isso, vale lembrar que a caixa de comentários pelo Facebook vai ficar exatamente no mesmo lugar que a do Julie de Batom!
Localize a tag  <div class=’comments’ id=’comments’>. Logo abaixo dela, cole os dois códigos a seguir:

<div id=’fb-root’/>
<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 = &quot;//connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<div class=’fb-comments’ data-colorscheme=’light’ data-num-posts=’3′ data-width=’580′ expr:href=’data:post.url’/>
Vamos às modificações:
data-colorscheme=’light’: como o layout do JDB é claro, deixei esta opção. Se o seu for escuro, vale trocar light por dark.
data-num-posts=”3″: troque o número 3 pelo número de comentários que você quer que apareça.
data-width=’580′: troque o 580 pelo valor da largura que você quer. Tente deixar a mesma que a do post e área de comentários, assim fica mais proporcional.
expr:href=’data:post.url’: Esta expressão indica que cada post do seu blog terá comentários exclusivos. Caso deseje que os comentários sejam iguais para todos os posts, e eu não sugiro, substitua por: data-href=”http://WWW.SEUSITEOUBLOG.COM”
Visualize se está tudo OK e salve. Agora é só avisar aos leitores que seu blog possui um jeito mais fácil de comentar! 
Ah, uma coisa que eu percebi: às vezes, quando o post não tem nenhum comentário (pelo próprio Blogspot), a caixinha do Facebook não aparece. Ela só dá as caras depois que alguém já comenta pelo sistema normal do Blogger. Então, caso você não encontre a opção, não se assuste.
E vocês? Curtiram o tutorial? Vão colocar essa opção no blog de vocês? Conta pra gente!

Compartilhe o post

15 comentários

Deixe seu comentário!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *