Caixa De Comentários Integrada ► Facebook/Blogger

O site ALL BLOGS TOOLS publicou com exclusividade um tutorial com código simples para que em poucos passos você possa instalar a caixa de comentários do Facebook no Blogger. Uma ótima informação.

VEJA DEMO ALL BLOG TOOLS

O tutorial basicamente traduzido é o seguinte:

Etapa 1 ► Desativar Comentários Padrão.
A primeira coisa que você deve fazer para desativar comentários padrão do Blogger. se você~e não quer ter as duas  formas de comentários. 
Faça login no Blogger, Configurações ► Comentários e marque a opção Ocultar

...

 ...

Em seguida, role a página e clique em 

 ...

Etapa 2 ► Gere seu Facebook App ID.
Agora você deve gerar o seu próprio app facebook id, ele é realmente fácil e uma etapa do processo, basta ir a página  facebook developers e preencher as seguintes informações:

   
Em seguida, clique em criar aplicativos.

A próxima página mostrar um monte de informações Você vai precisar apenas uma linha, é App ID: 
Basta copiar e guardar em um bloco de notas, vamos precisar nos próximos passos. Na imagem abaixo você vê onde encontrar o seu Facebook App ID:.

Etapa 3 ► Código da caixa de comentários.

NOTA: Publiquei código oferecido pelo site ALL BLOGS TOOL, mas você deve edita-lo para adequar ao seu blog, é muito fácil , não se preocupe. Veja como fazer:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyphenhyphenw6vpDSTdTDo5ReBvTxRHARZgqxlQ8GPVNZMx5tFJMM_jOne3qyNblLvlr9qAez7Z26TCve9nxfB08OyFJUOz_IC327WA-pId480PWwex3OV_1f20Nu9apl-W0gXpwCi-tyMKSRerT8/' width='331'/></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;AppID&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol +
  &#39;//connect.facebook.net/en_US/all.js&#39;;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments width='600' xid='boxID'/>

  <div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/'target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>

  </b:if>

Entenda o código e o que deve ser alterado:

O trecho grifado em azul é o endereço da imagem que aparece acima do box. Sugiro que você substitua por alguma imagem ou texto mais adequada ao seu modelo e a língua do seu país (rsss)

Em vermelho ► AppID Substituir pelo seu número gerado no Facebook app id(gerada na etapa anterior)


Em roxo ► 600 :Refere-se a largura da sua caixa de comentários.  Deve ser alterado de acordo com as medidas do seu template.Ex: 500 ou 450.

Em verde ► boxID dar a sua caixa de comentários qualquer identificador único, que pode ser o seu nome, o título do blog… Só é permitido letras e sem espaços ex:maxmax, maxsite ou maxblog.

IMPORTANTE!! Toda a área grifada em negrito no final do código , refere-se à área de créditos e direcionamento para o site site ALL BLOG TOOLS. 

Para que você não seja malvado, retire apenas a área de direcionamento sem retirar a parte dos créditos. Veja as alterações que eu fiz SEM RETIRAR OS CRÉDITOS.

<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/'target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>
  </b:if>

Veja e teste como ficou a minha caixa de comentários já editada

 CAIXA DE COMENTÁRIOS FACEBOOK (by Mamanunes)

...

 ...

Veja que fiz as mudanças, mas sem retirar o crédito do ALL BLOGS TOOLS . 
Abaixo o código completo da caixa que eu editei.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jGIoSw27sA9FH8yK9e838KDUR7f-gvv256j412Fmss7oha6OSXXEHKvsubYIDMk2rt5bfo5fArLtMP__M7o6oz0G6w7gmozE-mcORigyQpXfuo_1AU_zmrSMZOJqV0R1Sy-J_fPMqyXg/s320/commnet.jpg' width='331'/></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;123418887678526&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol +
  &#39;//connect.facebook.net/en_US/all.js&#39;;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments width='600' xid='boxID'/>
<div style=' font-size:10px; padding-left:-13px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/'target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a> </b></div>
  </b:if>

Bom e agora, onde devemos inserir esse código?
Em “Editar HTML” marque na opção  “Expandir modelos de widgets”
Procure pelo seguinte trecho <data:post.body/>

Cole todo o código DEPOIS/ABAIXO dele.  Visualize e se estiver tudo bem, salve o template.