Problemas com o compartilhamento do Facebook no Blogger

30 de janeiro de 2014

42 comentários:
Muitos blogueiros estão relatando este problema com o compartilhamento do eu blog no Facebook. Onde ao compartilhar um novo artigo, ele não seleciona a imagem correta como miniatura, ou cria uma descrição sem nexo, ou não relacionada ao artigo que esta sendo compartilhado. O sistema de compartilhamento do Facebook, faz uso do protocolo Open Graph, para uma melhor interação entre seu blog e o Facebook. E este é o grande vilão quanto ao compartilhamento no Blogger, que faz com que o conteúdo compartilhado nem sempre seja o mais adequado ao artigo. Abaixo, listo algumas possíveis soluções para o problema:

1. Usar imagens e descrições no início das postagens

Iniciar uma postagem utilizando uma descrição junto a uma imagem pode facilitar o sistema de compartilhamento a localizar os dados corretos a serem compartilhados. Fiz alguns testes utilizando este procedimento (até mesmo neste blog), e os resultados foram bastante satisfatórios.


Ao criar uma postagem, eu sempre faço uma breve descrição do conteúdo que está por vir, e ao lado insiro uma imagem como miniatura. Com isso, os meus compartilhamentos tiveram resultados mais satisfatórios, não apenas no Facebook, como ao compartilhar ao G+ também.

2. Usa resumos automáticos de postagens

Importantíssimo para o compartilhamento de postagens diretamente da página inicial do sue blog. O resumo automático de postagens cria uma descrição e miniatura a postagem, já com suas tags configuradas corretamente.

Explico como criar e configurar um resumo automático de postagens neste artigo:  Resumo automático de postagens "Leia mais" no Blogger.

3. Insira as tags do Open Graph em seu modelo

O Open Graph possui algumas meta tags que fazem de seu funcionamento mais simples. Estas tags devem ser configuradas em seu blog para apontarem automaticamente o conteúdo de cada artigo do seu blog.

O primeiro passo é adicionar o nomespace XML do facebook no HTML do seu blog. O nomespace está entre as primeiras linhas de código do seu blog, e é responsável por algumas configurações do HTML. Você encontrará algo assim:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Adicione este trecho ao código:
xmlns:og='http://ogp.me/ns#'
Por final, o nomespace ficará assim:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'> 


Com o nomespace já configurado,  bastará que adicionemos as tags do Open Graph dentro do Header. Clique dentro da caixa de códigos, pressione Ctrl + F e procure por:
<head>
Abaixo desta linha, cole o seguinte código:
<!-- Open Graph Meta Tags INÍCIO -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags FIM -->
Salve as alterações. Poderá levar algum tempo para que comece a funcionar corretamente.

E se não funcionar?

Independente de realizar todos os procedimentos citados acima, eu ainda tenho problemas com o compartilhamento do blogger no facebook. O procedimento que descrevo acima ajuda e muito, no entanto nem sempre ele é 100% funcional, por que existe uma grande dependência do protocolo citado. Vejo em meu blog que, em certos artigos, tudo funciona normalmente, já em outros, não aparece descrições, ou não aparecem imagens. Eu ainda acredito na possibilidade de uma incompatibilidade entre o sistema do Open Graph e o Blogger, mas nada que eu possa confirmar. Mas é isso ai, são dicas que podem ajudar.

