Bom dia gente hoje eu vou ensinar um tutorial como colocar o sistema de comentários do Facebook nas postagens, bom como alguns deve ter visto eu tenho um sistema que fica no final do blog, mas o que eu vou ensinar é como colocar nas postagens assim quando o leitor quiser comentar sobre sua postagem ele pode comentar pelo sistema do facebook , assim além de ter os sistema de comentários do blogger irá ter também o do FACEBOOK, legal neh? Então vamos por a mão na massa ;)
Para Visualizar melhor clique na imagem ou no link aqui
Pra começar precisa de paciência porque dois passos importantes.
1º PASSO
Nível de Dificuldade: Avançado
Índice:
- Crie uma Conta no Facebook
- Criar uma Fan-Page (página no Facebook) para seu blog.
- Criar nova aplicação no Facebook
- Instalar SDK do Facebook no Blogger
- Instalar Plugins Sociais no Blogger
Criar aplicação no Facebook
Diferente dos aplicativos que você deve estar imaginando, um aplicativo que iremos criar é um código único e específico que será seu e será usado para moderar comentários e gerenciar todos os plugins sociais utilizados pelo Facebook. Para criar seu aplicativo você deve ir até o link no site Criar aplicação .
Diferente dos aplicativos que você deve estar imaginando, um aplicativo que iremos criar é um código único e específico que será seu e será usado para moderar comentários e gerenciar todos os plugins sociais utilizados pelo Facebook. Para criar seu aplicativo você deve ir até o link no site Criar aplicação .
Depois digite os codigos de confirmação, ai clique em editar aplicativo você irá adicionar o link do seu site , vá até a opção Website with Facebook Login e acrescente a url do seu blog ou site.
Pronto ja criamos o aplicativo iremos precisar o do IP .
Ao termino do processo você deverá ter o App ID/API Key (exemplo: 276641592152485) em mãos, ele será o seu código que será necessário para instalar o SDK no Blogger.Agora com o código da aplicação em mãos, basta fazer a instalação (lembre-se de fazer backup antes!).
Procure pela abetura da tag body <body> ou <body expr:class='"loading" + data:blog.mobileClass'>. Você irá encontrar a abertura da tag, cole logo após ela o seguinte código:
Substitua o número em vermelho pela sua App ID/API Key, obtida através da etapa anterior. Agora procure por <head> e imediatamente antes dela, cole os seguintes códigos.
Troque nanerbk8 pelo nome de usuário do seu Facebook (não é página, é nome de usuário, caso não possua um você deverá criar).
Troque novamente o 276641592152485 pelo número de sua aplicação criada;
Se você já tem pode prosseguir com a instalação procurando pelo trecho no HTML (lembre-se de expandir modelos de widgets antes de editar o HTML e também fazer backup).
<div class='post-footer-line post-footer-line-1'/>
<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=276641592152485";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Substitua o número em vermelho pela sua App ID/API Key, obtida através da etapa anterior. Agora procure por <head> e imediatamente antes dela, cole os seguintes códigos.
<meta content='nanerbk8' property='fb:admins'/>
<meta content='276641592152485' property='fb:app_id'/>
Troque nanerbk8 pelo nome de usuário do seu Facebook (não é página, é nome de usuário, caso não possua um você deverá criar).
Troque novamente o 276641592152485 pelo número de sua aplicação criada;
Se você já tem pode prosseguir com a instalação procurando pelo trecho no HTML (lembre-se de expandir modelos de widgets antes de editar o HTML e também fazer backup).
<div class='post-footer-line post-footer-line-1'/>
ou
<p class='post-footer-line post-footer-line-1'/>
Cole logo após o código, caso ache mais de uma, você deverá testar até achar a correta
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '276641592152485', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/pt_BR/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments expr:href='data:post.url'/>
</b:if>
Como de costume, troque o número em vermelho pelo seu AppID que você pegou fazendo o processo anterior e salve o modelo. Agora tudo que tem a fazer é testar!
Gostou ? Então Comente! Dúvidas? Deixe Nos Comentários ;)
