videos - El diálogo Compartir de Facebook no muestra miniaturas una primera carga
porque no se ve la imagen en miniatura de youtube (6)
Encontré otra forma de forzar al rastreador de Facebook para que compruebe la página antes de hacer clic en el botón Compartir: solo incluya un iFrame oculto con el enlace de Facebook que comparte.
Ejemplo:
<iframe src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com" style="width: 0px; height: 0px; margin: 0px; padding: 0px;"></iframe>
Estoy usando el diálogo de compartir de Facebook para compartir una URL específica. El enlace compartido contiene una imagen que debería ser parte del intercambio más adelante. Lo extraño de esto es que funciona totalmente bien en los navegadores móviles. Pero el navegador de escritorio no carga la imagen en el primer intento. Una simple recarga de la ventana de compartir arregla la imagen que falta. Una vez que esta imagen aparece al menos una vez, continúa trabajando en otros navegadores sin recargas adicionales.
Entonces mi pregunta es: ¿Alguien sabe por qué la primera llamada de esta URL no muestra imágenes?
Detalles
Enlace para abrir el diálogo de compartir
Aquí está la salida del depurador de Facebook, que está libre de errores y también muestra la imagen.
Salida del depurador de Facebook
Actualizar
Parece funcionar con el diálogo de alimentación sin ningún problema. Pero esta es otra forma de compartir que me gustaría evitar, ya que requiere una ID de aplicación.
Facebook muestra una imagen en caché. Lo hace la primera vez que se envía el recurso compartido o cuando el rastreador de Facebook encuentra og: etiqueta de imagen en su página.
Según los documentos de Facebook, en https://developers.facebook.com/docs/sharing/best-practices#pre-cache-images
"Algunos de nuestros complementos sociales muestran una imagen cuando alguien está interactuando con ellos. La imagen se basa en la imagen og: en la página, u otras imágenes en la página si la imagen og: no está establecida. Antes de que el complemento social pueda renderizar una imagen El rastreador de Facebook debe ver la imagen al menos una vez. En los sitios donde las páginas cambian con frecuencia (por ejemplo, el comercio electrónico), la primera persona que haga clic en estos complementos no verá una imagen renderizada ".
Finalmente creo que encontré el problema. Las imágenes que quiero compartir son entregadas por un script PHP en lugar de un archivo plano. Parece estar relacionado con la forma en que PHP entrega las imágenes:
Malo:
echo readfile($image_thumb_file);
Bueno:
$fp = fopen($image_thumb_file, "rb");
fpassthru($fp);
Después de hacer este cambio, mis imágenes finalmente aparecen en el depurador de Facebook.
Para construir sobre la respuesta de Arons,
Lo más fácil es incluir og: image: width y og: image: height como parte de sus ogtags que describen el ancho de píxeles y la altura de la imagen. Curiosamente, esto (aparentemente por su diseño) convencerá a Facebook para que elimine el sitio de inmediato, incluida la imagen.
<meta property="og:image" content="http://example.com/image.jpg"/ >
<!-- NOTE: This size should be the exact width of the image -->
<meta property="og:image:width" content="450"/>
<!-- NOTE: This size should be the exact height of the image -->
<meta property="og:image:height" content="298"/>
Las etiquetas "og: image: width" y "og: image: height" deben tener las dimensiones exactas de la imagen para que Facebook raspe la imagen correctamente.
Este artículo me llevó a la respuesta correcta, ya que estaba generando las páginas html a través de un sistema CMS donde las etiquetas "og: image: height" y "og: image: width" estaban codificadas en la etiqueta principal.
También me he encontrado con este problema y resulta que Facebook tiene una "característica" no documentada, probablemente implementada para optimización. No carga tu imagen durante la primera acción.
La descripción del error se puede encontrar aquí: https://developers.facebook.com/bugs/657696104321030
En resumen, la solución es una de las dos posibilidades.
Lo más fácil es incluir og: image: width y og: image: height como parte de sus ogtags que describen el ancho de píxeles y la altura de la imagen. Extrañamente, esto (aparentemente por su diseño) convencerá a Facebook para que elimine el sitio de inmediato, incluida la imagen.
<meta property = "og: image" content = " http://example.com/image.jpg "/>
<meta property = "og: image: width" content = "450" />
<meta property = "og: image: height" content = "298" />
La segunda solución potencial es activar un raspado manualmente a través de API. No he probado esto, pero teóricamente es posible. Vea la discusión relevante de sobre este tema.
También puede verificar las propiedades de og:image:width y og:image:height .
Esto funciona para mí.