Como compartilhar um link de seu blog no Facebook sem erros

em 9 de março de 2016

Como compartilhar um link de seu blog no Facebook sem erros

Não é de hoje que nós, blogueiros, enfrentamos a dificuldade que é compartilhar uma postagem do blog no Facebook e o plugin não "puxar" a imagem do post.
Ele, o botão de compartilhar, captura tudo: imagem da sidebar, cabeçalho do blog, imagem de perfil... menos a bendita foto do post que queremos.

Como o botão Curtir/Compartilhar é gerado por um aplicativo do próprio Facebook não havia nada que a gente pudesse fazer.
Havia, claro, algumas dicas, sendo que compartilhar a postagem diretamente no Facebook e carregar a imagem manualmente era a mais indicada. Eu mesma fazia assim e a recomendava.

Mas acontece que há algum tempo venho testando um código de ativação que finalmente tem uma taxa de sucesso alta, então agora sim vale a pena compartilhar e ensinar.
Vamos aprender?


Antes de tudo, a descrição do blog


Antes de mais nada você precisa ativar, em seu blog, a opção Descrição da pesquisa. E, claro, precisa sempre colocar em seus posts, em todos eles, a descrição do post.

Para ativar o campo Descrição da pesquisa faça assim: vá ao painel de seu blog e clique em Configurações, depois clique em Preferências de pesquisa.
Na página que abrir localize o campo Metatags e na área destinada à descrição clique em Editar. A seguir marque sim na pergunta Ativar a descrição de pesquisa?
Coloque a descrição de seu blog (curta, não ultrapasse 150 caracteres) e salve.
Agora, sempre que você fizer um post notará que na lateral direita do editor de postagens aparece um campo chamado Descrição da pesquisa.
Clique nele, coloque a descrição do post que estiver fazendo e ao terminar clique em Concluído.
Sim, isso é parte fundamental para que a imagem de sua postagem tenha mais chances de ser capturada corretamente pelo plugin do Facebook.
Está concluída a primeira parte do tutorial.


E as imagens, hein?


Agora preste atenção ao que vou explicar:
Sempre que for editar a imagem do seu post, em especial a primeira imagem, tenha atenção redobrada quanto ao tamanho dela.
Explico:
O plugin do Facebook "pede" imagens grandes, acima de 600px de largura e 350px de altura.
Atualmente eu tenho padronizado as imagens do blog (ao menos a primeira) em 680px de largura, com altura em geral acima de 400px.
Isso importa pois o plugin do Facebook sempre vai buscar as imagens maiores, que mais se aproximam do seu padrão.
Por isso que algumas vezes esse plugin capta o cabeçalho, ou a foto do banner da sidebar.
Por causa, entre outras coisas, do tamanho da imagem do post.
Então, imagem grande sempre, acima de 600px de largura.


Finalmente, o código de marcação OpenGraph


Agora vamos à parte final e extremamente importante do tutorial de hoje: os códigos para ativar o plugin do Facebook e possibilitar (ou no mínimo aumentar as chances) o compartilhamento correto das postagens.
Abra o painel de seu blog e clique na aba Modelo.
Clique em Editar HTML.
Dentro da caixa do código tecle Ctrl+F e dentro da caixa de busca que abrir digite <head> e aperte Enter para localizar.
Imediatamente abaixo disso cole este código:


Copiar o código

Salve.
Só isso.
Mas tem uma observação: pode demorar um pouco (varia de horas à dias) para que o Facebook reconheça a marcação que foi inserida.
Então, tenha paciência.
No caso do meu blog deu certo instantaneamente.

