Como o Facebook Sharer selecionar imagens e outros metadados ao compartilhar a minha URL?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Ao usar o Facebook Sharer, o Facebook vai oferecer ao usuário a opção de usar uma de algumas imagens puxados a partir da fonte como uma prévia para o seu link. Como essas imagens selecionadas, e como eu posso garantir que qualquer imagem em particular na minha página é sempre incluídos nesta lista?
Solução
Como posso saber Facebook que imagem para usar quando a minha página é compartilhada?
O Facebook tem um conjunto de open-gráfico de meta tags de que olha para decidir qual imagem para mostrar.
As chaves de uma para a imagem Facebook são:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
e ele deve estar presente dentro da tag <head></head> no topo de sua página.
Se essas marcas não estão presentes, ele vai olhar para o seu método mais antigo de especificar uma imagem: <link rel="image_src" href="/myimage.jpg"/>. Se não estiverem presentes, o Facebook vai olhar para o conteúdo de sua página e escolher as imagens de sua página que respeitem os critérios de imagem share: A imagem deve ter no mínimo 200px por 200px, tem uma proporção de 3 máxima aspecto: 1, e em PNG, JPEG ou GIF formato.
Posso especificar várias imagens para permitir que o usuário selecione uma imagem?
Sim, você só precisa adicionar várias tags de imagem meta na ordem que você deseja que eles apareçam em O usuário será, então, apresentado com um diálogo de seleção de imagem:.
I especificado as tags de imagem meta apropriadas. Por que o Facebook não está aceitando as mudanças?
Uma vez que a url foi compartilhado, o indexador do Facebook, que tem um agente usuário de facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), irá acessar sua página e armazenar em cache as informações meta. Para forçar os servidores do Facebook para limpar o cache, use o Facebook Url Debugger / Linter Ferramenta que lançado em junho de 2010 para atualizar o cache e solucionar quaisquer problemas de meta tag na sua página.
Além disso, as imagens na página deve ser acessível ao público até o rastreador Facebook. Você deve especificar o URL absoluto como http://example.com/yourimage.jpg em vez de apenas / yourimage. jpg.
Posso atualizar estas meta tags com código do lado do cliente como JavaScript ou jQuery? Não. Bem como motor de pesquisa indexadores, o raspador Facebook não executar scripts assim que o que meta tags estão presentes quando a página é baixado são as meta tags que são usados ??para seleção de imagem.
Como adicionar essas marcas faz com que a minha página para não validar. Como posso resolver isso?
Você pode adicionar os namespaces necessários Facebook para o seu tag e sua página deve, em seguida, passar na validação:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
Outras dicas
Quando você compartilha Facebook, você tem que adicionar em seu html na seção head próxima meta tags:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
E é isso!
Adicione o botão que você deve de acordo com o FB lhe diz.
Toda a informação que você precisa está em 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:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
parâmetros de consulta link:
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 simples: você não precisa de nenhum js ou outras configurações. É apenas um elo cru HTML. Estilo do A tag em qualquer maneira que você quer.
Coloque a seguinte tag no head:
<link rel="image_src" href="/path/to/your/image"/>
A partir http://www.facebook.com/share_partners.php
Tanto quanto o que ele escolhe como padrão na ausência dessa marca, eu não tenho certeza.
Da minha experiência, o http://www.facebook.com/sharer.php não usar meta tags. Ele usa a seqüência que você passar. Veja abaixo.
http://www.facebook.com/sharer.php ? s = 100 & p [título] = Este É MEU tÍTULO & p [resumo] = Este é o meu resumo & p [url] = http: //www.MYURL.com&&p [imagens] [0] = http: //www.MYURL.com/img/IMAGEADDRESS
A meta tags trabalho com o Facebook Developer como / send botões, assim como a outras informações Open Graph. Então, se você usar um dos elementos reais do Facebook como os comentários e tal, que serão todos empate no material Open Graph.
UPDATE: Existem duas maneiras de usar o compartilhador * Nota do s versus o u valor na cadeia de consulta
?
1 ==> string: http://www.facebook.com/ sharer.php? s + conteúdo de cima
~~> vai puxar informações da string.
2 ==> URL: http: //www.facebook. com / sharer.php? u = url onde url é igual a uma url
real
~~> vai raspar a página fornecida no valor url
~~> Você pode testar teste os valores aqui: https://developers.facebook.com/tools/debug
maneira antiga, já não funciona:
<link rel="image_src" href="http://yoururl/yourimage"/>
Relatados nova forma, também não funciona:
<meta property="og:image" content="http://yoururl/yourimage"/>
Ele trabalhou de forma aleatória e desligando durante o primeiro dia eu implementei isso, não funcionou em tudo desde então.
A página linter Facebook, um utilitário que inspeciona sua página, relatos de que tudo está correto e não mostrar a miniatura Selecionei ... apenas que a página share.php em si não parece estar funcionando. Tem que ser um bug em cima da Facebook, que eles aparentemente não se importam para correção de cada relatório de erro sobre este problema que eu vi em seu sistema todos digamos resolvido ou fixo.
Para alterar título, descrição e imagem, precisamos adicionar algumas tags meta sob marca de cabeça.
PASSO 1:
Adicionar meta tags sob marca de cabeça
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
O próximo passo:
Clique no link abaixo
https://developers.facebook.com/tools/debug
Adicionar uma URL na caixa de texto (por exemplo http://www.test.com/ ) onde mencionou as tags. Clique no botão de depuração.
O seu feito.
Você pode verificar aqui https: / /www.facebook.com/sharer/sharer.php?u=http://www.test.com/
Em url acima, u = seu site link
aproveitar !!!!
Para segura HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
Eu tive esse problema e fixa-lo com a sugestão manuel-84 do. Usando uma imagem de 400x400px funcionou muito bem, enquanto a minha imagem menor nunca apareceu no participante.
Note que o Facebook recomenda uma imagem mínimo 200px quadrado como o og: tag de imagem: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Isto é o que funcionou para mim: eu coloquei o desejado miniatura da imagem do lado direito da página após a tag e tornando-se pequeno demais para ver ..
<img src="imagename.jpg" width="1" height="1" />
Eu não testei com a altura e largura 0 0 mas provavelmente ainda trabalho .. Isso não garante que o usuário irá selecionar esta imagem ..
Também parece que Facebook armazena em cache as miniaturas em sua página e does not sempre verificar se há novos .. tente adicionar esta para outra página no seu site e você verá que ele funciona.
Use diálogo feed do Facebook em vez de diálogo ação 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
Eu não poderia obter Facebook para escolher a imagem certa de um posto específico, então eu fiz o que está descritos nesta página:
Em outras palavras, algo como isto:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basicamente, você vai codificar uma instrução if no HTML do seu site para obtê-lo para alterar o conteúdo meta para o que você mudou para aquele post. É uma solução confuso, mas funciona.
