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 ♥


O Fabii Santo é um blog pessoal, de beleza, dicas, e muito mais! Todo o conteúdo é criado pela autora do blog e qualquer cópia total ou parcial deve ser creditada ao seu devido autor. As imagens do post, com exceção daquelas de autoria própria, são encontradas em sites diversos. Se você, artista, pessoa pública, site ou empresa, não permite o uso do material, entre em contato via email ou facebook para remoção ou inserção dos créditos corretos. fabiana-divandoestilo@hotmail.com

Direto do Twitter