Divulgar seu blog não é uma tarefa fácil, por isso que não devemos deixar de usar as ferramentas que estão a nossa disposição para que o seu blog seja conhecido. E por isso neste tutorial irei mostrar como colocar o sistema de  comentários do facebook no blogger.

Por que usar comentários do facebok em meus artigos é vantajoso?

Temos duas respostas: A primeira é que, quando uma pessoa comenta um artigo, além de ser mostrado no blog será mostrado na linha do tempo de quem comentou, assim seu link estará sendo divulgado para mais pessoas. O segundo ponto é que, em termos SEO, quanto mais divulgação nas redes sociais seu blog obtiver, mais relevante será seu blog nas pesquisas.

Pois bem, após esta pequena explicação vamos ao que realmente interessa neste tutorial.

1. Crie um Aplicativo: Para isto clique AQUI
2. Na página aplicativos clique em

  

 3. Após clicar no botão, irá abrir um box, onde você colocará o nome do seu aplicativo, no mome de espaço você pode repetir o mesmo nome com acrescimo de alguma letra. Escolha a categoria e clique em criar aplicativo.


4 Pronto seu aplicativo foi criado, agora você poderá configurar, personalizar seu app,  mais neste turorial você só irar precisar do "App ID".

Voltando para o blog acesse Painel do seu blog > Modelo > Editar HTML
Dê Ctrl+F e pesquise <body 
Clique em expandir modelos widgets

Abaixo da linha cole o código abaixo:
<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {

    FB.init({

      appId      : 'APPID', // App ID

      channelUrl : '//www.seudominio.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>
 Onde está escrito em detalhe vermelho troque pelo numero do seu "APP ID" que foi criado, e adicione a url do seu blog.

Agora pesquise (ctrl+f):

<data:post.body/>

ou

<div class=’post-footer-line post-footer-line-1‘/> 

Abaixo copie o código:

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


Feito isso procure pela tag : <head>
E abaixo dessa tag copie este código:

<meta property='fb:app_id' content='ID APP' />

(Que é necessário para moderar os comentários)
Substitua "ID APP" pelo numero de seu aplicativo.

Para mudar dimensões ou altera a quantidade de comentários que será mostrado, segue abaixo os detalhes:

    data-width='420' : Largura do widget, vá ajustando para o melhor tamanho que se adequar a seu blog, vou pode ir diminuindo ou aumentando a largura alterando o '420' pelo tamanho em pixels que achar melhor.
    data-colorscheme='light' : Como na maioria das template o fundo é branco, o código está customizado para esta cor, caso o seu contenha um fundo preto, mude para 'dark' pois poderá ficar melhor para seu template.
    data-num-posts='3' : Número de comentários no widget, no código está '3', mude para a quantidade de seu agrado.

Para fazer alterações bastar procurar o trecho acima para você editar, se caso for preciso.

Comentários

Postagem Anterior Próxima Postagem
Responsive Advertisement