sexta-feira, 10 de junho de 2011

Comentarios do Blogger postar com usuario Facebook

Na imagem acima você já pode ver que os dois formulários de comentário compartilham o mesmo espaço e basta selecionar a aba desejada para comentar como quiser.
Pronto, esses são os exemplos de imagem, de como ficará, se você gostou continue lendo, se não mude de post.. rsr'.
  1. Vá ao painel do Blogger, clique no menu “Design” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets” .
2. Agora, nessa tela, aperte o atalho do seu teclado Ctrl+F e procure pela seguinte linha de código:
<div class='comments' id='comments'>
3. Abaixo dessa linha que encontramos, vamos colar o trecho de código exatamente como mostrado abaixo.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
O número marcado de AZUL no código determina a largura do formulário de comentários do Facebook. Só altere esse número se você souber a medida do espaço que tem para os formulários. 

 4. Nessa mesma tela, procure agora pelo código abaixo:
<head>
 5. E logo ABAIXO dele, cole o seguinte trecho.
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
Agora salve o modelo, clicando no botão laranja “SALVA MODELO”. Mas ainda faltam os estilos em CSS para que tudo funcione e apareça o resultado em seu blog.
  6. Depois de salvar os passos citados acima, clique na aba “Design” ~> “Designer do modelo”. Na janela que abrir procure no menu lateral pela opção “Avançado” e ache o “Adicionar CSS”.
7. No espaço indicado, cole o seguinte trecho de CSS:
.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

 Depois click em 

E pronto!!!
Gostaram?? Eu tambem adorei, os creditos gerais sao do blog http://2for-you.blogspot.com/
Bjooos..
Comentem

4 comentários:

  1. BACANA, mas eu quero que apareça automaticamente aberto já com todos os recados, abaixo das postagens...

    da forma que está em http://supere-se.blogspot.com

    ResponderExcluir
  2. Num site indonésio ( http://alma2paradise.blogspot.com/2011/05/tutorial-fb-comment-box-dalam-blogspot.html ) que explica como fazer, já aparece automaticamente na página principal.

    ResponderExcluir
  3. ñ conseguir.

    http://multifakeoficial.blogspot.com.br

    ResponderExcluir

O blog Garota Etc é um blog que produz conteúdos originais de diferentes temas. Espiritualidade, astrologia, viagens e etc.
Aqui você terá acesso a fotos e notícias. Textos sobre a sociedade e o mundo em que vivemos. Criticas sociais e entretenimento.
Acesse o blog e fique por dentro das novidades.
Comente e divirta-se.