Sharer.php de Facebook no pone la imagen correcta

tvmweb · #1 (**permalink**) 14/01/2014, 05:55

Buenas, llevo el sitio www.tvmelilla.es y tenemos un botón para compartir vídeos en Facebook, vídeos alojados en nuestro servidor y lanzados con JWplayer.

El caso es que el sharer de Facebook funcionó bien durante meses, pero desde hace unas semanas dejó de colocar la imagen, y desde ayer pone una imagen pero que no tiene nada que ver con la que se le suministra en el enlace.

Por ejemplo este enlace de uno de los vídeos:

https://www.facebook.com/sharer/sharer.php?s=100&p[title]=Informativo+-+03%2F01%2F2014&p[url]=http%3A%2F%2Fwww.tvmelilla.es%2Fvideo.php%3Fv%3D2 014%2FInformativo_-_03ene14.mp4&p[images][0]=http%3A%2F%2Fwww.tvmelilla.es%2Fvideoalacarta%2F2 014%2FInformativo_-_03ene14.jpg

muestra la ventana de compartir de Face, con la imagen correcta y el título correcto. Pero al ver el resultado en la página aparece una imagen distinta y sin el título.

He estado buscando por si han hecho algun cambio, pero todo lo que encuentro es igual que lo que uso.
He estado probando con imágenes de 200x200, de menos de 10 kb, etc, y no se resuelve.

Como decía, todo esto funcionaba perfectamente hasta hace unas semanas.

¿Alguien sabe cual es el fallo, o qué han cambiado?

Saludos

(edito, al poner la url el foro ha añadido un par de espacios, hay que quitarlos para que funcione).

SinguerInc · #2 (**permalink**) 15/01/2014, 10:00

Facebook crea una cache de todo el contenido que se comparte (imágenes, textos, etc).
Suele ocurrir que cambias la imagen pero al compartir de nuevo la url la imagen que muestra es la anterior.
Facebook tiene una herramienta para comprobar cómo le está llegando la info de la página. Esto fuerza a borrar esa cache y coger la nueva info.
Antes de compartir siempre debes usar esta herramienta y verificar que Facebook puede leer todo correctamente.

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

Saludos.
Tengo un blog que puede ser interesante, con otros trucos, si quieres date una vuelta.

tvmweb · #3 (**permalink**) 15/01/2014, 10:24

Buenas, gracias por responder. He estado usando la herramienta, y ocurre que los enlaces funcionan bien después de usar la herramienta, porque parece que cachea la imagen.

Pero no puedo pedir a los usuarios de la página que si quieren compartir el vídeo vayan primero a la herramienta y luego vuelvan y le den al botón de compartir...

He estado probando con las etiquetas "og", pero, aparte de lo de arriba, me dice siempre que el tamaño de la imagen debe ser superior a 200x200, cuando las que le paso son de 640x360. He probado con diferentes tamaños, también reduciendo el tamaño de las imágenes (en bytes), etc, sin ningún resultado.
Solo funciona si antes de compartir paso la web por el debug.

He conseguido hacerlo medio funcionar sin poner ningún meta "og", y llamando al sharer sólo con el parámetro de la url, sin poner la imagen ni el título. Y Face parece que coge la imagen correcta y el título lo coge del título de la web de origen.

Aparte de esto, tenemos vídeos alojados en Vimeo y desde ayer tampoco funciona el sharer, se queda en blanco. De hecho desde la propia web de Vimeo da error al intentar compartir el vídeo en Face.
Lo que he hecho es usar un "og" genérico para la imagen y enlazar la web donde está incrustado el vídeo, en lugar de enlazar al vídeo directamente como hacía normalmente.

Más o menos funciona todo, hasta que vuelvan a cambiar algo.

Panino5001 · #4 (**permalink**) 15/01/2014, 11:29

Lo que se comparte es una url. Lo que pasa es que tu sharer debería apuntar a esa url y dicha url tener los og metatags colocados.

Por ejemplo, esta url http://www.tvmelilla.es/video.php?v=..._-_05ene14.mp4 no tiene og metatags.

