Caixa de comentários via facebook no Blogger

by Poderon Design - 24 abril

Hey, hoje trouxe para o blog um tutorial bem legal que sempre me pedem, colocar no Blogger a caixa de comentários via Facebook!

O modo que uso é bem simples, e expliquei tudo em passos e com algumas fotos para auxiliar vocês.

Fazendo direitinho como o tutorial indica tudo ficará certinho. Vamos lá?

Faça Backup do seu layout antes de iniciar!

Primeiro você vai precisar um pequeno código que se chama ID, para obter ele você precisa criar um novo app no Facebook developers.

Para fazer isso vá em https://developers.facebook.com/

Depois em : APP> ADD A NEW APP

Depois de pronto o seu novo app, ele vai ter uma pagina como essa, copie e guarde o número do seu App ID.

Feito isso vamos para a instalação no blogger.

Vá em MODELO> EDITAR HTML
logo no inicio (como mostrado no print) cole xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema'> ao lado de xmlns:expr='http://www.google.com/2005/gml/expr' note que dentro, antes da chave : >

Clique na foto para ampliar

o código colado deve ficar do jeito da foto.

Clique na foto para ampliar

3. Cole abaixo de <head>

4. procure por post-footer-line-3

Você vai achar o codigo assim <div class='post-footer-line post-footer-line-3'/>

apague o / que fecha o código deixando assim:

Feito isso cole abaixo dele o código:

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APPID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/pt_BR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments expr:href='data:post.url' width='600'/>
</b:if>

Ficará desse jeito

Clique na foto para ampliar

Adicione seu APP ID onde está indicando em azul no código,

Para mudar o tamanho vá onde está indicado em vermelho no código.

após colocar o código e fazer as modificações desejadas não esqueça de salvar.

Feito tudo isso o resultado é esse como no meu blog!

Tudo prontinho, agora seus amigos do Facebook vão poder comentar muito no seu blog. Então não tem mais desculpa para não comentar né?!

Espero que tenham gostado do tutorial de hoje, em breve terá mais. E caso você queira algum especifico não esqueça de deixar nos comentários dizendo se gostou do tutorial e qual deseja para próximo tá?.