Como o Facebook Sharer seleciona Imagens e outros metadados ao compartilhar meu URL?

Ao usar o Facebook Sharer, o Facebook oferecerá ao usuário a opção de usar uma das poucas imagens retiradas da fonte como uma prévia do link. Como essas imagens são selecionadas e como posso garantir que qualquer imagem específica da minha página seja sempre incluída nessa lista?

Como eu digo ao Facebook qual imagem usar quando minha página é compartilhada?

O Facebook tem um conjunto de metatags de gráfico aberto que analisa para decidir qual imagem mostrar.

As chaves para a imagem do Facebook são:

  

e deve estar presente dentro da tag no topo da sua página.

Se essas tags não estiverem presentes, ele procurará pelo método antigo de especificar uma imagem: . Se nenhum estiver presente, o Facebook analisará o conteúdo de sua página e escolherá imagens de sua página que atendam aos critérios de imagem compartilhados: A imagem deve ter pelo menos 200 px por 200 px, ter uma proporção máxima de 3: 1 e em PNG. Formato JPEG ou GIF.

Posso especificar várias imagens para permitir que o usuário selecione uma imagem?

Sim, você só precisa adicionar várias metatags de imagem na ordem em que deseja que elas apareçam. O usuário será apresentado a uma checkbox de diálogo do seletor de imagens:
Seletor de imagens do Facebook

Eu especifiquei as meta tags de imagem apropriadas. Por que o Facebook não aceita as alterações?

Uma vez que uma url tenha sido compartilhada, o rastreador do Facebook, que tem um user agent do facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php) , acessará sua página e armazenará em cache a meta informação. Para forçar os servidores do Facebook a limpar o cache, use a ferramenta de debugging / linte do URL do Facebook que eles lançaram em junho de 2010 para atualizar o cache e solucionar quaisquer problemas de meta tag em sua página.

Além disso, as imagens na página devem estar publicamente acessíveis ao rastreador do Facebook. Você deve especificar URLs absolutos como http://example.com/yourimage.jpg em vez de apenas /yourimage.jpg.

Posso atualizar essas metatags com código do lado do cliente, como Javascript ou jQuery? Não. Assim como os rastreadores de mecanismos de pesquisa, o scraper do Facebook não executa scripts, portanto, quaisquer metatags presentes quando a página é baixada são as meta tags usadas para a seleção de imagens.

Adicionar essas tags faz com que minha página não seja mais validada. Como posso consertar isso?

Você pode adicionar os namespaces necessários do Facebook à sua tag e sua página deve passar pela validação:

  

Quando você compartilha para o Facebook, você tem que adicionar em seu html na seção head next meta tags:

    

E é isso!

Adicione o botão como deveria, de acordo com o que o FB lhe disser.

Toda a informação que você precisa está em http://www.facebook.com/share/

A partir de 2013, se você estiver usando facebook.com/sharer.php (PHP), você pode simplesmente fazer qualquer botão / link como:

 share on facebook 

parameters de consulta de links:

 p[title] = Define a page title p[summary] = An URL description, most likely describing the contents of the page p[url] = The absolute URL for the page you're sharing p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook 

É simples: você não precisa de nenhum js ou outras configurações. É apenas um link bruto em HTML. Estilize a tag A da maneira que você quiser.

Coloque a seguinte tag na head :

  

De http://www.facebook.com/share_partners.php

Quanto ao que escolhe como padrão na ausência dessa tag, não tenho certeza.

Pela minha experiência, o http://www.facebook.com/sharer.php não usa meta tags. Ele usa a string que você passa. Ver abaixo.

http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=THIS É O MEU TÍTULO & p [resumo] = ESTE É O MEU RESUMO & p [url] = http: //www.MYURL.com&&p [images] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

As metatags funcionam com os botões de like / send do desenvolvedor do Facebook, assim como as outras informações do Open Graph. Então, se você usar um dos elementos reais do Facebook, como os comentários e tal, tudo isso se encheckboxrá no material do Open Graph.

ATUALIZAÇÃO: Existem duas maneiras de usar o compartilhador * note o valor de s versus o valor de u na cadeia de consulta
1 ==> STRING: http://www.facebook.com/sharer.php?s + conteúdo de cima
~~> Irá puxar informação da corda.
2 ==> URL: http://www.facebook.com/sharer.php?u=url onde url é igual a um URL real
~~> Irá raspar a página fornecida no valor do URL
~~> Você pode testar os valores aqui: https://developers.facebook.com/tools/debug

Caminho antigo, não funciona mais:

  

Reportado novo caminho, também não funciona:

  

Ele funcionou aleatoriamente durante o primeiro dia em que o implementei, não funcionou desde então.

A página de linter do Facebook, um utilitário que inspeciona sua página, relata que tudo está correto e exibe a miniatura que eu selecionei … só que a própria página share.php não parece estar funcionando. Tem que ser um bug no Facebook, um que aparentemente eles não se importam em consertar, já que todo relatório de bug referente a esse problema que eu vi em seu sistema todos dizem resolvido ou corrigido.

Para alterar o título, a descrição e a imagem, precisamos adicionar algumas metatags na tag head.

PASSO 1 :
Adicionar meta tags na tag head

       

PRÓXIMO PASSO :
Clique no link abaixo
https://developers.facebook.com/tools/debug

Adicione seu URL na checkbox de texto (por exemplo, http://www.test.com/ ) onde você mencionou as tags. Clique no botão DEBUG.

Está feito.

Você pode verificar aqui https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

No URL acima, u = o link do seu website

APRECIAR !!!!

Para HTTPS seguro

  

Eu tive esse problema e consertei com a sugestão do manuel-84. Usar uma imagem de 400x400px funcionou muito bem, enquanto minha imagem menor nunca apareceu no compartilhador.

Observe que o Facebook recomenda uma imagem quadrada mínima de 200 px como a tag og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

Isso é o que funcionou para mim: coloquei a imagem em miniatura desejada na página logo após a tag e fiquei pequena demais para ver ..

  

Eu não testei com altura 0 e largura 0, mas provavelmente ainda vai funcionar .. Isso não garante que o usuário irá selecionar esta imagem ..

TAMBÉM, parece que o Facebook armazena as miniaturas em sua página e não a verifica sempre por novas. Tente adicioná-la a outra página em seu site e você verá que ela funciona.

Use o diálogo de feeds do facebook em vez de compartilhar a checkbox de diálogo para mostrar imagens personalizadas

Exemplo:

 https://www.facebook.com/dialog/feed?app_id=1389892087910588 &redirect_uri=https://scotch.io &link=https://scotch.io &picture=http://placekitten.com/500/500 &caption=This%20is%20the%20caption &description=This%20is%20the%20description 

Não consegui que o Facebook escolhesse a imagem certa de uma postagem específica, então fiz o que está descrito nesta página:

https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts

Em outras palavras, algo assim:

    

Basicamente, você vai codificar uma declaração if no HTML do seu site para que ela altere o meta-conteúdo para o que quer que você tenha alterado para aquela postagem. É uma solução confusa, mas funciona.