Blogger: Comentar usando o Facebook | Follow your dreams
Blogosfera

Blogger: Comentar usando o Facebook

Olá,

Esse tutorial é um muito pedido por vocês lá na página do blog, então finalmente criei vergonha na cara e atendi, hoje vou ensiná-los a colocar o sistema de comentários do Facebook no Blogger. Espero que gostem! Emoji50

Blogger Comentar usando o Facebook

 

  • 1 – Primeiro é necessário criar um App na sua conta do Facebook. Vá na página Facebook Developers e clique em Apps > Add a New App. Caso não tenha registrado antes, o Facebook irá solicitar que você registre o seu perfil como desenvolvedor.

Blogger Comentar usando o Facebook 1

 

  • 2 – Selecione a opção Website.

Blogger Comentar usando o Facebook 2

 

  • 3 – Nomeie o seu App e clique em Create New Facebook App ID.

Blogger Comentar usando o Facebook 3

 

  • 4 – Escolha uma categoria para o seu App e clique em Create App ID.

Blogger Comentar usando o Facebook 4

 

  • 5 – Na próxima página você receberá o número do seu App ID, ele será usado no template.

Blogger Comentar usando o Facebook 5

 

  • 6 – No painel do Blogger, em Modelo > Editar HTML, clique dentro da caixa de códigos para liberar a pesquisa, aperte Ctrl + F e pesquise por <head>. Abaixo dessa linha cole o código à seguir incluindo o número do seu App ID encontrado no passo 5.

<script src=’http://connect.facebook.net/pt_BR/all.js#xfbml=1’/>
<script src=’http://code.jquery.com/jquery-latest.js’/>
<meta content=’NÚMERO-DO-APP-ID‘ property=’fb:admins’/>

Deve ficar assim:

Blogger Comentar usando o Facebook 6

 

  • 7 – Agora pesquise por <div class=’post-footer-line post-footer-line-3′> e abaixo dessa linha cole o seguinte código:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’fb-root’/>
<fb:comments expr:href=’data:post.url’ num_posts=’5‘ width=’650‘/>
</b:if>

O número 5 é a quantidade de comentários que aparecem inicialmente.
O número 650 é a largura total.

 

Salve e agora a caixa de comentários do Facebook deve aparecer logo acima dos comentários do Blogger.

 

Qualquer dúvida comentem. Emoji5

Tags : Blogger

