Tags:

Como colocar comentários do Facebook no seu blog - Sem duplicar nos posts

- domingo, 20 de maio de 2012 128 Comentários

Olá pessoal,

Precisei revisar o post, pois os comentários estavam se repetindo em todos os posts. Segue então esta atualização corrigindo este erro.

Um amigo me pediu ajuda para colocar no blog dele comentários do Facebook e então resolvi realizar pesquisas para descobrir como se faz. Encontrei vários tutoriais, muitos deles complicados e alguns muito antigos. Após pesquisar bastante e testar algumas formas encontrei uma forma simples de fazer e que funciona de verdade.

Ninguém discute que o Facebook é uma superpotência da internet atualmente. Ele praticamente domina tudo o que diz respeito à redes sociais (onde só o Twitter pode competir). Tudo isso faz do Facebook seu perfeito aliado para gerar mais visitas para seu blog e usar o sistema de comentários deles integrado ao seu blog pode ajudar ainda mais na sua divulgação.

Esta forma que estou disponibilizando somente foi testada na plataforma do Blogspot, por isso não garanto que vá funcionar no wordPress, Tumblr ou outros. Caso queira tentar e depois postar um comentário, ficarei agradecido.

Além de acompanhar as instruções neste blog, você poderá também assistir ao vídeo explicativo.

Antes de tudo é necessário que você "prepare" o seu blog para receber aplicativos do Facebook.

Acesse: https://developers.facebook.com/apps
Clique em "+ Criar novo aplicativo"
Em "App Name" digite um nome para o App e clique em continuar. Salve no final da página que irá abrir. Você irá precisar do número do "App ID/API Key", salve-o no bloco de notas.

Sugiro que preencha o campo "Website with Facebook Login" com o endereço do seu blog.

Vá até a administração do seu blog em uma nova aba. Clique em "Modelo" e depois em "Editar Html".
É altamente aconselhável fazer um backup antes de fazer estas alterações.

Com o código HTML aberto marque a opção "Expandir modelos de widgets" e localize a TAG </head>. Logo abaixo dela terá uma outra <body (mais alguma coisa)>

Copie o código abaixo e cole abaixo da TAG <body.

<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>

Você deverá substituir WWW.YOUR_DOMAIN.COM pelo endereço do seu blog, e, YOUR_APP_ID pelo número do "App ID/API Key" que você criou anteriormente no aplicativo.

Este plugin já estará em português brasileiro, mas caso você deseje mudar para o português de Portugal basta modificar o "pt_BR " para "pt_PT", ou, ainda para o inglês modifique para "en_US". Caso necessite pode modificar para outra língua, basta conhecer o código.

Localize agora uma destas duas TAGs: <data:post.body/> ou <div class='post-footer-line post-footer-line-1'/>.

Abaixo desta TAG deverá colar os seguintes códigos:

<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='dark' data-num-posts='3' data-width='580' expr:href='data:post.url'/>

Algumas modificações podem ser feitas neste plugin, basta alterar alguns valores do código acima, veja abaixo:

data-colorscheme='dark' - Como o layout do EntendaWeb é escuro, utilizei o tem "dark". A outra opção é alterar para "light", veja qual dos dois melhor se adapta ao seu blog.
data-num-posts="3" - Refere-se à quantidade de comentários (posts) que você deseja exibir no plugin, altere a numeração conforme desejar.
data-width='580' - Este valor representa a largura do plugin, quanto maior o número, mais largo será. Altere este valor e veja qual largura será melhor para o seu blog.
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"

Pronto, salve as modificações e visualize o seu blog. Terminado estes passos já estará instalado o social plugin de comentários do facebook.

Acompanhou passo a passo? Testou? Deu certo?

Então compartilhe.

ROLOU NO ENTENDA WEB

Como colocar comentários do Facebook no seu blog - Sem duplicar nos posts