Como colocar BOX de comentarios do Facebook no blogger (NOVO FACEBOOK)
Autor: Vinicius Sanches | Publicado: 2012-05-25T23:23:00-03:00

Eae galera... como podem perceber colocamos o sistema de comentarios do facebook no nosso blog...
Ele ajuda a divulgar o blog pois quando alguem comenta com a conta do facebook ela divulga o seu blog/site no face dela......bom é um pouco complicado entao preste bem atençao a cada &nbsp;detalhe....

Primeiro vá para a seguinte pagina:
http://developers.facebook.com/setup/

Aparecerá uma tela assim







Em "App Name" coloque o nome do aplicativo EX: Comentarios.
Em "Espaço do nome do aplicativo" Coloque um "segundo Nome" EX: comentariosdomeusite
(sem espaços e letras maiusculas)
Em "Web Hosting" Deixe como está e Continue...
Após isso irá aparecer uma tela de verificaçao de palavras, verifique e prossiga....

Aparecerá uma tela assim
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Clique na imagem para ampliar)




Clique em WebSite with Facebook Login
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Clique na imagem para ampliar)




La voce coloca o Link do Seu Site
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;(Clique na imagem para ampliar)











Depois disso clique em Salvar Alterações



O aplicativo ja foi criado agora vamos para o proximo passo que é conseguir o codigo...



No canto esquerdo da barra de pesquisa do facebook &nbsp;Clique em FACEBOOK DEVELOPERS como a imagem a seguir mostra

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;(Clique na imagem para ampliar)





Depois clique em "Desenvolva para Sites"&nbsp;como mostra a imagem a seguir

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Clique na imagem para ampliar)





Na tela Que aparecerá clique em "Social Plugins" como na imagem a seguir
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Clique na imagem para ampliar)




Na seguinte tela clique em "comments"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(Clique na imagem para ampliar)




Aperecerá o seguinte formulario :




"URL to comment on" É o link onde os comentarios serão postados.Coloque o link do seu site/blog
"Number of post" É o numero de comentarios a serem exibidos coloque 15
"Width" É o tamanho, deixe como está
"Color Scheme" É a cor dos detalhes Deixe como está tambem (ou se preferir mude de acordo com o que ficar melhor no seu template)

Clique em "Get Code"

Aparecerá a Seguinte Tela:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;(Clique na imagem para ampliar)



Copie O 1° Codigo

Acesse o HTML do Seu Blogger Clique em Expandir modelos de Widget e pesquise por data:post.body
cole o 1° codigo embaixo de &nbsp;data:post.body
Vamos fazer uma mudanças no codigo.... o codigo que voce colou estará assim:


&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
&nbsp; var js, fjs = d.getElementsByTagName(s)[0];
&nbsp; if (d.getElementById(id)) return;
&nbsp; js = d.createElement(s); js.id = id;
&nbsp; js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=123968524407067";
&nbsp; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;

Antes de appId Coloque isso: &nbsp; &nbsp;amp;
O 1° codigo editado ficará assim:


&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
&nbsp; var js, fjs = d.getElementsByTagName(s)[0];
&nbsp; if (d.getElementById(id)) return;
&nbsp; js = d.createElement(s); js.id = id;
&nbsp; js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;amp;appId=123968524407067";
&nbsp; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;



Pronto o primeiro codigo ja está editado...


Após ter feito isso copie o 2° codigo e cole logo abaixo do 1°

Iremos editar este codigo tambem...

&lt;div class="fb-comments"&nbsp;data-href="http://seusite.com" data-num-posts="15" data-width="470"&gt;&lt;/div&gt;


Antes de data-href= cole isto: &nbsp;expr:


Vai ficar assim

&lt;div class="fb-comments"expr:data-href="
http://seusite.com" data-num-posts="15" data-width="470"&gt;&lt;/div&gt;



Agora faça assim:
&lt;div class="fb-comments"expr:data-href="http://seusite.com" data-num-posts="15" data-width="470"&gt;&lt;/div&gt;


No lugar do link do seu site (http://seusite.com)&nbsp;Coloque :&nbsp;data:post.url&nbsp;

Ficará assim

&lt;div class="fb-comments"expr:data-href="data:post.url" data-num-posts="15" data-width="470"&gt;&lt;/div&gt;


------------------------------------------------------------------------------------------------
O codigo Pronto ficará mais ou menos assim:

data:post.body



&lt;div id="fb-root"&gt;&lt;/div&gt;
&lt;script&gt;(function(d, s, id) {
&nbsp; var js, fjs = d.getElementsByTagName(s)[0];
&nbsp; if (d.getElementById(id)) return;
&nbsp; js = d.createElement(s); js.id = id;
&nbsp; js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;amp;appId=123968524407067";
&nbsp; fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));&lt;/script&gt;


&lt;div class="fb-comments"expr:data-href="data:post.url" data-num-posts="15" data-width="470"&gt;&lt;/div&gt;



Nao copie o codigo acima...O facebook irá gerar um codigo diferente pra voce...
------------------------------------------------------------------------------------------------


Depois disso clique em Salvar Alterações....
Agora va em configuraçoes clique em comentarios e selecione a opçao Ocultar...
Em breve postarei aqui um tutorial de como usar as 2 maneiras de comentar (blogger e facebook) simultaneamente (ao mesmo tempo)