Como mostrar uma imagem particular como miniatura durante a implementação de compartilhamento no Facebook?

Estou tentando implementar esse método de compartilhamento. Estou usando o código a seguir

http://www.facebook.com/share.php?u=my_website_url

Agora, quando o Facebook está mostrando, mostra algumas miniaturas do lado esquerdo. Essas imagens foram retiradas do meu site. Como posso escolher uma imagem específica como miniatura ou pelo menos interromper a exibição da miniatura?

Você pode verificar isso com o endereço do meu blog .

Esta postagem do blog parece ter sua resposta: http://blog.capstrat.com/articles/facebook-share-thumbnail-image/

Especificamente, use uma tag como a seguinte:

<link rel="image_src" 
      type="image/jpeg" 
      href="http://www.domain.com/path/icon-facebook.gif" />

O nome da imagem deve ser igual ao do exemplo.

Clique em "Verificando se a visualização funciona"

Nota: As tags podem estar corretas, mas o Facebook apenas raspa a cada 24 horas, de acordo com sua documentação. Use a página do Facebook Lint para colocar a imagem no Facebook.

http://developers.facebook.com/tools/lint/

Nas especificações do Facebook, use um código como este:

<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />

Fonte: Facebook Share

Minhas tags estavam corretas, mas o Facebook só raspa a cada 24 horas, de acordo com sua documentação. Usando a página do Facebook Lint, a imagem entrou no Facebook.

Insira seu URL aqui e o FB atualizará os metadados de sua página:

https://developers.facebook.com/tools/debug (link atualizado)

O Facebook usa og:tagso protocolo Open Graph para decifrar quais informações exibir ao visualizar sua URL em uma caixa de diálogo de compartilhamento ou em um feed de notícias no Facebook.

Eles og:tagscontêm informações como:

• O título da página
• O tipo de página
• O URL
• O nome do site
• Uma descrição da página
• IDs de usuário do Facebook de administradores da página (no Facebook)

Aqui está um exemplo (retirado da documentação do Facebook ) de algunsog:tags

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>

Depois de implementar a marcação correta do og:tagse definir seus valores, você pode testar como o Facebook visualizará sua URL usando o Depurador do Facebook . A ferramenta de depuração também destacará quaisquer problemas encontrados com o og:tagsna página ou a falta dele.

Uma coisa a ter em mente é que o Facebook faz algum armazenamento em cache com relação a essas informações, portanto, para que as alterações tenham efeito, sua página terá que ser removida conforme indicado na documentação:

Editando Meta Tags

Você pode atualizar os atributos da sua página, atualizando as tags da sua página. Observe que og: title e og: type só podem ser editados inicialmente - depois que sua página receber 50 curtidas, o título ficará fixo, e depois que sua página receber 10.000 curtidas, o tipo ficará fixo. Essas propriedades são corrigidas para evitar surpreender os usuários que já gostaram da página. Alterar o título ou as tags de tipo depois que esses limites são atingidos não adianta nada, sua página retém o título e o tipo originais.

Para que as alterações sejam refletidas no Facebook, você deve forçar a remoção de sua página. A página é danificada quando um administrador da página clica no botão Curtir ou quando a URL é inserida no URL do Facebook Linter Facebook Debugger ...

Vejo que todas as respostas fornecidas estão corretas. No entanto, um detalhe importante foi esquecido: O tamanho da imagem DEVE ser de pelo menos 200 X 200 px, caso contrário, o Facebook substituirá a miniatura pela primeira imagem disponível que atenda aos critérios da página. Outro fato é que o mínimo necessário é incluir os 3 metas que o Facebook exige para que a imagem og: tenha efeito:

<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />

Depure sua página com o depurador do Facebook e corrija todos os avisos e deve funcionar perfeitamente! https://developers.facebook.com/tools/debug

Eu estava tendo os mesmos problemas e acredito que os resolvi. Eu usei a meta tag do link conforme mencionado aqui para apontar para a imagem que eu queria, mas o segredo é que se você fizer isso, o FB não puxará nenhuma outra imagem como opção. Além disso, se sua imagem for muito grande, você não terá nenhuma escolha.

Veja como consertei meu site http://gnorml.com/blog/facebook-link-thumbnails/

Veja como isso funciona:

1. Você precisa ter a capacidade de acessar o HTML na página da web específica que está compartilhando. Provavelmente funcionará em todo o site também se você usar um arquivo de cabeçalho comum. Eu não tentei isso, mas deve funcionar. Você apenas obterá a mesma imagem para todas as páginas se fizer isso.

2. Você precisa adicionar essas metatags HTML na página do. Não funcionará se você colocá-lo no. Certifique-se de personalizar de acordo com sua a) imagem, b) descrição, c) URL e d) título.

Um exemplo real.

<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />

<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />

<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />

<meta property="og:title" content="Coaches Wisdom Telesummit" />

3. Salve 
4. Abra uma nova postagem no Facebook e tente novamente a página que deseja compartilhar.
5. Se você estiver tendo problemas ... você pode depurá-los com esta ferramenta do Facebook. Parece mais geek do que é. Ele informa o que o Facebook está vendo quando você publica no URL para compartilhar.

https://developers.facebook.com/tools/debug/og/object/

Grande dica .. certifique-se de que as “aspas” sejam as mesmas em seu HTML (elas devem se parecer com 2 marcas retas e sem curvas ... às vezes os programas mudam para fontes diferentes e isso bagunça o código.

Compartilhando no Facebook: como melhorar seus resultados personalizando a imagem, o título e o texto

No link acima. Para o melhor compartilhamento possível, você vai querer sugerir três dados em seu HTML:

• Título
• Pequena descrição
• Imagem

Isso é realizado pelo seguinte, colocado dentro da tag 'head' do seu HTML:

• Título: <title>INSERT POST TITLE</title>
• Imagem: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
• Descrição: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>

Se o seu site for HTML estático, você terá que fazer isso para todas as páginas usando o editor de HTML.

Se estiver usando um CMS como o Drupal, você pode automatizar muito dele (veja o link acima). Se você usa o wordpress, provavelmente pode implementar algo semelhante usando o exemplo do Drupal como uma diretriz. Espero que você tenha achado isso útil.

Finalmente, você sempre pode editar manualmente suas postagens compartilhadas. Veja este exemplo com ilustrações .

Eu também tive um problema em um site em que estava trabalhando na semana passada. Implementei uma caixa semelhante e testei a caixa semelhante. Em seguida, adicionei uma imagem ao meu cabeçalho (ob: meta de imagem). Ainda assim, a imagem correta não apareceu na minha notificação do Facebook.

Tentei de tudo e cheguei à conclusão de que cada implementação de um botão like é armazenada em cache. Digamos que você registre o clock no botão Curtir no url A, especifique uma imagem no cabeçalho e a teste clicando no botão Luke novamente no url A. Você não verá a imagem porque a página está armazenada em cache. A imagem aparecerá quando você clicar no botão Curtir na página B.

Para redefinir o cache, você tem que usar a ferramenta de depuração de lint mencionada acima e validar todos os Urls daqueles que estão em cache ... Essa foi a única coisa que funcionou para mim.

A maneira mais fácil que encontrei de definir o Facebook Open Graph para cada artigo Joomla, foi colocar em com_content / article / default.php override, próximo código:

$app    = JFactory::getApplication();
$path   = JURI::root();

$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : 
    $document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
    $document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
 endif;

Isso colocará tags meta og no cabeçalho com detalhes do artigo atual.