Bem, algumas coisas me irritam em um blog, uma delas é o simples fato de ter que preencher um formulário para fazer um simples comentário. Mesmo com a auto completar ligado, eu sinto um ódio desses formulários.
Há algum tempo estive testando o Intense debate, um ótimo sistema de comentários que integrava várias redes sociais para comentar, entre elas, Twitter, Facebook, Wordpress e algumas que eu não me lembro agora. O sistema era ótimo, mas não vingava o meu ódio de preencher formulários, já que maior parte dessas redes requer autenticação e blá blá blá.
Eis que surge o salvador da pátria, o mais sensato de todos, o Facebook.
Pensei com os meus botões: se eu estou conectado no Facebook o tempo todo, e se o sistema é ligado direto no site, irá me poupar o tempo de autenticação, e estarei automaticamente logado no sistema de comentários, evitando aqueles malditos formularios e autenticações.
Eis que deu certo, então, mãos à massa!
Você vai precisar de:
-1 backup do seu template atual
-1 conta no Facebook
-1 Blog no Blogger
-Mínimo de entendimento em html
Primeiro acesse https://developers.facebook.com/setup/ logado na sua conta do Facebook e preencha os dados
Não se esqueça de colocar uma barra / no final do site, senão não vai ser possível continuar.
Completado isso, na próxima pagina anote sua API ID, ou ID do Aplicativo, se trata de um número, e é de extrema importância, por isso, guarde-o.
Agora é a hora de entrar em ação no Blogger, abra seu painel do Blogger e desative os comentários, para isso vá em Detalhes> Comentários e marque “Ocutar”
Feito isso, vá em Design> Editar HML e marque a caixa “expandir modelos Widgets”
Pronto, agora você está apto a fazer as mudanças necessárias no HTML para ativar os comentários.
Procure pelo seguinte trecho no código HTMl:
<html
Pule uma linha dele e cole o seguinte trecho
xmlns:fb='http://www.facebook.com/2008/fbml'
Deve ficar mais ou menos assim: <html xmlns:fb='http://www.facebook.com/2008/fbml'
O próximo passo é procurar pelo seguinte trecho:
<body>
E logo após ele, adicione o código abaixo, e onde está “API ID” substitua pelo número que você pegou no Facebook logo acima, o ID do aplicativo, lembrando de manter as 'aspas'.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'API_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Agora localize o trecho </head>, e logo acima dele cole o seguinte código, com as alterações nas descrições em negrito:
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NOME DO SEU SITE' property='og:site_name'/>
<meta content='http://dl.dropbox.com/u/8840204/Mardware234x60.png' property='og:image'/>
<meta content='SUA API AQUI' property='fb:app_id'/>
<meta content='SEU PROFILE ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
Lembrando de sempre manter as aspas.
Agora é a parte que vai definir onde a caixa de comentários vai ficar, colocarei logo após o post, mas usuários com mais experiências saberão onde encaixar, e os nem tão experientes, bastam pedir ajuda.
Procure no código html o trecho
<data:post.body/>
E logo abaixo adicione
<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<div><fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='auto'/></div>
</b:if>
Pronto, salve o modelo e seja feliz com seus amiguinhos do Facebook =)
Você pode adicionar o contado de comentários do Facebook seguindo esse tutorial aqui.