Si los tuviera podrías usar:

Código:

window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('http://www.tvmelilla.es/video.php?v=2014/Cabalgata_Reyes_Magos_2014_-_05ene14.mp4'),'sharer','toolbar=0,status=0,width=760,height=500,scrollbars=yes');

Así ve Facebook a esa url:
https://developers.facebook.com/tool..._-_05ene14.mp4

Sólo añade los metatags entre los tags <head></head> y todo funcionará

Un ejemplo de metatags:

Código:

    <meta property="og:title" content="¿Buscas apoyo para emprender un negocio, hacer crecer tu empresa o impulsar un proyecto?" />
    <meta property="og:type" content="website"/>
    <meta property="og:description" content="El FONDO NACIONAL EMPRENDEDOR te ayuda. Revisa las convocatorias y participa" />
    <meta property="og:image" content="http://tutoriales.inadem.gob.mx/images/share.jpg" />
    <meta property="og:site_name" content="Inadem"/>
    <meta property="fb:app_id" content="179312285613473">
    <meta property="og:url" content="http://tutoriales.inadem.gob.mx/">

tvmweb · #5 (**permalink**) 15/01/2014, 11:40

Los metatags los tengo quitados. Esta mañana estuve probando con ellos y tenía el problema que comentaba arriba.

No aceptaba la imagen, me decía que tenía que ser de un tamaño superior a 200x200, cuando era de 640x480.

Tras una visita al debug de Facebook, le volvía a dar y funcionaba perfectamente.

Es decir, parece que necesita cachear la imagen previamente.

Estuve buscando por los foros y hay cientos de enlaces con el mismo problema. Algunos aportan soluciones que en mi caso no han funcionado. Tan solo el paso previo por el debug.

Aparte estaba usando un sistema distinto al de los tags, el de "p[title]" etc., que manda la información en el mismo enlace. Antes funcionaba. Ahora no.

Al final lo tengo con ese mismo sistema, sin metatags, y enviándole sólo la url, sin title ni image. Face coge la imagen no sé de donde, y el title del html origen.
Es de la única forma que he conseguido que coloque la imagen correcta sin pasar por el debug.

tvmweb · #6 (**permalink**) 15/01/2014, 11:44

Este es el código que estuve usando para los tags (lleva partes en PHP):

Código:

<HEAD prefix="og: http://ogp.me/ns#">
<title><?php echo "TVM - ".$tit1." - ".$tit2; ?></title>
<meta property="og:title" content="<?php echo $tit1." - ".$tit2; ?>" />
<meta property="og:description" content="TV a la carta" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo "http://www.tvmelilla.es".$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:image" content="<?php echo "http://www.tvmelilla.es/videoalacarta/".str_replace(".mp4",".jpg",$vid); ?>" />
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="640" />
<meta property="og:image:height" content="360" />

Funcionaba pero me ponía otra imagen diferente. Tan sólo tras pasar por la página de debug de face (y decirme que la imagen tenía que ser superior a 200x200) pillaba correctamente la imagen que le suministraba.
Estuve probando con y sin og:image:type, width, height, etc, que no parecen afectar en nada.

SinguerInc · #7 (**permalink**) 15/01/2014, 13:27

"Pero no puedo pedir a los usuarios de la página que si quieren compartir el vídeo vayan primero a la herramienta y luego vuelvan y le den al botón de compartir..."

Esto lo haces solo cuando actualizas la imagen, sólo hace falta que tú borres la cache de los servidores de Facebook, no es la cache del navegador de cada usuario.

tvmweb · #8 (**permalink**) 16/01/2014, 03:42

Cierto. Lo que ocurre es que no siempre compartimos el vídeo justo después de subirlo. En ese lapsus los usuarios lo pueden compartir y les saldría la imagen incorrecta.

Como lo tengo ahora más o menos funciona: https://www.facebook.com/tvmelilla

lo único que no funciona bien es el título del vídeo, que no muestra las tildes y demás. Parece que Face pilla el texto de las etiquetas "title" en el head del html. He probado a ponerlo en utf8, pero con el mismo resultado.