98 Comentários

    1. Tenta esse código: b:includable id=’comments’ var=’post’ (coloque os <> nas laterais) Corrigi um erro aqui do meu blog :)

  1. Oi, tava tentando colocar os comentários. A parte que você ensinou acho que deu certo. Mas, antes eu tinha tentando por um outro passo a passo e quando criei a conta no facebook para desenvolvedor, copiei o código e colei. Agora tá dando esse erro: Erro ao analisar XML, linha 6, coluna 13: Open quote is expected for attribute “{1}” associated with an element type “src”.

    Já tentei colocar esse Open, em vários lugares e não consegui. Pode me ajudar por favor?

    1. Oi Ana, acabei de corrigir um erro no meu blog em que ao copiar código os leitores tinham alguns caracteres substituídos, então peço que você remova tudo que tinha feito antes e tente fazer novamente. Se continuar o erro você me avisa, tá?!
      Bjs

  2. Apesar de ser prático, confesso que não curto muito os comentários pelo facebook, pois não tem espaço pra colocar o link do blog e tal, mas sem dúvida é bem mais prático, haha.
    Adorei o tutorial.
    Beijo

    1. Oi Neyara, sim, é prático porque nem todo mundo tem conta no sistema de blog que a gente usa (Blogger ou WordPress) mas quase todo mundo tem conta no Facebook hahah XD
      Bjs

  3. Oi :D
    Estou encantada com o seu blog e com o fato de você cursar o que eu quero e gostar de fotografia, decoração e tudo mais – que eu amo muito <3
    Parabéns pelo seu blog e espero que tenha muito sucesso em tudo :*

  4. Oie Karol! Tudo?
    Quando salvo aparece isso para mim, The widget with id “Blog1″ cannot contain element: “div”. A widget can only contain b:includable elements, não sei como arrumar :( O que posso fazer? Obrigado!

    1. Oi Fernanda, acredito que você esteja colando no lugar errado, pois onde deve ser colado aceita o elemento div, sim, inclusive já existe um. Dá uma lida no tutorial novamente.
      Bjs

  5. Adoro mesmo o seu blog, é de super utilidade!

    Fui tentar fazer esse e aparece o seguinte erro:

    Erro ao analisar XML, linha 20, coluna 11: The element type “head” must be terminated by the matching end-tag “”.

    Sabe me dizer o motivo?

  6. Adorei ,mas o meu da erro ” Erro ao analisar XML, linha 8, coluna 34: Element type “meta” must be followed by either attribute specifications, “>” or “/>”.

  7. Post extremamente útil, de verdade. É possível mudar a cor dos comentários? Porque como meu layout é preto, as palavras somem.

    1. Oi Giovanna, acho que com esse tutorial não dá pra alterar a cor, mas dá uma olhada na sessão de desenvolvedor do Facebook, talvez tenha alguma alternativa.
      Bjs

  8. Deu erro novamente Erro ao analisar XML, linha 8, coluna 34: Element type “meta” must be followed by either attribute specifications, “>” or “/>”.

    1. Oi Alicia, pesquisa por outros footer 1 ou 2. Cada template é diferente então você precisa conhecer o seu, saber quantas camadas de footer no post ele tem e aí coloca o código sempre na última.
      Bjs

    1. Oi Rafaela, pesquisa por outros footer 1 ou 2. Cada template é diferente então você precisa conhecer o seu, saber quantas camadas de footer no post ele tem e aí coloca o código sempre na última.
      Bjs

  9. Fiz tudo direito e não deu certo. Pensei que fosse por não ter achado <div class='post-footer-line post-footer-line-3 (só achei 2 e coloquei o código nesse último), mas não aparece. A página de comentários continua como antes.

  10. Olha eu de novo!!!Depois que descobri seu site viciei nele, hehehe…
    Tentei fazer, mas quando chega no ponto 4 que escolho a categoria e clico para criar o app aparece essa mensagem:
    This account is not authorized to manage apps. Please use your verified personal Facebook account to create and manage your apps.
    Isso porque estou tentando fazer da página do meu blog e não do meu perfil pessoal, será que é só por isso???

      1. =(
        mas será que se eu fizer da minha conta pessoal não vai vincular os comentários do meu perfil ao blog não?!? Porque é isso que eu não quero sabe…eu queria vincular os comentários da página do blog ao blog, não sei se você me entende!
        Estou encantada com seu blog, está me ajudando muito, acho que ainda vou te aperriar muito, kkkkkkkkkkkkk…
        Tem muita coisa que quero fazer no meu blog para deixar com minha cara, espero que você continue ensinando sempre porque irei vim aqui todos os dias para conferir, hehehe…
        Estou doida para saber como faz para colocar o vídeo do youtube no blog – ÚLTIMO VÍDEO – como tem no seu, espero que você ensine a fazer também ;)
        beijos
        =***

  11. Olá, tudo bem?

    Adorei o post, e fiz no meu blog.
    Queria saber se é possível somar os comentários do app do Facebook + os comentários do blogger para totalizar os comentários de um post. Só achei o código para WordPress não para Blogger =/

    Beijos

  12. Oi, eu nao encontrei o pois no meu template só vai até o line-2. O que eu faço? Eu coloquei os códigos no line-2 e nao funciona :( Obrigada :]

  13. Oi Karol amei a tutoria, mas o meu deu esse erro: Erro ao analisar XML, linha 9, coluna 32: Element type “meta” must be followed by either attribute specifications, “>” or “/>

    o que eu faço?

  14. Karoool eu mexi de novo, desconsidere meu primeiro comentário. Agora deu super certo. Amei seu blog, sua explicação é a melhor da internet cara. Vou te seguir com certeza :D Beijos

  15. Acho que eu tenho uma dúvida muito específica! :|
    Já tenho a caixa de comentários do Face instalada no meu blog, mas não recebo de jeito nenhum notificações dos comentários pelo meu perfil, mesmo depois de ter ajustado a área de settings do meu APP. No entanto, na página do APP, há a informação de que eles serão atualizados pra uma tal Graph API v2.0, mas não faço ideia se esse “erro” de notificações tem a ver com isso. Será que criando um novo APP dá certo? Você sabe como me ajudar?
    Beijos!

  16. Olá, tudo bem?

    Estou com um probleminha e não sei mais o que fazer. Quando tem um comentário na caixa de comentários com o facebook, não aparece mais a caixa. Ela some. O que eu faço? Eu uso um lay feito por você. Dá uma olhada, Por favor.

    http://livrosfilmeseencantos.blogspot.com.br/

    Se não der para ajeitar, então como eu faço para remover a caixa de comentários com facebook.

    Muitooo Obrigada.

  17. Oi, Karoline!
    Não estou conseguindo achar “post-footer-line post-footer-line-3″. No meu eu só encontro o 1 e o 2.
    Eu até tentei colocar no 2 mais não aparece nada. o QUE EU FAÇO?

  18. Oi, Karoline!
    Não estou conseguindo achar “post-footer-line post-footer-line-3″. No meu eu só encontro o 1 e o 2.
    Eu até tentei colocar no 2 mais não aparece nada. o QUE EU FAÇO?

    1. Ana, da mesma forma, mas no passo 7 você deverá incluir o código no rodapé do seu post que deve ter outro nome, não será o mesmo nome que esse do exemplo.

  19. Oi Karol, tudo bem? =)

    Eu fiz tudo e deu super certo, mas… A caixa ficou em cima dos botōes de “próximo” e “anterior” daquele tutorial seu de páginas numeradas. Como faço pra inverter a ordem?

  20. Oi karol tudo bem?
    É o seguinte, deu tudo certo quando eu fiz no meu blog teste mais aí percebi que a opção de comentar usando o facebook so serve quando o post não tem comentários do blogger mesmo, você sabe me dizer o que possa estar dando errado?

    1. Oi Lorena, você deve ter colocado o código do passo 7 no local errado. Se ele for colocado dentro do código de comentários do Blogger, ficará então condicionado à ele. O correto é colocar fora, aí os comentários do Facebook aparecerão independentemente do que acontecer com os do Blogger.

  21. [Comentários do Facebook não aparece pra moderar]

    Quero resolver este problema para o site de uma cliente que é em WordPress. Criei um aplicativo no site do desenvolvedor, criei o plugin de comentário, adicionei os códigos em comments.php e ainda adicionei após a url o código “?p=” para identificar o post, e tudo OK. Porém, os comentários que faço nas páginas não aparecem na ferramenta de moderação do Facebook, o Facebook para Desenvolvedor. Alguém já passou por isso e sabe como resolver?

  22. Boa Tarde ! Mais uma vez com as dicas acima este blog resolveu meu problema. Inicialmente havia resolvido o problema com numeração de páginas, depois resolveu com postagens relacionadas e agora com comentários usando o face. Por outras fontes eu não estava conseguindo, por isso parabenizo mais uma vez. Único problema é que no meu blog em relação a postagens relacionadas e comentários usando o face é que usando notebook ou cpu ok ficou perfeito. Mas ao utilizar a visualização por um celular por exemplo ambos estão ocultos. Será que tem como resolver? :)

Deixe uma resposta