Quer fazer um teste?
Depois de realizar todo o procedimento acima explicado (ativar a descrição da pesquisa, editar a imagem do post no tamanho correto, inserir a descrição no post e inserir o código de marcação do Facebook no template) copie o endereço de seu post, esse feito do jeito que indico (imagem correta e descrição da pesquisa) e clique aqui.
É a página Open Graph Object Debugger, do Facebook.
No campo Enter a URL, access token, or Open Graph Action ID cole o endereço de seu post.
Não é do blog, é do post.
Algo assim: http://www.elainegaspareto.com/2014/07/costeleta-de-porco-bem-acompanhada.html
A seguir clique em Debug.
Se tudo deu certo aparecerão os dados de sua postagem, a imagem que será compartilhada, a descrição, etc...



Tenho perguntas...


Pode não funcionar?
Sim, pode não funcionar em todos os posts. Eu, aqui no blog, tenho uma taxa de sucesso de mais de 90% mas mesmo realizando todos os procedimentos (imagem certa, descrição, etc) ainda tem posts que simplesmente o plugin captura errado a imagem. O que eu faço? Sento e choro...

Não consigo achar onde colar o código no template...
Consegue sim. Todo template do Blogger tem essa tag de abertura. Está bem no começo do código fonte.

Não tenho conta Facebook...
Então não vai conseguir acessar a página Open Graph Object Debugger.
E nem curtir ou compartilhar algo, claro.
Mas pode realizar o tutorial sem problemas pois os botões visam prioritariamente os leitores do blog.

Fiz tudo certinho, esperei dias e ainda assim o plugin continua mostrando imagens erradas em alguns posts...
Como eu disse antes a taxa de sucesso é alta, mas não é 100%.
Entretanto vale a pena pois o plugin do Facebook vem sendo aprimorado e creio que atingirá a "perfeição" em breve.
Assim como foi com o Google+: antes as imagens não eram capturadas corretamente, hoje esse erro não ocorre mais.




Tem mais perguntas?
Quer partilhar sua experiência com o compartilhamento de postagens do blog nas redes sociais?
Deixe seu comentário!
Sua contribuição ou pergunta pode ajudar outras pessoas!

Alguém que escreve. Especialista em si mesma. Leitora voraz. Blogueira apaixonada. Propriedade (atualmente) de 3 cachorras e um cachorrinho muito levado. Casada desde 1995 com o mesmo marido. Feliz.

