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".
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.
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):
5. Cole abaixo o código:
6. Agora localize o código (Ctrl + F):
7. Logo abaixo, cole o seguinte código:
www.seublog.blogspot.com pelo domínio do seu blog
8. Procure por:
Se não encontrar, busque:
9. Cole logo abaixo:
Ajustando o widget
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:
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
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:
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 IDchannelUrl : '//www.seublog.blogspot.com/channel.html', // Channel Filestatus : true, // check login statuscookie : true, // enable cookies to allow the server to access the sessionxfbml : 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:
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 == "item"'>
<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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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'.
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:
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.
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 == "item"'>
<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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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!
Marcadores:
Tutoriais