Como o “Facebook Publisher” seleciona a imagem, o título e o conteúdo de um site compartilhado?

Esta é uma pergunta sobre o Facebook Publisher . Quando compartilho um link, o Facebook pega um texto, intitula uma imagem do site e constrói uma visualização para o usuário. O usuário pode editar a visualização, escolher entre uma das várias miniaturas diferentes e depois publicá-la no perfil do Facebook.

Aqui está uma captura de tela para ilustrar o ponto:

Como o aplicativo Publisher captura as imagens e o texto do link? Existem aplicativos semelhantes que funcionam para outros aplicativos populares da Web, qualquer um dos aplicativos do Google, blogs do Wordpress etc.?

Fiz uma pergunta semelhante há alguns meses e parece que o Facebook usa oEmbed , mas parece que o oEmbed apenas incorpora conteúdo. Também li que o oEmbed funciona apenas com provedores oEmbed. O Publicador do Facebook trabalha com quase todos os sites.

O Facebook usará qualquer meta tag de gráfico aberto, se presente, para o título e a imagem etc. (por exemplo, og: title). A documentação do facebook para o Open Graph Protocol explica isso em mais detalhes:

O protocolo Open Graph define quatro propriedades necessárias:

og: title - O título do seu objeto como ele deve aparecer no gráfico, por exemplo, "The Rock".

og: type - O tipo do seu objeto, por exemplo, "filme". Veja a lista completa dos tipos suportados.

og: image - Um URL de imagem que deve representar seu objeto no gráfico. A imagem deve ter pelo menos 50 px por 50 px e ter uma proporção máxima de 3: 1.

og: url - O URL canônico do seu objeto que será usado como seu ID permanente no gráfico, por exemplo, http://www.imdb.com/title/tt0117500/ .

Além disso, estendemos os metadados básicos para adicionar dois campos obrigatórios para conectar sua página ao Facebook:

og: site_name - Um nome legível por humanos para o seu site, por exemplo, "IMDb".

fb: admins ou fb: app_id - uma lista separada por vírgula de IDs de usuário do Facebook ou de aplicativo da Plataforma do Facebook que administra esta página. É válido incluir fb: admins e fb: app_id em sua página.

Também é recomendável que você inclua a seguinte propriedade, bem como essas propriedades com várias partes.

og: description - Uma descrição de uma a duas frases da sua página.

Não sei ao certo como o fazem em páginas sem essas tags. Se você está tentando duplicar essa funcionalidade, isso não ajuda, desculpe. Mas se você está tentando garantir que suas páginas sejam exibidas no Publicador como você deseja, talvez isso aconteça.

Você também pode usar o depurador de opengraph do facebook, que fornecerá informações sobre sua visualização e (super útil) atualizar seu link em cache se você fizer alterações. Caso contrário, você poderá fazer alterações em um link que deseja compartilhar e as alterações não aparecerão por dias:

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

Para informar ao facebook qual texto e imagens serão capturados, você precisa adicionar meta chaves específicas na cabeça da sua página.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

Eu publiquei os detalhes dele aqui http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/

O que funcionou para mim foi colocar a imagem em miniatura desejada na página logo após a tag e torná-la pequena demais para ver.

<img src="imagename.jpg" width="1" height="1" />

Não testei com altura 0 e largura 0, mas provavelmente ainda funcionará .. Isso não garante que o usuário selecione esta imagem.

Além disso, parece que o Facebook armazena em cache as miniaturas da sua página e nem sempre verifica se há novas. Tente adicionar isso a outra página do site e você verá que funciona.

Espero que isto ajude.

O Facebook usa metatags na página que você está compartilhando para determinar qual imagem, título e descrição deve ser exibida ao postar um link. A sintaxe da metatag segue a especificação OpenGraph do Facebook .

As metatags mais importantes que você precisa definir são:

• <meta property="og:title" content="The title of the sharing preview" />
• $<meta property="og:description" content="The first few lines of content below the title" />
• <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

Obviamente, isso só funciona se você tiver controle total sobre o site que está compartilhando. Se você estiver compartilhando um link externo (como um artigo de notícias), não terá acesso ao site deles e, portanto, não poderá alterar as metatags. Estou usando o ShareKit.io , que permite alterar o título, a descrição e a imagem de qualquer link que você esteja compartilhando sem precisar mexer nas metatags.

Eu diria que a resposta para sua pergunta é bastante complexa e também provavelmente um segredo comercial para o Facebook. Sua capacidade de digitalizar um URL e selecionar conteúdo / mídia relevante para exibição no fluxo de notícias é uma das coisas que torna o serviço tão único e útil para a pessoa comum que usa o Facebook.

Dito isto, eu diria que o algoritmo não seria terrivelmente complexo, provavelmente usa as mesmas regras que o Google usa para extrair conteúdo de sites (eles têm alguns detalhes gerais publicados aqui ). Eu acho que o poder por trás do Publisher vem de muitas tentativas, erros e testes dos engenheiros do Facebook.