Uma das coisas que mais facilitou minha vida aqui no blog foi a opção de comentar usando o Facebook. Além de ser super fácil, acaba servindo de incentivo para deixar uma marquinha no post. Afinal, quase todo mundo tem uma conta na rede social, né? Isso sem contar que evita a necessidade de fazer login em outra conta, digitar as palavras de confirmação e tudo o mais que o Blogspot exige.
Achei vários links ensinando a colocar o código no blog. Porém, a maioria deixava a caixa de comentários logo na página inicial. E como eu queria que aparecesse só no post, tive que fazer uns ajustes.
E como sempre me pedem um tutorial para ensinar a colocar a opção no blog, resolvi trazer para o JDB do jeito que eu fiz e reajustei. Vale lembrar que o código vem do Entenda Web, site que usei para colocar os comentários pelo Facebook aqui no Julie de Batom.
1. Antes de tudo, vá neste link e clique em “+ Criar novo aplicativo”. Coloque um nome para o aplicativo em “app name” e clique em continuar.
Salve no final da página que vai abrir. Como você vai precisar do “App ID/API Key”, é bom salvá-lo no bloco de notas ou em qualquer lugar que você tenha acesso depois. Por último, coloque o link do seu blog em “Website with Facebook login”.
2. Abra uma nova guia ou janela no seu navegador e entre no Blogspot. Antes de qualquer coisa, faça um backup para ter seu layout salvo por segurança.
Nessa mesma página, vá em Personalizar e, depois, em Editar HTML. Clique em “Expandir modelos de widgets” e localize a tag </head>. Logo abaixo dela você vai ver o começo da tag “<body>”. Cole o código abaixo dela:
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘YOUR_APP_ID‘, // App ID
channelUrl : ‘//WWW.YOUR_DOMAIN.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>
Agora vamos às modificações:
Substitua YOUR_APP_ID pelo número do App ID/API Key (que pedi para salvar mais acima). Troque o WWW.YOUR_DOMAIN.COM pelo endereço do seu blog.
3. Esta parte em diante é onde começo a personalizar do meu jeito. Por isso, vale lembrar que a caixa de comentários pelo Facebook vai ficar exatamente no mesmo lugar que a do Julie de Batom!
Localize a tag <div class=’comments’ id=’comments’>. Logo abaixo dela, cole os dois códigos a seguir:
<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=’580′ expr:href=’data:post.url’/>
Vamos às modificações:
data-colorscheme=’light’: como o layout do JDB é claro, deixei esta opção. Se o seu for escuro, vale trocar light por dark.
data-num-posts=”3″: troque o número 3 pelo número de comentários que você quer que apareça.
data-width=’580′: troque o 580 pelo valor da largura que você quer. Tente deixar a mesma que a do post e área de comentários, assim fica mais proporcional.
expr:href=’data:post.url’: Esta expressão indica que cada post do seu blog terá comentários exclusivos. Caso deseje que os comentários sejam iguais para todos os posts, e eu não sugiro, substitua por: data-href=”http://WWW.SEUSITEOUBLOG.COM”
Visualize se está tudo OK e salve. Agora é só avisar aos leitores que seu blog possui um jeito mais fácil de comentar!
Ah, uma coisa que eu percebi: às vezes, quando o post não tem nenhum comentário (pelo próprio Blogspot), a caixinha do Facebook não aparece. Ela só dá as caras depois que alguém já comenta pelo sistema normal do Blogger. Então, caso você não encontre a opção, não se assuste.
E vocês? Curtiram o tutorial? Vão colocar essa opção no blog de vocês? Conta pra gente!
15 Comments
ameii tudo aqui, parabéns *———————*
http://garotascomovoceoficial.blogspot.com.br/
Olá Julie,
Sou Laert do Entenda Web. Obrigado pela responsável atitude de citar sua fonte.
Parabéns pelo belo blog, um grande abraço e até uma próxima.
Julie, você salvou meu blog! haha
xo, Nicolle
diaseflores.blogspot.com.br
Julie graças a você colocar os comentários pelo facebook,muito obrigada sua fofa!
http://imperfeitaadolescente.blogspot.com.br/
Eu tinha instalado ai mudei o layout e tirou. Agora não consigo arrumar de jeito nenhum…
Obrigada, ajudou muito 😀
Julie não está aparecendo o "+ Criar novo aplicativo" no link https://developers.facebook.com/apps como faço?
Obrigada de novo Julie, graças ao JDB eu estou conseguindo arrumar meu blog :]
Consegui!
Obrigada Julie sou super fã dos teus tutoriais!
Depois que eu mando o código e a aperto continuar aparece esta página:https://developers.facebook.com/apps/?action=create#
Só que eu não to entendendo esta parte: Salve no final da página que vai abrir. Como você vai precisar do "App ID/API Key", é bom salvá-lo no bloco de notas ou em qualquer lugar que você tenha acesso depois. Por último, coloque o link do seu blog em "Website with Facebook login"
Adorei, vou colocar lá!
Não estou conseguindo achar este "+ Criar novo aplicativo"..seria este link? http://developers.facebook.com/docs/reference/plugins/comments/
Não amr, é aqui! https://developers.facebook.com/apps
O "+ Criar novo aplicativo" tá no lado direito em cima.
Desisto rsrss não to achando nenhum nada parecido com + Create New App
Achei achei. Agora é o código que não chega no meu cel!