Enviar Resumo da Postagem com o Botão Curtir - Descrição nos Posts

Alguns blogs têm problemas na hora de enviar seus posts para o facebook, pois quando clicamos no botão curtir ele não envia um resumo ou sinopse do post do blog junto para o facebook e o pior muitas vezes aparecem códigos variados em vez da descrição da postagem. Mas podemos corrigir isso colocando uma linha de código e fazer que o facebook receba automaticamente as primeiras linhas de cada post quando alguém clicar no botão curtir ou enviar.
blogger e facebook

Antes de fazer a alteração faça um teste no seu blog para ver se ele está enviando corretamente a descrição do post ao facebook, pois esse problema não é em todos os blogs.

Entre na pagina modelo e faça um backup do seu template por segurança antes de mexer no código HTML. Agora clique em editar HTML, marque a opção Expandir modelos de widgets e coloque esse código:
<meta expr:content='data:post.snippet' name='description'/>

código html do botão curtir do facebook

O lugar pode variar um pouco, mas normalmente funciona normalmente antes do código do resumo da postagem (<b:if cond='data:post.hasJumpLink'>) ou depois do código dos botões de redes sociais.

Isso na verdade não é um código especifico para o facebook, mas ele gera uma descrição usando meta tags normais, ou seja, tem mais relação com técnicas de SEO do que propriamente com o facebook. Portanto pode ser útil para qualquer rede social ou até mesmo para o Google melhorar a posição do seu blog nos resultados das buscas. Veja outras informações sobre Mudanças nos Resultados das Buscas do Google.

Nós testamos esse código junto com as meta tags de descrição e palavras chaves no inicio do HTML dentro de head como falamos neste tutorial: Personalizar e Otimizar Título do Blog - Aparecer no Google, mas não deu certo por isso que achamos essa outra maneira de colocar a descrição das postagens no blogger.

Esperamos que gostem deste e aproveitei para testar e curtir esse post no facebook clicando no botão do facebook. Assim poderá ver que realmente o código é simples e funciona.

