Como mostrar especial de imagem como miniaturas enquanto implementa share no Facebook?

StackOverflow https://stackoverflow.com/questions/689295

  •  22-08-2019
  •  | 
  •  

Pergunta

Eu estou tentando implementar compartilhar este método. Eu estou usando o código da seguinte 

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

Agora, quando o Facebook está mostrando isso mostrando algumas miniaturas no lado esquerdo. Estas imagens são captadas do meu site. Como posso escolher uma imagem em particular como miniaturas ou pelo menos parar isso mostrando miniaturas?

Você pode verificá-lo com o meu endereço do blog .

Foi útil?

Solução

Este post parece ter a sua resposta: http://blog.capstrat.com/articles/facebook-share -thumbnail-image /

Especificamente, usar um tag com o seguinte: 

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

O nome da imagem deve ser o mesmo que no exemplo.

Clique em "certificando-se o Works Preview"

Nota: As tags podem ser correto, mas o Facebook só raspa a cada 24 horas, de acordo com sua documentação. Use a página de Facebook Lint para obter a imagem para Facebook.

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

Outras dicas

De especificação do Facebook, usar 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 Compartilhar

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

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

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

Facebook usa og:tags eo Open Graph Protocol para decifrar o que informações a serem exibidas ao visualizar a sua URL em uma share de diálogo ou em um feed de notícias no Facebook.

O og:tags conter informações como:

  • O título da página
  • O tipo de página
  • A URL
  • O nome sites
  • A descrição da página
  • Facebook de de administradores da página (no facebook) user_id

Aqui está um exemplo (retirado do facebook documentação ) de algum og: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 ter implementado a marcação correta do og:tags e definir seus valores, você pode testar como o Facebook vai ver o seu URL usando a Facebook Debugger . A ferramenta depurador também irá destacar os problemas que encontrar com o og:tags na página ou a falta-de.
Uma coisa a ter em mente é que o Facebook não fazer alguns cache em relação a esta informação, de modo a fim de que as alterações tenham efeito a sua página terá t ser raspados como indicado na documentação:

Edição Meta Tags

Você pode atualizar os atributos de sua página, atualizando seus da página Tag. Note-se que og: título e og: tipo são apenas editável inicialmente - após a sua página recebe 50 gostos o título se torna fixo, e depois de sua página recebe 10.000 gostos do tipo torna-se fixa. Estas propriedades são fixos para evitar os usuários surpreendentes que gostava a página já. Alterar o título ou tipo etiquetas depois destes limites são alcançados não faz nada, a sua página mantém o título original e tipo.

Para que as alterações sejam refletidas no Facebook, você deve forçar sua página a ser raspada. A página é raspado quando um administrador para os cliques da página o botão Curtir ou quando o URL é inserido no Facebook URL Linter Facebook Debugger ...

Eu 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 vai substituir a imagem com a primeira imagem disponível que atenda aos critérios na página. Outro fato é que o mínimo exigido é incluir os 3 Metas que o Facebook exige o og: image para ter 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" />

Debug sua página com Facebook depurador e corrigir todos os avisos e ele deve funcionar como um encanto! https://developers.facebook.com/tools/debug

Eu estava tendo os mesmos problemas e acredito que já resolveu. Eu usei a tag link meta como mencionado aqui para apontar para a imagem que eu queria, mas o fundamental é que se você fizer isso FB não vai puxar quaisquer outras imagens como opções. Além disso, se sua imagem é muito grande, você não terá nenhuma escolha em tudo.

Aqui está como eu fixo meu site http://gnorml.com/blog/facebook- link-thumbnails /

Aqui está como isso funciona tudo:

  1. Você precisa a capacidade de acessar o código HTML na página especial que você está compartilhando. Ele provavelmente vai trabalhar todo o site também se você usar um arquivo de cabeçalho comum. Eu não tentei isso, mas ele deve funcionar. Você só vai ter a mesma imagem para todas as páginas se você fizer isso, porém.

  2. Você precisa adicionar essas tags meta HTML na página da. Ele não funcionará se você colocá-lo no. Certifique-se personalizar por seu 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" />
  1. Salvar
  2. Abrir um post fresco Facebook, e tente novamente a página que você queria compartilhar.
  3. Se você está tendo problemas ... você pode depurá-lo com esta ferramenta Facebook. Parece mais geeky do que é. Diz-lhe que o Facebook está vendo quando você postar na URL para ação.

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

Big Dica .. Verifique se o “aspas” são os mesmos em seu HTML (que deverá ser parecido com 2 marcas retas e sem curvas ... às vezes programas de mudar estes para fontes diferentes e Goofs o código.

compartilhando no Facebook: Como melhorar seus resultados personalizando a imagem, título e texto

A partir do link acima. Para a melhor participação possível, você vai querer sugerir 3 peças de dados em seu HTML:

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

Esta realizado pelo seguinte, colocado dentro da tag 'cabeça' do seu HTML:

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

Se você site é HTML estático, você vai ter que fazer isso para cada página usando seu editor de HTML.

Se você estiver usando um CMS como o Drupal, você pode automatizar um monte de que (veja o link acima). Se você usa WordPress, você provavelmente pode implementar algo semelhante usando o exemplo Drupal como uma diretriz. Espero que você encontrou estes útil.

Finalmente, você sempre pode editar manualmente suas mensagens de acções. Consulte este exemplo com ilustrações .

A maneira mais fácil que eu encontrei para definir Facebook Open Graph para cada artigo Joomla, era lugar no com_content / article / override default.php, 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;

Isto irá colocar meta tags og na cabeça com detalhes de artigo atual.

Não afiliado a StackOverflow
scroll top