free web stats

Instalar Comentários do Facebook no Blogger

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

Criar Aplicativo no Facebook

  • 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.

ID de aplicativo do Facebook

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.
 Editor de modelos Blogger

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 == &quot;item&quot;’>

<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 == &quot;item&quot;’>
<div id=’fb-root’/>
<script>(function(d){
var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
js.src = &quot;//connect.facebook.net/pt_PT/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[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.

Matope José

Empreendedor e Consultor. Escreve sobre Marketing Digital, Empreendedorismo Online e Oportunidades de Negócios Digitais.

Isa Gama - 6 years ago

Quero cumprimenta-lo pelo trabalho que está fazendo. Muito bom.
Desejo-lhe muita sorte e sucesso.
Isa

    Matope José - 6 years ago

    Obrigado e volte sempre.

      Rodrigo M Picolo - 5 years ago

      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.

        Matope José - 5 years ago

        Ok. Entrarei em contacto.

Comments are closed