45 comentários:

  1. Oi amiga!!!
    Estava passeando pela net e encontrei teu blog, que me encantou!!
    Sou do blogueiras unidas, n° 683,vem me visitar tbém, meu blog está cheinho de graficos e moldes e em breve estou preparando um sorteio de mimos...
    Te aguardo aqui.. bjus
    JANE
    http://artesdajanemarcia.blogspot.com

    ResponderExcluir
  2. achei de testar no meu blog e deu certo agora ele manda as primeiras linhas do post como vc disse

    espero que ajude com os resultados do google tb

    ResponderExcluir
  3. Estarei testando nos meus projetos..
    Mas acredito que podemos fazer alguma coisa semelhante pelo "Tweetfeed", que tem integração com Twitter e Facebook.

    Abraços...

    ResponderExcluir
  4. OIe!

    Não sei se vc pode fazer, mas tem pessoa como eu que sabe fazer montagens e tal...

    Até sem montar um template, mas na hora de corta e crias os códigos que o bixo pega...

    Isso ainda não sei fazer e também ainda não vi aqui no seu blog algo parecido...

    Tem como vc preparar um post só pra esse assunto?

    Obrigada...

    Hanan Mustafa

    ResponderExcluir
  5. Nossa, ótima dica!!! Isso acontece comigo sempre... Vou colocar lá no DSM, é claro!!!
    Muito obrigada por mais uma dica maravilhosa!!!!

    Mil Sweetkisses ♥
    www.docesonhodemenina.com.br

    ResponderExcluir
  6. Sheila Lima
    obrigado pelos elogios.

    Taynim Moda Islâmica
    não tem como fazer um tutorial mostramos como cortar as imagens e preparar no template porque são variações demais nas possibilidades de layout

    ResponderExcluir
  7. Certo...

    mais mesmo assim muito obrigada...

    Com o que vou lendo no seu blog, irei aprendendo a cada dia mais... Ainda chego lá *rs

    Obrigada mesmo!

    ResponderExcluir
  8. Olá Fabiano!

    Apesar de não deixar comentários com frequência, sou um assíduo leitor do seu blog, diariamente passo por aqui para checar as novidades, parabéns por mais esta dica. Fiz o ajuste solicitado e agora, sim, aparece no Facebook o resumo da descrição da postagem.

    Um abraço,

    Wellington Ferreira

    ResponderExcluir
  9. Ola Fabiano, parece incrivel mas não funcionou, inclusive estou com um blog "limpo". Criei apenas para testes e nao funcionou o bendito do resumo da descricao da postagem. Vou continuar tentando!

    ResponderExcluir
  10. Tem como voce colocar um trecho maior do html onde voce inseriu a metatag?

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

    ResponderExcluir
  12. Fabiano, como te agradecer meu caro amigo. Já enfrentava este problema desde muito e nem conseguia pesquisar o termo certo para encontrar uma solução - que veio contigo. Obrigado, de coração!

    ResponderExcluir
  13. Boa tarde Fabiano! Depois de muito tentar está funcionando perfeitamente! Acredito que o blogger estava pegando algums historico entao exclui todos os posts e publiquei-os novamente. Daí funcionou! Muito obrigado pela dica, pela atenção e paciência!

    ResponderExcluir
  14. Ricardo
    esse código não tem um lugar exato no html

    pode ser depois do post.body ou post-footer-line post-footer-line-2

    ResponderExcluir
  15. o efeito é imediato ou poderá demorar até começar a aparecer correctamente no Facebook?

    ResponderExcluir
  16. era para funcionar na hora. clique f5 para atualizar a pagina do seu blog.

    mas isso funciona na pagina da postagem

    ResponderExcluir
  17. Fabiano,
    eu coloquei antes de:)
    como você indicou. Abraços

    ResponderExcluir
  18. Boa Fabiano!!! Meu blog estava com esse problema,eu ja estava perdendo a paciencia,tinha trocado o template a pouco tempo e ñ tinha percebido esse problema,ja estava pensando em voltar p/ o template velho d novo...valeu meu peixe vc é o cara dos códigos...Parabéns! Sucesso!!!

    ResponderExcluir
  19. Muito Bom Funcionou direitinho!!! (só nao funciona com postagens antes ja curtidas)

    ResponderExcluir
  20. Olá, Fabiano!
    Segui suas dicas, mas não consegui corrigir o problema que tenho ao compartilhar um post no Facebook. Ao invés de aparecer um trecho do post, aparece um trecho do primeiro comentário feito. Tentei colocar o código indicado antes do código do resumo da postagem e não funcionou. Coloquei depois do código de rede social (uso o botão de compartilhamento Seo Master - SoBoo) e também não funcionou.
    O que posso fazer agora?

    ResponderExcluir
  21. normalmente esse código resolve porque cria uma descrição para a pagina, infelizmente não sei como ajudar

    ResponderExcluir
  22. Coloquei esse código ontem e consertou o problema. mas hoje a imagem do link não aparece, o problema aconteceu com todos que compartilharam o link, sumiu a descrição e a imagem.

    Será que tem algo haver ou é só bug do facebook?

    ResponderExcluir
  23. Anonimo
    não posso afirmar com certeza, mas acho que o facebook está fazendo algumas mudanças.

    esses dias algumas vezes que fui enviar minhas postagens usando o botão do addthis ao facebook deu erro (não apareceu a descrição ou imagem) mas voltou ao normal sozinho e por isso acho melhor aguardar antes de tentar mexer no html do seu blog

    ResponderExcluir
  24. No meu caso o problema ocorre assim: De uns 15 dias pra cá, sempre que eu compartilho os posts recentes do meu blog ou curte lá no Facebook. Aparece somente a URL do post e a principal embaixo, sem imagem, sem descrição nem nada. Tentei seu tutorial, mas nada mudou.
    Busquei algumas dicas por aí e quase todos me disseram que eu teria que configurar o Open graph, tentei e piorou tudo, eu colocava qualquer link por lá e sempre aparecia um link especifico escolhido por eles.
    Pensei eu tenho backup vou usá-lo, fiz e nada mudou mas subitamente o facebook voltou para o problema inicial. E estou nele até hoje. Tem alguma idéia de como me ajudar? Isso acontece somente com os posts mais recentes.
    Grata!

    ResponderExcluir
  25. tente colocar novamente o código da descrição no seu html deve ser esse o problema.

    é que os templates variam muito então precisa testar em varios lugares do html se não der certo no primeiro.

    ResponderExcluir
  26. "normalmente esse código resolve porque cria uma descrição para a pagina, infelizmente não sei como ajudar"

    Do nada, o problema se resolveu aqui. Eu mantive o tal código que vc pediu pra colocar e que na hora não tinha resolvido. Será que o efeito só se deu depois de algum tempo ou era algum bug que foi resolvido?

    Abraço!

    ResponderExcluir
  27. Olá, encontrei seu site pelo google testei o código mas tbm não funcionou. No meu caso não aparece a descrição, é parecido com o caso da guria acima, não aparece imagem só o link e já faz mais de um mês. Troquei o layout recentemente será que isso faz diferença? Vc sabe porque a imagem não aparece nos links?

    ResponderExcluir
  28. pode algo com o layout, mas as vezes o botão de compartilhar dá erros mas volta ao normal sozinho

    ResponderExcluir
  29. Eu fiz isso e na hora não funcionou mas passou a funcionar em 3 dias. Obrigada!

    Mas eu tenho uma outra duvida, quando compartilham a url principal do meu blog no Facebook aparece na descrição do link trechos de postagens antigas. Mas eu queria que fosse que nem aki com seu blog, quando eu coloco o link dele no facebook aparece uma descrição do conteudo.

    Como faço pra ficar igual ao seu?

    ResponderExcluir
  30. Carla Lopez
    o código que usamos é esse do tutorial.

    tente usar o código assim:

    < b:if cond='data:blog.pageType == "item"' >
    < meta expr:content='data:post.snippet' name='description'/ >
    < /b:if >

    ResponderExcluir
  31. Fabiano,

    Eu com o temo tendo esse problema conseguir resolve-lo com técnicas SEO, quando comecei estar na área de meta tags, conseguir ver o resumo do meu texto através de cada compartilhamento no Facebook e outras redes sociais.

    Abraços

    ResponderExcluir
  32. No meu caso, quando alguém clica o botão 'curtir', o link vai para o facebook associado com o primeiro comentário.

    Fica muito esquisito!

    Coloquei o código que vc ensinou e espero que funcione com o resumo das postagens.

    Obrigado!

    ResponderExcluir
  33. Pensa em uma pessoa que passou um bom tempo pesquisando no google e em sites de otimização de blog essa opção ou tutorial que realmente funcionasse?

    Adorei o tutorial! Obrigada!

    Abraços,

    ResponderExcluir
  34. Olá Fabiano. Obrigado pela resposta mas, não consigo encontrar o código " meta expr:content='data:post.snippet' name='description'/>" em expandir widget nem o "" . Alguma idéia ? Deve ser por isso mesmo que não consigo enviar os resumos para o facebook e deve ser por isso que a minha página aparece assim no google : http://imageshack.us/a/img339/9631/imagemmi.jpg. E eu já defini uma meta tag com a descrição do site e utilizei um meta tag checker e apareceu lá tudo certo.

    Outra coisa : é normal o google demorar um pouco a indexar as páginas ? É que em outros blogs, ele começou logo a indexar as páginas.
    Este blogue agora é novo, e só comecei a submeter o site nos motores de buscas e no webmaster tool ontem.

    Desculpa se vai para aqui uma grande confusão mas se puder, esclareça-me aqui estas dúvidas sfv.
    Abraço.
    Wilker

    ResponderExcluir
  35. Ah, só para ter uma idéia , é assim que aparece no facebook : http://imageshack.us/a/img51/8109/errotu.jpg.

    Fui ao meu blogue antigo e agora aparece a mesma coisa só que ao invés do titulo e descrição do blogue, no meu outro aparece "blogger sign in" nada mais.
    Já não entendo nada.

    ResponderExcluir
  36. as imagens são mesmo um problema, dependendo o facebook pega imagem do cabeçalho ou sidebar.

    ainda não achei como resolver isso em todos os posts.

    na pagina de ajuda do facebook tem o código para você escolher a imagem, mas seria a mesma imagem para todos os posts

    ResponderExcluir
  37. Hummm, obrigado Fabiano. Agora apenas estou a ter problemas com o google +1 que quando compartilho tenho de seleccionar manualmente a foto do post porque aparece primeiro o logo que escolhi para o meu site.
    Tirando isso as coisas estão a correr bem...
    Abraço e continuação de um bom trabalho :)

    ResponderExcluir
  38. Comigo acontecia de aparecerem as primeiras linhas da mensagem nos comentários ou do próprio comentário, quando havia algum e não texto do post...

    Mas com a sua dica, funcionou... valeu mesmo a dica

    ResponderExcluir
  39. Só uma coisa... pelo que vi, com os posts antigos, não mudou... continua pegando texto lá dos comentários, é 'normal' isso?

    ResponderExcluir
  40. luallessi os posts que já foram compartilhados não mudam...

    tente excluir seu histórico de internet porque quando você visita suas paginas talvez seu computador use uma versão antiga do seu blog

    ResponderExcluir
  41. talvez você tenha trocado algum outro código....

    eu uso deste jeito e testei agora pouco e funcionou normalmente...

    pode também ser um erro momentâneo, falha no carregamento da pagina

    ResponderExcluir
  42. UM DOS MELHORES BLOGS SEMPRE AJUDA QUANDO EU PRECISO APRENDI MUITO AQUI JÁ

    ResponderExcluir