27/01/2013

Colocando Sistema de Comentários do Facebook no Blogger

Facebook-covers_large

 Olá galera, neste artigo venho mostrar como colocar o sistema de comentários do Facebook em seu blog do blogger. O tutorial é simples, mas requer um pouco de atenção.
                                              Clique aqui e veja uma demonstração.

Criando um aplicativo

Para utilizar do sistema de comentários do facebook é necessário a criação de um aplicativo, você vai saber o porque no decorrer do tutorial
.
1. Crie um App ( Aplicativo ) no Facebook, para isso acesse esse link: https://developers.facebook.com/apps/?action=create

continue...
2. Agora na página Aplicativos clique em "+ Criar Novo Aplicativo" um botão no canto superior direito da página. 

3. Vai abrir um box e nele coloque o nome do aplicativo, você pode colocar o nome de seu blog ou que quiser em 'App Name' e em 'Espaço de mome do aplicativo' coloque uma palavra qualquer que deseje ( sem espaços ) Depois clique em "Continuar"


4. Pronto seu aplicativo foi criado. Você pode o configurar, personalizar, isso é com você, neste tutorial iremos precisar somente do código 'App ID' de seu aplicatvo.



Não feche a página pois o código App ID é necessário.

Colocando sistema de comentários do facebook no blogger
1. Acesse o painel de seu blog.
2. Clique na guia "Modelo" e depois em "Editar HTML"
3. Marque a opção "Expandir modelos de widgets"
4. Procure por: ( Ctrl + F )
<body
 5. ABAIXO da linha encontrada cole.

 <div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APPID', // App ID
      channelUrl : '//www.seudominio.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>
 Substitua o "APPID" pelo código de seu aplicativo criado.
Substitua também "www.seudominio.com" pelo domínio de seu blog. EX: www.desenvolvendoblogs.com
6. Localize a tag abaixo: ( Ctrl + F )
<data:post.body/>
 ou
<div class=’post-footer-line post-footer-line-1‘/> 
 7. Abaixo dela, cole:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;//connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<div class='fb-comments' data-colorscheme='light' data-num-posts='3' data-width='420' expr:href='data:post.url'/> </b:if>
 9. Agora porcure por:
<head>
 10. Abaixo da tag acima, cole o seguinte código: ( Necessário para moderação dos comentários )
<meta property='fb:app_id' content='ID APP' /> 
 Substitua o "APPID" pelo código de seu aplicativo criado.


CUSTOMIZANDO WIDGET
(1) data-width='420' : Largura do widget, vá ajustando para o melhor tamanho que se adequar a seu blog, vou pode ir diminuindo ou aumentando a largura alterando o '420' pelo tamanho em pixels que achar melhor.

(2) data-colorscheme='light' : Como na maioria das template o fundo é branco, o código está customizado para esta cor, caso o seu contenha um fundo preto, mude para 'dark' pois poderá ficar melhor para seu template.
(3) data-num-posts='3' : Número de comentários no widget, no código está '3', mude para a quantidade de seu agrado.
11. Agora Salve o Modelo.
Os comentários do Facebook já estão adicionados.


Moderação de Comentários
Existe uma página para visualização e moderação dos comentários: http://developers.facebook.com/tools/comments
Ocultando comentários do Blogger
Nas postagens irão aparecer os comentários do Facebook e do Blogger, para não ficar com os dois é necessário que você oculte os comentários do Blogger.
Acesse as ConfiguraçõesPostagens e comentários > Em Comentários, local do comentário clique no menu de opções e clique em "Ocultar".


Espero que tenham gostado,apesar de ter sido um pouco grande vale muito a pena ,qualquer duvida é só perguntar.
curta a nossa fá page Decidida a Mudar

2 comentários :

  1. Adorei o tutorial, salvei nos favs ^^
    Beijoss!
    Isadora Secol
    diasdeventura.com
    xoxo;*

    ResponderExcluir
  2. Olá lindona!Tudo tranquilo? Vasculhei teu blog, e achei vários post bem legais.Convido pra conhecer o meu,e se gostar não deixe de seguir.Beijinhos

    ResponderExcluir

Seja muito bem vindo(a)!

♥ Conte para mim o que você achou da postagem e do meu blog. Dê também seus palpites, sugestões e ideias.

♥ Você não precisa ter uma conta no Blogger para comentar. Ao lado de "Comentar como" tem várias opções para você selecionar. Se você não tem uma conta no Blogger, é só você selecionar a opção "Nome/URL" e preencher os campos.

- Deixe o link do seu blog pra que eu possa visita-lo.
- Não xingar e nem desrespeite nosso trabalho.
- Caso precise ( fabiana-divandoestilo@hotmail.com )

Volte sempre e obrigada pela visita! :D Você é sempre muito bem-vindo (a) aqui! E não esqueça de CURTIR a FAN PAGE do BLOG no face, e seguir o
INSTAGRAM: @fabii_santo. Beijos, Fabi ♥

© Fabii Santo - 2017. Todos os direitos reservados.
Criado por: Fabii Santo.
Tecnologia do Blogger.
imagem-logo