¿Cómo selecciona "Facebook Publisher" la imagen, el título y el contenido de un sitio web compartido?

Esta es una pregunta sobre Facebook Publisher . Cuando comparto un enlace, Facebook tomará algo de texto, el título de una imagen del sitio y construirá una vista previa para el usuario. Luego, el usuario puede editar la vista previa, elegir una de varias miniaturas diferentes y luego publicarla en su perfil de Facebook.

Aquí hay una captura de pantalla para ilustrar el punto:

¿Cómo toma la aplicación Publisher las imágenes y el texto del enlace? ¿Existen aplicaciones similares que funcionen para otras aplicaciones web populares, alguna de las aplicaciones de Google, blogs de Wordpress, etc.?

Hice una pregunta similar hace unos meses, y parece que Facebook usa oEmbed , pero parece que oEmbed solo incorpora contenido. También leí que oEmbed solo funciona con proveedores de oEmbed. El editor de Facebook funciona con casi todos los sitios web.

Facebook usará cualquier metaetiqueta de gráfico abierto si está presente para el título y la imagen, etc. (por ejemplo, og: title). La documentación de Facebook para Open Graph Protocol explica esto con más detalle:

El protocolo Open Graph define cuatro propiedades requeridas:

og: title: el título de su objeto tal como debe aparecer dentro del gráfico, por ejemplo, "The Rock".

og: type - El tipo de su objeto, por ejemplo, "película". Consulte la lista completa de tipos admitidos.

og: image: una URL de imagen que debe representar su objeto dentro del gráfico. La imagen debe tener al menos 50 px por 50 px y tener una relación de aspecto máxima de 3: 1.

og: url: la URL canónica de su objeto que se utilizará como su ID permanente en el gráfico, por ejemplo, http://www.imdb.com/title/tt0117500/ .

Además, hemos extendido los metadatos básicos para agregar dos campos obligatorios para conectar su página con Facebook:

og: nombre_sitio: un nombre legible para su sitio, por ejemplo, "IMDb".

fb: admins o fb: app_id: una lista separada por comas de ID de usuario de Facebook o una ID de aplicación de la Plataforma de Facebook que administra esta página. Es válido incluir tanto fb: admins como fb: app_id en su página.

También se recomienda que incluya la siguiente propiedad, así como estas propiedades de varias partes.

og: description - Una descripción de una o dos oraciones de tu página.

No estoy seguro de cómo lo hacen para las páginas que carecen de estas etiquetas. Si está intentando duplicar esta funcionalidad, entonces esto no es de ayuda, lo siento. Pero si está tratando de asegurarse de que sus páginas se muestren en el editor como lo desee, entonces tal vez sea así.

También puede usar el depurador de gráficos abiertos de Facebook, que proporcionará información sobre su vista previa y actualizará (súper práctico) su enlace en caché si realiza cambios. De lo contrario, puede realizar cambios en un enlace que desea compartir y los cambios no se mostrarán durante días:

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

Para decirle a Facebook qué texto e imágenes debe recoger, debe agregar meta claves específicas en el encabezado de su página.

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

He publicado los detalles aquí http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/

Lo que funcionó para mí fue colocar la imagen en miniatura deseada en la página justo después de la etiqueta y hacerla demasiado pequeña para verla.

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

No lo he probado con altura 0 y ancho 0, pero probablemente seguirá funcionando. Esto no garantiza que el usuario seleccione esta imagen.

TAMBIÉN parece que Facebook almacena en caché las miniaturas en su página y no siempre busca nuevas. Intente agregar esto a otra página en su sitio y verá que funciona.

Espero que esto ayude.

Facebook utiliza metaetiquetas en la página que está compartiendo para determinar qué imagen, título y descripción mostrar al publicar un enlace. La sintaxis de la metaetiqueta sigue la especificación OpenGraph de Facebook .

Las metaetiquetas más importantes que debe definir son:

• <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" />

Por supuesto, esto solo funciona si tienes control total sobre el sitio que estás compartiendo. Si está compartiendo un enlace externo (como un artículo de noticias), no tiene acceso a su sitio y, por lo tanto, no puede cambiar las metaetiquetas. Estoy usando ShareKit.io , que le permite cambiar el título, la descripción y la imagen de cualquier enlace que comparta sin tener que manipular metaetiquetas.

Diría que la respuesta a su pregunta es bastante compleja, y probablemente también sea un secreto comercial para Facebook. Su capacidad para escanear una URL y recoger contenido / medios relevantes para mostrar en el flujo de noticias es una de las cosas que hace que su servicio sea tan único y útil para la persona común que usa Facebook.

Dicho esto, diría que el algoritmo no sería terriblemente complejo, probablemente usa muchas de las mismas reglas que Google usa para extraer contenido de sitios web (tienen algunos detalles generales publicados aquí ). Creo que el poder detrás de Publisher proviene de muchas pruebas y errores y pruebas realizadas por los ingenieros de Facebook.