14 de abr de 2013

Usar comentários do Facebook e Blogger juntos no blog





Para quem quer o sistema de comentários do Facebook em seu blog, conforme ensinei neste post mas não quer perder o sistema de comentários do Blogger, eis uma solução: coloca-los em sistema de menu de abas, assim, seu leitor decidirá onde comentar. Para isso é necessário conseguir o ID do Facebook. A primeira coisa a fazer é se logar no Facebook, depois clique AQUI e escreva o endereço completo de seu blog.




Depois clique em "GET CODE", abrirá uma janela, copie e cole todo o código em algum local (pode ser o bloco de notas) para separar apenas o número.






No modelo de seu blog clique em Personalizar






Cole então o código abaixo no local indicado.






/*Sistem comentarios Facebook e Blogger------------------------------------------------*/
.comments-page {  background-color: #f2f2f2;}
#blogger-comments-page {  padding: 0px 5px;  display: none;}
.comments-tab { background-color: #808080; float: left; padding: 5px; margin-right: 3px; cursor: pointer; }
.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}



Volte ao modelo de seu blog





<head>


E depois dele cole o seguinte código, colocando o número do ID do Facebook no local indicado.


<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='AQUI O NÚMERO DE SEU ID DO FACEBOOK' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>



Salve.


Clique então em Ir para um widget e depois clique em Blog1


Procure por <b:includable id='comments' var='post'>...</b:includable>



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




Troque-o por: (número grifado em rosa representa a largura da área do Facebook, troque-a caso necessário.)


 <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 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='52' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>





Procure agora por:

<b:includable id='comment-form' var='post'>...</b:includable>


Clique na setinha para expandir.

Agora procure por:


<h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>



Onde estiver o número:  410

Troque-o por: 1410

Salve e  pronto




106 comentários:

  1. Faz um no modelo Viagem, por que nesse eu não consegui...

    ResponderExcluir
  2. Esta última parte não dá certo. Aparece o erro: Erro ao analisar XML, linha 1459, coluna 3: The element type "b:includable" must be terminated by the matching end-tag ""

    ResponderExcluir
    Respostas
    1. Como vc resolveu o problema? Porq pra mim aparece exatamente a mesma msg... só muda a linha.

      Excluir
  3. Consegui, era erro meu, por favor, ignore o outro post. Obrigado

    ResponderExcluir
    Respostas
    1. to com um problema quando peço o codigo nao sai o numero codigo do meu face nao sai la
      como faço???

      Excluir
  4. Ahhh!!! Socorro! Nunca consigo! Já tentei de tudo quanto é jeito, e agora tá aparecendo o erro:
    The reference to entity "appId" must end with the ';' delimiter.
    Help!!!

    ResponderExcluir
  5. Aqui não apareceu esse número que pede depois, o que devo fazer?

    ResponderExcluir
  6. (número em rosa representa a largura da área do Facebook, troque-a caso necessário.) ??? Onde ???

    ResponderExcluir
  7. Erro - na ultima etapa corrija por favor ?!

    ResponderExcluir
  8. a última etapa dá esse erro aqui oj "Erro ao analisar XML, linha 1407, coluna 3: The element type "b:includable" must be terminated by the matching end-tag "".

    será q vc poderia me ajudar?

    ResponderExcluir
  9. O MEU ANO APARECEU ESTE NUMERO, OQUE FAÇO?

    ResponderExcluir
  10. Última estapa sempre dá erro! Como solucionar? Vejo todo mundo questionando e nada de resposta.

    ResponderExcluir
  11. Deu certo aqui, valeu mesmo administradora que não lembro o nome: hehehe

    ResponderExcluir
  12. E quando eu uso os cogido la do começo ? o.O

    ResponderExcluir
  13. como vocês conseguiram? eu fiz todos os passos mas dá erro, o meu blog é novo e ficou a mesma coisa... olhem só www.deyvsonaguiar.blogspot.com

    ResponderExcluir
  14. O meu tava dando erro igual ao de vocês, mas é porque a linha desse ultimo código não podia ser fechada.
    Na décima linha desse ultimo código achem a palavra clear e tirem a barra que não deixa o código fechar. E é só salvar!
    E na linha 15 tbm desse ultimo código, troquei o 400 width para 600, ficou bem maior a área de comentários.

    Espero que ajude vocês!!!

    ResponderExcluir
  15. e pro caso de nao aparecer o "tal numero"?
    eh o meu caso =/

    ResponderExcluir
    Respostas
    1. Thais, pra aparecer esse "tal número", que é o ID do seu Facebook, tem que ser um Facebook comum e não uma página tipo "Empresa"!

      Excluir
    2. mas q lugar cola ultimo codigo ela n explica depois do q?

      Excluir
  16. O meu tava dando erro igual ao de vocês, mas é porque a linha desse ultimo código não podia ser fechada.
    Na décima linha desse ultimo código achem a palavra clear e tirem a barra que não deixa o código fechar. E é só salvar!
    E na linha 15 tbm desse ultimo código, troquei o 400 width para 600, ficou bem maior a área de comentários.

    Espero que ajude vocês!!!

    Dica de Lila, que deu certo ;D

    ResponderExcluir
  17. muito boa dica já estou aplicando este sistema de comentários do Facebook no meu blog. mais estou tendo um problema em algumas paginas que já estão comentadas o blogger o sistema de comentários do Facebook não aparece mais sabe o que tenho que fazer para resolve este problema ?

    ResponderExcluir
  18. CONSEGUIIIIIIIIIIIIIIIII!!!
    DEPOIS DE TRÊS TENTATIVAS.... UFA!!!

    Querisa, passa lá no meu blog:
    http://bebelvirtuosa.blogspot.com.br/

    Bjs!

    ResponderExcluir
  19. Parabéns pela dicas!

    Um ótimo trabalho :-)

    ResponderExcluir
  20. Consegui encontrar, ate que enfim consegui um que funciona, valeu mano!

    ResponderExcluir
  21. Oi tudo bem?
    E que fiz do jeitonho que você explicou, mais o problema e que quando a pessoa entra aparece normal né? Ai depois ex: a pessoa comenta pelo blog e some a area do facebook.. e que queria quando comenta-se pelo blogger continua-se o do face que acho que e melhor .. Me ajuda
    www.galerainsana.blogspot.com.br

    ResponderExcluir
  22. O meu fica repetindo os comentários em todo post!

    ResponderExcluir
  23. Cara Me ajuda o Meu Comentario ta desalinhado
    Ve Ai
    http://cdsgospelmusicas.blogspot.com.br/2013/04/lea-mendonca-profetizando-vida.html

    ResponderExcluir
  24. o unico problema foi q o icone do face e do blog com o nome cometarios não ficaram um na frente do outro mais deu certo se tiver como ficar igual la da imagem me diz ae blz, uzkchorrao@hotmail.com me manda um email ae pode ser...

    ResponderExcluir
  25. Dependendo do template buga... fiz em 1 deu normal, no outro n entra nem ferrando.

    ResponderExcluir
  26. Brigadão guria,

    estava procurando a um tempão esse APP.

    gracias,

    ResponderExcluir
  27. muito bom funciona perfeitamente da uma olhada no meu blog pra ver como ficou *__*

    http://culpadohumor.blogspot.com.br

    ResponderExcluir
  28. O meu funcionou, por 5 minutos e depois sumiu, fui verificar e os codigos estao lá certinhos, mas nao aparece nada lá!

    ResponderExcluir
  29. Acabei de colocar um template novo, deu tudo certo obrigado! =)

    ResponderExcluir
  30. o meu da erro no <html/ o que fazer me ajudem

    ResponderExcluir
  31. Deu tudo certo no meu blog obrigada pelo tutorial :) https://www.estupidamentesua.blogspot.com

    ResponderExcluir
  32. Legal. Funcionou perfeitamente, mas será que tem alguma forma de saber quando alguém comenta?

    Obrigado.

    ResponderExcluir
  33. seria legal tbm se o numero de comentario do face ficasse no fim de cada postagem sem precisar expandir...

    ResponderExcluir
  34. ñ estar ficando escuro nem a pau só fica no modo light pq ñ ta ficando no Dark alguém sabe me dizer?? vlw

    ResponderExcluir
  35. Os códigos funcionaram corretamente, porém a caixa de comentários do Blog desapareceu.

    ResponderExcluir
  36. Este comentário foi removido pelo autor.

    ResponderExcluir
  37. O único tutorial que deu certo aqui. Porém não cheguei a fazer a ultima parte, pois não encontrei no html. Mesmo assim deu certo. Obrigada

    ResponderExcluir
  38. No meu os comentários estão repetindo em todos os posts. O que fazer?

    ResponderExcluir
  39. Não rola usar isso galera. Depois que se comenta usando o blogger, a opção de usar o facebook desaparece.

    ResponderExcluir
  40. Este comentário foi removido pelo autor.

    ResponderExcluir
  41. Este comentário foi removido pelo autor.

    ResponderExcluir
  42. Po cara brigadão!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    Rodei todo o google e o unico sie que me deu uma solução foi esse aki!
    Vlw msm!

    http://meucoracaonacaneta.blogspot.com.br/

    ResponderExcluir
  43. Quando tem comentário via blog não aparece a opção via facebook ? o que houve ?

    ResponderExcluir
    Respostas
    1. Estou nesse mesmo dilema, instalei e pensei que tava tudo certo, ae quando comentaram com o blogger a opção do facebook simplismente sumiu. e o dono desse blog parece q nao responde mais a ngm =/

      Excluir
  44. Consegui mas está dando conflito com o slide... :(

    ResponderExcluir
  45. nossa cara vlw funciono direitinho no meu blog muito obrigado eu estava a procura deste codigo e não achava só achei neste site muito obrigado

    quem quiser ver clique aqui http://soudescolado.blogspot.com/

    ResponderExcluir
  46. o meu não apareceu o numero do ID.
    PORQUE SERÁ?
    SOCORRO O MAIS RÁPIDO POSSÍVEL

    ResponderExcluir
  47. Oownt , brigada pela dica , adorei e deu tudo certinho , Bjoos
    http://polianaaraujo.blogspot.com

    ResponderExcluir
  48. Cara ótimo o seu tutorial sobre como colocar comentários no blog com o perfil do facebook, mas eu to com um problemão, eu tinha visto um tutorial antes aeh o meu blog ta com 2 tipos de comentários com o face, olha aeh ~~~>> http://rub5m3rc10.blogspot.com.br/2013/06/a-terra-sem-o-homem.html , por favor se tiver como me ajudar seria muito grato, desde já obrigado

    ResponderExcluir
  49. funcionou de primeiraaa, muito obrigada *-*

    ResponderExcluir
  50. Muito obrigado , foi bem util.

    Meu blog : http://brilhanosite.blogspot.com.br/

    ResponderExcluir
  51. eu to querendo sabe coloca os comentario a cada postagens ..
    esse ai
    e simples so copia em java scrip que da serto
    não pre desse trabalho todo

    ResponderExcluir
  52. no meu não apareceu essa ultima parte " ... " oque eu faço??

    ResponderExcluir
  53. Excelente dica. Ótimo para ficar mais conhecido o blog. Quem comenta e publica no facebook o que comenta, faz com que outras pessoas fiquem curiosas. :) Parabéns

    ResponderExcluir
  54. Olá, boa noite.
    Ótimo tutorial, parabéns.
    Porém, identifiquei um problema... quando alguém publica algum comentário através do Blogger, a opção de publicar comentários pelo Facebook some! Como resolver isso? Poderia me dar um help, por favor?
    Obrigado e um abraço!

    ResponderExcluir
  55. Olá, boa noite.
    Ótimo tutorial, parabéns.
    Porém, identifiquei um problema... quando alguém publica algum comentário através do Blogger, a opção de publicar comentários pelo Facebook some! Como resolver isso? Poderia me dar um help, por favor?
    Obrigado e um abraço!

    ResponderExcluir
  56. Como faz para deixar com cor escura?

    ResponderExcluir
  57. Como faz para deixar com cor escura?

    ResponderExcluir
  58. Mais um problema, quando comenta com o blogger, os do facebook somem, como resolver?

    ResponderExcluir
  59. no meu nao tem esse b: include id comments etc etc e agora?

    ResponderExcluir
  60. Finalmente consegui achar uma explicação que dá certo. Já tinha tentado várias vezes com outras explicações da net e não tava dando certo.
    Valeu pela ajuda. Deu certinho.

    Bjs

    ResponderExcluir
  61. Aqui não deu. O código do facebook apareceu 1, já desconfiei, fiz tudo certo e não aconteceu nada. Tentei o link que ja vem por padrão "example.com", também aparece 1.

    ResponderExcluir
  62. No meu deu tudo certo! Tô até feliz porque consegui :D

    Tem como mudar esse sistema, em vez de ser em abas o do blogger e o do facebook, tem como os comentários do facebook ficarem em cima e os do blogger em baixo?


    http://www.queridosdevaneios.com/

    ResponderExcluir
  63. Cara sera que da para consertar uma tag que vc errou é a head

    ResponderExcluir
  64. Mais um problema, quando comenta com o blogger, os do facebook somem, como resolver?

    ResponderExcluir
  65. Moça Me onça Ícone social esta travado o seu Template

    ResponderExcluir
  66. muito bom mano esse foi o único que deu certo!

    olha como ficou: http://osbanguelaz.blogspot.com.br/

    ResponderExcluir
  67. Mas um problema, quando comenta com o blogger, os do facebook somem, como resolver?
    RESOLVAM ISSO PELO AMOR DE DEUS, VOCÊS QUEREM POSTAR A PORRA DO TUTORIAL ENTÃO POSTA DIREITO.

    ResponderExcluir
  68. Bom, estou com o mesmo problema da Debiie, quando comentam no blogger os comentários do facebook somem! :(

    ResponderExcluir
  69. Não dá certo pro facebook,aparece a aba, mas não tem o lugar de comentar comentários

    ResponderExcluir
  70. Alguem sabe m explicar pq só aparece opção de comentar como facebook quando nao tem cometarios nos posts?

    ResponderExcluir
  71. certinho man, vlw, se melhorar estraga

    ResponderExcluir
  72. Não consegui! quando já tinha comentário do blogger não aparecia a opção do facebook e vice e versa... e agora, como faz?

    ResponderExcluir
  73. Post muito útil, me ajudou muito, muito obrigado mesmo

    ResponderExcluir
  74. Ola no meu estalo certinho mais tipo quando alguém comento pelo o Facebook não mostra pra mim ou para outra pessoa o comentário e se comentar pelo o blogger ele some os comentários do face pode me dizer porque ta acontecendo isto ?

    ResponderExcluir
  75. maneiro deu certinho!
    mas será que existe uma maneira de seguir os comentários sem ter que cometar?
    no sistema de comentários original do Bloger ja me avisa por email quando alguém comenta, com o sistema do FB so avisa se eu mesmo comentar para seguir o post

    ResponderExcluir
  76. Boa tarde!
    Gostaria de aplicar esta dica, mas na criação do script não gera o numero, embora eu saiba vendo no meu álbum as fotos do face.
    Tem como resolver isso?

    Agradeço atenção...abçs

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube