Existem muitos tutoriais na net, mas este é definitivo e certamente vai fechar todas as lacunas que os outros deixaram, definitivamente não existe a possibilidade de você não conseguir ter a sua desejada caixa de comentários do Facebook integrada ao seu blog depois desse tutorial.
Comece agora mesmo a trabalhar. Vamos mostrar passo a passo as coisas que você deve fazer para começar a ver usuários da maior rede social do mundo comentando no seu blog do Blogger, através de um sistema que você terá todo controle.
1 – Criar Aplicativo no Facebook
- Primério vá para a página de desenvolvedores do Facebook e clique em Criar novo aplicativo e preencha os campos como no exemplo abaixo:
- Digite as palavras de verificação caso lhe seja solicitado e prossiga editando as informações básicas.
- No espaço App Domains digite o domínio do seu blog, caso não tenha um domínio personalizado digite blogspot.com e clique em Salvar alterações.
- Procure pelo seu App ID e salve em algum lugar próximo, todo este processo foi para conseguir esse pequeno número.
Você vai adicionar 4 códigos no seu blog:
- Atributo xmlns
- Biblioteca SDK do Facebook
- Tags Open Graph
- Caixa de Comentários
Caso já tenha algum delas não adicione novamente, apenas veja se estão actualizados e se foram adicionados correctamente
2 – Adicionar o atributo xmlns
Você vai usar a tag fb na maior parte dos widgets do Facebook no seu blog, esse atributo serve para você precisa ensinar seu template a reconhece-la.
Agora você já pode fechar a página de desenvolvedores do Facebook e abrir o painel do Blogger no editor de modelos.
* Faça Backup do seu código fonte/template antes de fazer qualquer alteração.
No editor de template procure pelo seguinte trecho nas primeiras linhas do seu template:
<html
E em frente dele cole o seguinte código
xmlns:fb=’http://www.facebook.com/2008/fbml’
Deixe um espaço antes e depois do código de mod0 que o código fique assim:
<html xmlns:fb=’http://www.facebook.com/2008/fbml’ expr:dir=’data:blog…………..2005/gml/expr’
Salve o template.
3 – Adiconar a Biblioteca SDK
Para fazer uso pleno dos recursos do Facebook você precisa adicionar um certo script no seu template. Esta é a versão básica dele.
Procure <body> (Ctrl + F) e abaixo dele cole o seguinte código:
<div id=”fb-root”></div>
<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&appId=SEU APP ID“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
Pegue aquele número que você guardou e substitua o trecho SEU APP ID por ele no código acima.
Salve o template.
4 – Adicionar as Tags Open Graph
Estas tags irão definir como a caixe de comentários e outros plugins do Facebook irão identificar o conteúdo do seu Blog, irão permitir que você modere os comentários no seu blog, entre outras coisas.
Procure por </head> e acima dele cole o seguinte código:
<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 Site‘ property=’og:site_name’/>
<meta content=’APP ID‘ property=’fb:app_id’/>
<meta content=’ID do Perfil‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
Substitua Nome do Site pelo nome do seu blog, APP ID pelo número que você guradou e ID do perfil pelo ID do seu perfil do Facebook.
5 – Adiconar caixa de comentários do Facebook
Este código deverá ser colocado onde você quer a caixa de comentários apareça.
Procure Por um dos trechos
<div class=’post-footer-line post-footer-line-2′>
<div class=’post-footer-line post-footer-line-3′>
<p class=’post-footer-line post-footer-line-2′>
<p class=’post-footer-line post-footer-line-3′><data:post.body/>
E cole abaixo de um deles o seguinte código.
<b:if cond=’data:blog.pageType == "item"’>
<div id=’fb-root’/>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments colorscheme=’light’ expr:href=’data:post.canonicalUrl’ expr:title=’data:post.title’ expr:xid=’data:post.id’ width=’600‘/>
</b:if>
Modifique pt_PT por pt_BR caso você seja brasileiro e 600 pela largura que você deseja que sua caixa de comentários tenha.
É possível que a caixa de comentários não apareça, nesse caso, tente colocar o código noutro trecho até que apareça. Se você entende um pouco de HTML, cole o código onde achar melhor para o seu blog. Visualize o blog até que fique satisfeito com a posição da caixa de comentários no seu blog.
Salve o template.
Dúvidas? Estou aqui para ajudar.
Quero cumprimenta-lo pelo trabalho que está fazendo. Muito bom.
Desejo-lhe muita sorte e sucesso.
Isa
Obrigado e volte sempre.
Poxa amigo. No meu não deu certo. Cheguei aqui por meio de uma resposta que me deu no Yahoo. Acredito que tenha feito tudo certo mas fica dando erro quando boto para visualizar o modelo. Uso o Blogger! Por favor, se puder ajudar agradeço. No aguardo. Abs.
Ok. Entrarei em contacto.
Comentários estão fechados.