.

terça-feira, 12 de fevereiro de 2013

Sistema de comentários do Facebook no seu blog

Olá, neste tutorial irei ensinar a vocês como colocar o sistema de comentários do Facebook no seu Blogger.
O Facebook vem ganhando mais espaço a cada dia, não só no Brasil, e torna-se portanto, difícil de encontrar alguém conectado que não possua uma conta na rede social. Com o aumento no número de usuários, cresce também o interesse de alguns blogueiros em aderir o sistema de comentários do "Face", para os mais íntimos, no seu blog.

NÃO SE ESQUEÇA DE FAZER BACKUP DO SEU TEMPLATE ANTES DE QUALQUER ALTERAÇÃO!

Criando o aplicativo

1. Acesse este link https://developers.facebook.com/apps e selecione a opção "+ Criar um aplicativo".

 Clique para ampliar

2. Escolha um nome para seu app
Após clicar na opção, irá aparecer um box. Insira um nome qualquer para seu aplicativo em 'App name' e em 'Espaço de nome do aplicativo'. Clique em continuar.

 Clique para ampliar

Pronto! Seu aplicativo está pronto para ir ao seu blog! Lembre-se de copiar o ID do seu APP, você vai precisar dele nas próximas etapas.

Clique para ampliar

Adicionando-o ao seu blog

1. Vá no painel do seu blog
2. Clique em Modelo > Editar HTML
3. Marque a opção "expandir modelos de widgets"
4. Busque por (Ctrl + F):
<head>

5. Cole abaixo o código:
<meta property='fb:app_id' content='ID DO APP' />

  • Substitua:
ID DO APP pelo ID do seu aplicativo

6. Agora  localize o código (Ctrl + F):
<body

7. Logo abaixo, cole o seguinte código:
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'ID DO APP', // App ID
      channelUrl : '//www.seublog.blogspot.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>
  • Substitua:
ID DO APP pelo id do seu aplicativo
www.seublog.blogspot.com pelo domínio do seu blog

8. Procure por:
<data:post.body/>

Se não encontrar, busque:
<div class=’post-footer-line post-footer-line-1‘/>

9. Cole logo abaixo:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='420' expr:href='data:post.url'/> </b:if>

 Ajustando o widget
  • data-width='420': Largura do widget, ajuste o '420' para o tamanho ideal do seu blog
  • data-num-posts='3': Número de comentários apresentados no widget. Mude '3' para o número que achar ideal.
  • data-colorscheme='light': Se o fundo do seu blog for branco, não altere nada. Caso for escuro, você pode trocar 'light' por 'dark'.
Ocultando comentários Blogger
Se você deseja colocar apenas os comentários do Facebook no seu template, você vai precisar ocultar o sistema de comentários padrão do blogger. Para fazer isso vá em:
Painel do Blogger > Configurações > Postagens e comentários >  Procure em 'Comentários' por 'local do comentário', clique no menu de opções  e selecione "ocultar".

Moderação de comentários

Acesse http://developers.facebook.com/tools/comments para moderar e visualizar os comentários.

DICAS ;) - Adicionando o widget, os comentários ficarão logo abaixo da postagem, acima dos marcadores. Isso pode incomodar algumas pessoas, então aí vão algumas dicas para ajustar um pouco mais o código:
1. Caso os comentários estejam muito "colados" com o post, ou os marcadores e você deseja dar um espaço entre os comentários, coloque <br> antes do código da etapa 9, e depois </br>.
Ficará mais ou menos assim:
<br>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='420' expr:href='data:post.url'/> </b:if></br>

2. Se você preferir que o código fique logo abaixo dos marcadores, e acima do sistema de comentários padrão do Blogger, pegue o código da etapa 9, e vá colocando ele um pouco mais abaixo de <data:post.body/>, tente colar ele em alguns lugares mais abaixo até ficar no lugar ideal. 

Obrigado pela visita, se tiver alguma dúvida, é só comentar!

1 Comentário:

diva e maquiada disse...

No blog teste deu certo mas no meu nao apareceu!revolta! será que é por causa do aplicativo que é omesmo?
http://francimakeup.blogspot.com.br/
http://testeblog86.blogspot.com.br/
Valeu!!

Postar um comentário

  ©Ajudando Blogger - Todos os direitos reservados.

Template by Dicas Blogger | Topo