17 comentários , comente também!

  1. OMG! Ela lê pensamentos!!! Tava procurando algo assim faz tempo!!! Obrigada, minha querida!
    Beijo grande para vc!!! :)

    ResponderExcluir
  2. Oi, Elaine!
    Estou entrando em contato contigo, porque estou com um problema no meu blog e não sei como resolver.
    Começaram a aparecer letras enormes, sem eu que eu consiga identificar o motivo.
    Meu blog é o http://roccana2.blogspot.com.br/
    Te "conheço" através do blog da minha querida Lúcia, do "Sem Medida".
    Meu email é roccana@gmail.com
    Vc pode me ajudar?
    Desde já, agradeço!

    ResponderExcluir
  3. Sim. Você é demais! Tem meses que percebo isso e sempre tenho que enviar a foto manualmente. Muito obrigada por nos ajudar! Sucesso!

    ResponderExcluir
  4. Puxa, q dica bacana!! E mt bem explicadinho!!!
    Obrigada por compartilhar!

    ResponderExcluir
  5. Fiz e deu super certo!Não aparece mais fotos aleatórias. Muitíssimo obrigada pela ajuda, havia parado de compartilhar os links no face justamente por causa do Face. Agora é só alegria!

    Beijão

    ResponderExcluir
  6. Olá. Indiquei seu Blog ao Premio Dardos Bloggers, passa lá e confira.
    http://voando-na-arte.blogspot.com.br/2016/03/felicidade-tremenda-meu-primeiro-premio.html.
    Abraços e sucesso.

    ResponderExcluir
  7. Elaine,

    Prezada colega de Blogosfera, eu te admiro. Minha admiração tem origem na observação dessa sua motivação nobre em compartilhar seu conhecimento sobre blogagem. Dessa maneira, assim, livre, de distribuir a todos o que sabe.

    Obrigado.

    Eliseu
    www.ubeblogs.net
    http://belverede.blogspot.com.br

    ResponderExcluir
  8. Realmente, você lê pensamentos! Eu vim aqui pedir para você nos ajudar com isto e já estava pronto!
    Fiz e já funcionou em menos de 1 minuto!
    Valeu, Elaine...muito obrigada! Os créditos já estão no blog!

    ResponderExcluir
  9. Elaine, muito obrigada pelo tutorial. Acabei de fazer esse procedimento em meu blog. Espero que funcione nele. Depois conto minha experiência com postagens no Facebook aqui, caso dê certo.

    Grande Abraço

    ResponderExcluir
  10. Olha... esse era um problema que estava tirando a minha paciência!! Tanto que resolvi fazer o compartilhamento manual na fan page. Mas como você mesma disse, o foco é o leitor! Fica chato o leitor compartilhar algo com uma imagem que não tem nada a ver com o que ele acabou de ler! Vou testar esse procedimento e volto aqui pra dizer se deu certo!! Quem quiser visitar o blog é só colocar buscar esse endereço www.guiasobre.com.br

    ResponderExcluir
  11. Oi! Gosto muito do seu blog e vou seguindo muitas das suas dicas. Tenho ideia de ter visto um post sobre como colocar os marcadores do blog acima do título em caixinhas coloridas como você tem agora, mas não estou mesmo encontrando. Será que você me poderia ajudar? Muito obrigada!

    ResponderExcluir
  12. Olá,

    Eu gostaria de parabenizar a autora pelos ótimos conteúdos trazido ao Blog.

    Iniciei minha trajetória no mundo dos blogs faz pouco tempo, final de março, e este blog me ajudou bastante com conteúdos relevantes que precisei para construir o meu. Falo lá de passeios e viagens que fiz com minha namorada. Tem pouco tempo, mas graças a elainegaspareto.com, tenho aprimorado meu conhecimento sobre divulgação, otimização dos conteúdos e edição do template blogger.

    Sei que desviei do assunto proposto pelo artigo, mas apenas queria deixar a parabenização e dizer que continue com o ótimo trabalho.

    Cordialmente,

    ResponderExcluir
    Respostas
    1. Lucas, muito obrigada pelas palavras gentis!
      Obrigada de verdade!

      Excluir
  13. Fiz o passo a passo completo, mas o meu ta dando esse erro:

    O resultado do analisador para este metadados não se encontraram os metadados de entrada. Provavelmente, isso foi causado pelos dados que estão sendo encomendados de uma forma inesperada , vários valores que está sendo dado para uma propriedade só esperando um único valor ou valores de propriedade para uma determinada propriedade ser incompatíveis. Aqui estão as propriedades de entrada que não foram vistos no resultado analisado : ' og : site_name , fb: app_id , FB: administradores , og : locale : locale , og : locale : alternate '

    ResponderExcluir
  14. Após 12 horas que fiz o passo a passo, aparece essa msg:

    O objeto na URL "http://www.oquefaltou.com/2016/07/wishlist-livros-de-youtubers.html" do tipo "article" é inválido porque o valor "xxxxx" fornecido para a propriedade "fb:app_id" não pôde ser analisado como o tipo "fbid".

    Tem algum ide pra ser preenchido?

    ResponderExcluir
    Respostas
    1. Edwin, esses erros nunca apareceram pra mim, em nenhum dos testes que fiz e em nenhum dos templates que personalizei usando as metatags.
      Não faço ideia do que pode ser mas recomendo o seguinte: apague todos os códigos inseridos e recomece, se certifique que não esqueceu nada, nem apagou sem querer algum sinal, aspa, etc...
      E tenha em mente que templates diferentes podem apresentar códigos diferentes e em alguns casos incompatíveis entre si...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…