42 comentários:

  1. Infelizmente fiz isto passo a passo, mas a miniatura da foto da postagem não aparece quando posto no face,somente do logotipo do blog. As postagens mais antigas aparecem, mas as novas não. meu blog é este: http://lujhowbrasil.blogspot.com.br/2013/11/a-volta-de-alice-ao-pais-das-maravilhas.html
    Coloquei no link da postagem que n aparece no face. O que eu faço?

    ResponderExcluir
    Respostas
    1. Olá Lu,

      Parece que este novo sistema de compartilhamento do facebook está com alguns problemas em relação ao blogger e sua compatibilidade. Tome de exemplo este meu blog, algumas postagens são compartilhadas sem problemas, com suas miniaturas e descrição exibidas corretamente, outras já não tem a miniatura correta, e já outras não possuem uma descrição. Essa instabilidade começou essa semana, com a atualização do recurso.. ou então, existe o outro lado, de ser um problema com o blogger.

      Abraços!

      Excluir
    2. USE O TUMBLR .COM AÍ VOCE PODE COMPARTILHAR DIRETO NO FACEBOOK É NO TWITTER ESQUECE O BLOGGER.

      Excluir
  2. Também estou com o mesmo problema. A miniatura que vai é só a do logo do blog. E semana passada era de uma pessoa que comentou um post. E não pega mais as imagens dos posts...

    ResponderExcluir
  3. Também estou com problema semelhante. Há postagens que aparecem as miniaturas das imagens da postagem e da foto do perfil. Em outras só aparecem a miniatura da foto do perfil, não consigo colocar miniatura da imagem que estão na postagem. Isso começou por esses dias.

    ResponderExcluir
  4. Olá, no meu caso, quando vou compartilhar um post do blog, aparece somente uma miniatura, e não mais várias, como aparecia antes. Desta forma, não consigo mais selecionar a imagem que gostaria de compartilhar no Facebook junto com o post. Como posso resolver isso, por favor? Obrigada!

    ResponderExcluir
    Respostas
    1. Olá Simone, tente inserir imagens relativamente quadradas nas postagens, pois isto pode influenciar diretamente na escolha das imagens como miniatura no momento do compartilhamento. Mas infelizmente isso não é algo certo, com 100% de certeza que funcionará, pois como sabemos, o compartilhamento do facebook no blogger não é lá grandes coisas.. Abraços!

      Excluir
    2. No meu caso a primeira vez que fiz um post linkando um post do meu blog no face apareceu as miniaturas para escolher do vídeo no post que era do youtube ,as outras postagens não apareceram mais as miniaturas somente a imagem principal do blog, sendo assim , não vale mais a pena ter blog , pois dificilmente as pessoas irão clicar para ir no blog ver , e antes as miniaturas do video do youtube atraia as pessoas a clicarem para ver o video , e eram enviadas para o blog para ver o post do blog e o vídeo do youtube , agora não faço mais isso , pois vale não vale a pena, somente posto youtube links diretamente no face

      Excluir
  5. Eu tambem to com esse problema acabei de abrir uma pagina no facebook, mas não consigo fazer as postagens do meu Blog selecionando uma foto, só tem a foto do logo do blog !

    ResponderExcluir
    Respostas
    1. Olá Marcus,

      Tente fazer o procedimento descrito acima, inserindo as tags no HTML.

      Amanhã estarei reformulando este tutorial, com novas dicas que podem ajudar.

      Abraços!

      Excluir
  6. Henrique quando eu compartilho as imagens no meu blog ele vai certinho, o problema é quando é videos não aparece a imagem do vídeo e sim do cabeçario do meu blog, vc tem ideia do que seja isso ?
    Tentei encontrar mais a maioria dos códigos não existem na minha template ...Por favor me ajuda ae brother...

    ResponderExcluir
    Respostas
    1. Olá Adriãn,

      Para que uma postagem com apenas videos ganhe uma miniatura, seria correto que insira uma imagem como miniatura na postagem. Exemplo: se você posta um vídeo qualquer, tire um print da tela do vídeo, e poste a imagem no início da postagem.

      Realmente desconheço outro método de fazer com que seja criadas miniaturas a vídeos a não ser este.

      Boa sorte!

      Excluir
  7. Usei o script acima mas de momento não funcionou. Acredito que como disse no post deva levar algum tempo. De qualquer forma consegui resolver este problema de compartilhamento de post no Facebook usando imagens maiores (se for muito pequena não resolve), uso imagens de 400px para acima e não dá problemas.

    ResponderExcluir
    Respostas
    1. Olá Aldo,

      Essa questão do tamanho das imagens é o procedimento mais eficiente, pois facilita na identificação dos elementos na página. Obrigado por comentar!

      Abraços!

      Excluir
  8. Henrique mesmo antes de ler seu artigo eu sempre coloquei a imagem no topo da postagem. Acontece que de 10 postagens 1 aparece com a foto da própria postagem as demais aparecem com a foto do meu perfil. Já até desabilitei a função de publicar automaticamente no Google +, mas se existe esse botão para facilitar o compartilhamento... Você tem como me ajudar? Meu blog: http://viciadoemlivro.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Claudio,

      Minha sugestão é que remova o gadget perfil temporariamente, e verifique se o problema deixa de ocorrer após isso.

      Abraços!

      Excluir
  9. Funcionou aqui, valew!!! Já estava desistindo haha

    ResponderExcluir
  10. No meu caso é diferente, não sei se você pode ajudar mas vou perguntar:
    Quando eu colo o link do meu blog (http://www.nomedoblog.blogspot.com.br) no facebook ele aparece uma foto de postagem, e não o logotipo. Você sabe se tem como arrumar isso ou não??

    ResponderExcluir
    Respostas
    1. Boa tarde!

      No seu caso será necessário substituir o trecho: "data:blog.postImageThumbnailUrl" pelo URL da imagem.

      Abraços!

      Excluir
  11. Muito bom, resolveu meu problema aqui..

    ResponderExcluir
  12. Olá Henrique, td bem?
    Meu amigo veja se pode me ajudar. Toda vez que vou compartilhar no facebook alguma postagem do meu blog (blogger) o texto abaixo da imagem não corresponde com o texto da postagem. O que pode ser?

    ResponderExcluir
  13. o meu problema é o título da postagem que não aparece quando compartilha no facebook

    ResponderExcluir
  14. No meu acontece o seguinte:
    Somente o primeiro post (alias, o post atual) não funciona. Os demais posts funcionam as imagens normalmente, porém, não aparecem os textos na hora de compartilhar. :/

    ResponderExcluir
  15. Olá Henrique,

    Estou com um problema no eu Blog e espero que possa me ajudar. É o seguinte, sempre compartilhei minhas postagens do blog no meu Facebook e de uns 2 meses para cá, sempre que clico no link do face abaixo da minha postagem, abre um verificador de palavras, dizendo que estou enviando um Spam e daí clico em cancelar o compartilhamento.
    Quando as pessoas vão clicar para entrar no Blog, não conseguem por aparece para elas como lixo eletrônico. O que posso fazer para resolver este problema.

    Desde já agradeço, desejando-lhe uma ótima semana.

    Shirley Nesi
    Blog : www.http/:passatemposeartesanatos.blogspot.com

    ResponderExcluir
  16. Eu parei de compartilhar meus poste no Facebook, porque o erro não é do blog, e sim do Facebook.
    OBS: Compartilhar no Google Plus, não a problema, é só a Droga do Facebook que acontece isso!

    ResponderExcluir
  17. preciso de ajuda quando compartilho no facebook esta aparecendo um imael de propaganda em vez do que eu publique, vo deixar o link da postagem aqui.publique no FC praver, favor..

    http://jonas-aguiar.blogspot.com.br/2015/04/dilma-critica-os-protestos-e-pessoa.html

    ResponderExcluir
  18. Funcionou! Nossa, muito obrigada pelo post útil!

    ResponderExcluir
  19. Ei funcionou perfeitamente cara muito obrigado, parabéns !! foi útil! de uma olhada no meu site se gosta de filmes hitfilmeshd.com vlw campeão.

    ResponderExcluir
  20. Caro amigo muito obrigado, fiz ontem as mudanças no meu blog e hoje ja começou a aparecer a foto da postagem, muito obrigado!

    ResponderExcluir
  21. Sempre que eu tento compartilhar uma post do meu blog para o meu facebook, aparece o facebook de outra pessoa! O que eu posso fazer para resolver isso?

    ResponderExcluir
  22. Coloquei os códigos. A imagem aparece de boas, já a descrição e o título do post, nem fodendo.

    ResponderExcluir
  23. Oi Henrique.
    Muito obrigado por este seu artigo.
    Estou montando um blog novo e não consigo que o blogspot.com.br compartilhe a variável og:description com o Facebook.
    Você pode me ajudar?
    Obrigado, Francisco

    ResponderExcluir
    Respostas
    1. Boa tarde,

      Tente os procedimentos do artigo, geralmente entram em funcionamento após alguns dias inseridos.

      Abraços!

      Excluir
  24. O que faço? Apareceu este erro: Erro ao analisar XML, linha 3, coluna 248: Element type "html" must be followed by either attribute specifications, ">" or "/>"

    ResponderExcluir
  25. Boa tarde. A foto depois de colocar o HTML no modelo, está aparecendo, mas a descrição da foto continua aparecendo o meu perfil. Pode ajudar?

    ResponderExcluir
    Respostas
    1. Boa tarde, Lauro.

      Demoram alguns dias para que as alterações surtam efeito no blog. Tente aguardar, pois provavelmente funcionará.

      Abraços!

      Excluir
  26. Encontraram uma solução para o problema? É que estou com esse problema também no blog.

    ResponderExcluir
  27. Observo a mesma coisa no meu... :'(
    Às vezes funciona, às vezes não... Até antes de ontem estava tudo funcionando, ontem fui tentar uma nova postagem e começou a aparecer o problema, ... gastei maior tempão tentando resolver esse problema, que bom que encontrei seu artigo, agora sei que não é só comigo... ^_^
    Muito obrigada!

    ResponderExcluir
  28. ótimo tutorial, bem explicado... porem, eu não consigo inserir esta linha de código xmlns:og='http://ogp.me/ns#'

    Erro ao analisar XML, linha 3, coluna 369: Attribute "xmlns:og" was already specified for element "html".

    ResponderExcluir
  29. muito util
    http://brunosantis.blogspot.com.br/

    ResponderExcluir