sábado, 17 de setembro de 2011

Como usar o Sistema de comentário do facebook e do blogger juntos com efeito accordion

social-balloon-facebook-icon São raras as pessoas que ainda não procuraram um novo sistema de comentário para aplicarem em seu blog pelo simples fato de estarem cansadas do padrão do blogger, ou até mesmo querendo dar um upgrade no gerenciamento de comentários.

Escolher o sistema de comentário do facebook pode ser uma boa opção, até mesmo de ganhar mais comentários sendo que o facebook possui uma grande audiência, mas também de divulgar suas postagens. Isso deve ao fato de que quando alguém comenta no seu blog através do sistema do facebook, ele publica uma atualização automaticamente em seu perfil.Caixa do facebook efeito accordion 

Neste tutorial não vou ensinar como substituir a caixa do blogger, até porque já ensinei aqui no cblogger.

Mas sim mostrar como utilizar os dois sistemas no blog, dando dupla opção para o usuário estar comentando em seu blog, porém, com o efeito accordion no do facebook.

Dado a introdução, vamos trabalhar!

1. Primeiramente acesse o HTML do seu blogger, clique em “Expandir modelos de widgets” e procure por </head>.

2. Acima dessa tag cole código abaixo.

<script type='text/javascript'>
$(document).ready(function(){
  $(&quot;.toggle_wraper&quot;).hide();
   $(&#39;.twitter&#39;).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
  $(&quot;.headings&quot;).click(function(){
    $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
  });

});
</script>

3. Agora procure por ]]></b:skin> e acima dela cole o código abaixo.

:focus {
  outline: 0;
}
.toggle_wraper{ padding:0px; margin:0px;}
div#container {
  margin: 50px auto 0px auto; /* centered */
  width: 400px;
}
.bg {
  clear: both;
  margin: 0px auto;
  width: 590px;
  background: #fff;
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
  position: relative;
  z-index: 90;
}
.headings {
  background: #59B;
  height: 40px;
  width: 590px;
  position: relative;
  padding-top:5px;
  border: 0px #A2A2A2 solid;
  -webkit-border-radius: 10px;
  top: 0px;
  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  z-index: 100;
}
.headings h2 {
  font-size: 30px;
  cursor:pointer;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  text-align: center;
margin-top: 0px;
}
.detail img{ float:left; margin:15px 15px 7px 32px;}
.detail {
  padding: 0px 5px 35px 5px;
}
.detail h2 {
  font-size: 20px;
}
.detail p {
  padding-top: 19px;
  font-size: 14px;
}
.detail p a {
  color: #5599bb;
  text-decoration: none;
}
.detail p a:hover {
  text-decoration: underline;
}

4. Feito isso procure por:

<div class='comments' id='comments'>

5. Abaixo dessa linha cole o seguinte código:

<div class='bg'>
<div class='headings'><h2>Comentar Pelo Facebook</h2></div>
    <div class='toggle_wraper'>
      <div class='detail'>
Se não carregar, atualize a página
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol  +
&#39;//connect.facebook.net/pt_BR/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
</div>
</div>
</div>

6. Substitua a parte em vermelho pelo seu APPID. Se você não sabe o que é isso, trata-se da ID do seu aplicativo criando no facebook, se você não tem, clique aqui e veja como fazer um e pegar o APP ID. Leia o tópico “Criando aplicativo”.

7. Só pra finalizar, pesquise por <head> e baixo dela cole as linhas abaixo.

<meta content='NOME DE USUÁRIO DO FACEBOOK' property='fb:admins'/>
<meta content='APPID' property='fb:app_id'/>

8. Agora é só trocar as partes destacadas pelo o que se pede. Feito isso, salve.

Agora entre em uma de suas postagens e veja como ficou, o facebook com efeito accordion e o do blogger abaixo incorporado. Lembrando que só aparece nas páginas de postagem.

E esse foi mais um de nossos tutoriais. Se gostou, dê um +1 e curta no facebook diretamente pelo sistema de comentários abaixo da postagem. Não se esqueça de comentar!

Marcadores: , , ,

12 Comentários:

Às 21 de setembro de 2011 16:52 , Blogger Opikko disse...

no segundo passo do tutorial falta alguma coisa .... um comando para procurar eu acho!!! Manda o tutorial para Opikko@hotmail.com por favor...gratos, Opikko!

 
Às 21 de setembro de 2011 16:56 , Blogger Opikko disse...

3°passo!!

 
Às 21 de setembro de 2011 22:57 , Blogger Códigos Blogger disse...

@Opikko Eita! Realmente esqueci de mencionar a tag ]]>.
Obrigado!

 
Às 30 de outubro de 2011 19:35 , Blogger Holtz disse...

Aw Cblogger como que põe isso bem no centro? Abraços
~Aquardo respostas rapidas xP

 
Às 30 de outubro de 2011 21:54 , Blogger Códigos Blogger disse...

Holtz, Acrescente <center> antes do código do 5° passo e </center> depois.

 
Às 20 de novembro de 2011 19:17 , Blogger Storm_TR disse...

Dá este erro "O plugin de comentários requer um parâmetro href"
Como faço para resolver?

 
Às 20 de novembro de 2011 21:35 , Blogger Códigos Blogger disse...

Você deve estar usando outro plugin do face que esta dando conflito.

 
Às 1 de dezembro de 2011 11:35 , Blogger Tiago Sérgio disse...

Nao consigo o codigo APPID nao vai para segunda pagina que voce mosta

 
Às 22 de dezembro de 2011 08:31 , Blogger Claudio Luiz Music disse...

Parabéns pelo Artigo...
Muito bom mesmo!

 
Às 2 de janeiro de 2012 17:42 , Blogger adventure disse...

não funcionou!!!

 
Às 18 de janeiro de 2012 00:15 , Blogger :*: קя๏ƒª ઝáイi α :*: disse...

Não deu.
Cheguei no passo 4 e não encontrei: ...div class='comments' id='comments'>
...
O que fazer??

 
Às 14 de dezembro de 2012 13:51 , Blogger AL disse...

eu fiz todos os passos e saio essa mençagem "O plugin comentários requer um parâmetro href."
abaixo no lugar da caixa. e agora

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial