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




102 comentários:

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

    ResponderExcluir
  2. 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
  3. Aqui não apareceu esse número que pede depois, o que devo fazer?

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

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

    ResponderExcluir
  6. 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
  7. O MEU ANO APARECEU ESTE NUMERO, OQUE FAÇO?

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

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

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

    ResponderExcluir
  11. 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
  12. 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
  13. 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
  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!!!

    Dica de Lila, que deu certo ;D

    ResponderExcluir
  15. 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
  16. CONSEGUIIIIIIIIIIIIIIIII!!!
    DEPOIS DE TRÊS TENTATIVAS.... UFA!!!

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

    Bjs!

    ResponderExcluir
  17. Parabéns pela dicas!

    Um ótimo trabalho :-)

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

    ResponderExcluir
  19. 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
  20. O meu fica repetindo os comentários em todo post!

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

    ResponderExcluir
  22. hahaaa... deu certo pai vei, vlw... ~~

    ResponderExcluir
  23. 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
  24. Dependendo do template buga... fiz em 1 deu normal, no outro n entra nem ferrando.

    ResponderExcluir
  25. Brigadão guria,

    estava procurando a um tempão esse APP.

    gracias,

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

    http://culpadohumor.blogspot.com.br

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

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

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

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

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

    Obrigado.

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

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

    ResponderExcluir
  34. ñ precisa mais já aprende vlw rapaziada... hahaha

    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. to com um problema quando peço o codigo nao sai o numero codigo do meu face nao sai la
    como faço???

    ResponderExcluir
  38. 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
  39. No meu os comentários estão repetindo em todos os posts. O que fazer?

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

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

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

    ResponderExcluir
  43. 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
  44. 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
  45. Consegui mas está dando conflito com o slide... :(

    ResponderExcluir
  46. 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
  47. o meu não apareceu o numero do ID.
    PORQUE SERÁ?
    SOCORRO O MAIS RÁPIDO POSSÍVEL

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

    ResponderExcluir
  49. 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
  50. funcionou de primeiraaa, muito obrigada *-*

    ResponderExcluir
  51. Muito obrigado , foi bem util.

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

    ResponderExcluir
  52. 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
  53. no meu não apareceu essa ultima parte " ... " oque eu faço??

    ResponderExcluir
  54. 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
  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. 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
  57. Mais um problema, quando comenta com o blogger, os do facebook somem, como resolver?

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

    ResponderExcluir
  59. 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
  60. 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
  61. 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
  62. Cara sera que da para consertar uma tag que vc errou é a head

    ResponderExcluir
  63. Não aparece o numero. Porque?

    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