VINX Programación Web, Barcelona
669 344 302   vinx@vinx.info

Viernes, 28 de Enero de 2011

Compartir urls en Facebook: definir la imagen usada como miniatura

Aprende a controlar el thumbnail mostrado en Facebook

No entraré en detalles sobre cómo integrar en una web los botones "me gusta" o "compartir" de Facebook ya que ya existe abundante información en la red, sí compartiré algo que en su día me llevó sus horas de búsquedas y pruebas: cómo sabréis al publicar un enlace en Facebook, éste reconoce el título y la descripción de la página, y aunque nos deje modificarlos es otro buen motivo para currarnos unos títulos significativos y unas descripciones personalizadas para cada url. El motivo principal para hacerlo por supuesto sigue siendo de cara a los buscadores.

Lo que no todo el mundo quizás sepa en cambio es como personalizar la imagen que Facebook propondrá como miniatura, y esto se hace añadiendo el metatag "image_src" en el encabezado de nuestras páginas:

<link href="http://www.dominio.com/ruta/imagen.jpg" rel="image_src" />

Por supuesto será tarea nuestra personalizar la miniatura en función del contenido de cada página de nuestra web.

Y ahora otro truquillo asociado: a la que probéis este código, hagáis un cambio en la imagen y volváis a compartir la url, notaréis con sorpresa que Facebook seguirá mostrando la anterior imagen. Eso es debido a que el portal cachea las urls, lo cual no está mal para aumentar la velocidad de carga, pero podría producir más de un dolor de cabeza en algunos webmasters.
Solución: visitad el Depurador de Facebook, tecleáis la url y la aplicación os mostrará toda la información sobre ella, a parte de borrar la caché y por lo pronto podréis volver a probar otra miniatura para la misma página.

Actualización agosto 2013: una nueva necesidad de Facebook para mostrar la imagen, es que ésta tenga un tamaño de como mínimo 200 x 200 píxeles.

 

« Ver todos los artículos

Comentarios:


Muy interesante aporte. Gracias !!

Escrito por educhip, el 4/4/2011 a las 7:35

No funciona!!!

Escrito por Anonimo, el 25/5/2011 a las 6:31

Funciona!!!!!! (He usado el URL Linter)

Merci beaucoup! :)

Escrito por Caliophe, el 5/6/2011 a las 7:08

Muy grande, funciona a la perfeccion! :D

Escrito por Adria, el 4/9/2011 a las 20:20

¡Hola, que tal!
Disculpar las molestias, llevo dos semanas intentando poner botones de compartir de facebook en mi web. Lo cierto es que si logro hacerlo pero sin que me aparezca una foto que represente el enlace.
No sé que es lo que estoy haciendo mal, os voy a poner los códigos que pongo:

<link rel="image_src" href="http://enriquetalledo.com/www.enriquetalledo.com/AUTOR_files/cangrejo.jpg" />

<a name="fb_share" type="button_count">Si te gusta comparteló en FB</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

La primera frase es la que hace referencia a la foto que quiero que aparezca y la segunda la que corresponde al botón.

Si alguien me puede ayudar lo agradezco, para mi es importante acertar en esto ya que mi página creada con iweb, se basa en imágenes.

Muchas gracias y disculpar las molestias. Un abrazo

Escrito por Kike, el 25/10/2011 a las 18:23

¿Y como hacerle para agregarle la informacion que se va a mostrar al compartir?

Escrito por Israel, el 25/11/2011 a las 6:29

Muchas gracias por tu publicación, debo de ser algo inútil o estoy haciendo algo mal, pero no consigo borrar el caché de la imagen que me aparece... le doy a debugger, pero me sigue apareciendo la imagen vieja, pero cuando clico sobre ella, la que aparece en una nueva pestaña es la nueva...¿alguien entiende algo? ¿como puedo hacer para que me reconozca la nueva imagen y olvide la vieja? Gracias!!
(me pasa en el blog, cuando pego el enlace en face, salgo yo y querría que saliera el logo del blog...)

Escrito por Jana, el 25/11/2011 a las 15:01

Hola Jana, parece que lo has conseguido, acabo de probar a compartir tu blog en facebook y me sale el logo del blog.

Israel, la información que se mostrará al compartir es basicamente la etiqueta <title> y el valor del meta tag "description".

Salud!

Escrito por Vinx, el 25/11/2011 a las 15:48

{Excelente amig.. muchas gracias!!

Me sirvio al mil * mil
}

Escrito por johan zuniga, el 5/12/2011 a las 2:53

En serio, mil gracias me fue de mucha utilidad

Escrito por FDBV, el 14/12/2011 a las 20:32

EFECTIVO !!!!

Escrito por Mi-Martinez, el 23/1/2012 a las 19:43

Funcionó a la perfección!!

Gracias!

Escrito por Diego, el 30/1/2012 a las 21:21

Excelente, funciono, se agradece el aporte!!!

Escrito por joseamauta, el 7/2/2012 a las 17:54

Perdonadme pero yo soy novata y entiendo que si incluyo el metatag "image_src" que decís en mi página web me aparecerá simepre la misma imagen cuando incluya un link en Facebook. ¿que pasa si yo lo que quiero es hacer un link a un artículo de la web en particular y quiero que cada artículo aparezca con la imagen correspondiente? ¿cómo lo hago?

Gracias por vuestra paciencia...

Escrito por Maribel, el 10/2/2012 a las 12:00

gracias si me funciono

Escrito por alejandra herrera ayala, el 28/4/2012 a las 8:50

Hola,
una pregunta, la imagen puede ser en formato png o debe ser necesariamente en formato jpg?
Es que no consigo que aparezca y ignoro si este puede ser el problema.
Muchas gracias.

Escrito por Gabi, el 22/5/2012 a las 19:17

Hola!Gracias!!!
Me gusta el tema que abordas! estare al pendiente de nuevos temas!

Escrito por carola king, el 27/5/2012 a las 20:25

Genios!

Escrito por Rodo, el 2/7/2012 a las 22:49

ammm, para los que dicen no funciona... ponganlo en el encabezado o "HEAD" , la verdad si funciona, y luego vayan a la URL LINDER o Facebook Debugger :/ .. simpleeeee no entiendo porque no les sale xD

Escrito por Ichiro Dow Lon, el 17/7/2012 a las 18:32

Hola yo tengo el problema de que las URL que publico de mi blog no aparece ninguna imagen miniatura en facebook.

este es mi blog y por ejemplo si pongo esta url en facebook http://yadiramonroy.com/6-tips-para-crear-contenido-valioso-a-tu-blog

no sale ninguna imagen, solo sale el link y se ve feo.

Creo que el problema es mi blog porque si pongo otras url en el face si aparece la imagen en miniautura. A qué se deberá? gracias y ojala puedan ayudarme

Escrito por yadira, el 24/7/2012 a las 21:53

Excelente!
Me ahorraste horas de búsqueda!
Gracias por compartir!

Escrito por Jorge Ktch, el 4/8/2012 a las 7:31

Hola oie el problema conmigo rs qe no puedo compartir imagenes de paginas desd mi cel Xq no aparec la imagen en mi face solo la pagina?? Ncsitho ayuda

Escrito por bere martinez, el 10/8/2012 a las 0:40

Genial master me salio a la primera

Escrito por SsAx, el 12/10/2012 a las 7:52

Muchas, pero muchas gracias, estaba buscando una herramienta asi, lo primero (lo de configurar la imagen) como que ya lo sabía pero la herramienta de facebook para depurar eso si que no lo conocía, gracias por compartirlo y éxitos!!!

Escrito por Pyare, el 22/10/2012 a las 17:48

Excelente, le agradezco demasiado la información, me sirvió de maravilla, gracias por compartirla con nosotros. :)

Escrito por Orlando, el 26/10/2012 a las 20:35

De lujo, ¡muchas gracias!

Escrito por NANOK, el 1/11/2012 a las 11:04

amigo... tengo un blog y cuando enlazo las notas de mi blog al facebook solo sale el nombre del Blog y un pequeño texto que dice bit.ly. Yo quiero que salga el título del artículo y el pequeño parrafao como suelen salir en muchas notas enlazadas. ayudame porfa

Escrito por Andy, el 8/11/2012 a las 15:57

Soy yo o esto dejo de funcionar? no he tocado nda de codigo y a dejado de andar y no la minuatura, no se que hacer, me estoy volviendo loco para ver que es, pero no me lo toma.

Escrito por Profesor Yeow, el 8/11/2012 a las 18:30

bloquee mi imagen que aparece en miniatura a la par de mis comentarios pero eso sucede solo en mi pc ayudame prfa

Escrito por aracelly sanchez, el 9/11/2012 a las 3:49

Hola me gustara me ayuden con un problema, el dia de ayer hice cambio de plantilla de blogger, pero siempre me he guardado los codigos de redes social y otros de interes, resulta que el boton compartir d e facebook no me toma la primer imagen en miniatura como lo hacia antes de cambiar plantilla y me urge lograr ponerlo asi, y que mi blog depende de la primer imagen que aparezca en los muros de los que la comparte, pero al darle compartir empieza a cargar muchas imagenes del blog para elegir una cada vez que se da clic hace eso y hasta imagenes que estan fuera de la entrada... espero me puedan ayudar

Escrito por josma, el 19/11/2012 a las 9:23

Me funciono a la perfeccion
gracias!!

Escrito por eduardo, el 20/11/2012 a las 23:40

Tengo un problema a ver si alguien sabe solucionarlo, mi web tiene sólo tiene index y se va moviendo según pinchas en cada sección por lo que se van cargando con #, al compartir en facebook una parte de la web con la # me da error, alguien sabe como solucionar esto?

Escrito por David, el 14/1/2013 a las 10:40

Vaya me ha servido, buen aporte (Y)

Escrito por Pedro Petrucci, el 13/2/2013 a las 1:38

Muchas gracias. Me has solucionado un problema al que no le encontraba la vuelta

Escrito por Darío, el 2/3/2013 a las 2:51

Muy bueno tu aporte, me re sirvió mil gracias

Escrito por Cesar, el 9/3/2013 a las 1:26

Muy bueno, muchas veces me gusta implementarlo a mano y facebook no reconoce la imagen por la caché, finalmente con un poco de movimiento queda mejor
http://mocanvas.com/?a=12

Escrito por Carolina, el 14/3/2013 a las 21:16

Muchas gracias, la aplicación URL Linter de Facebook, fue exactamente lo que estaba buscando.

Escrito por Edward, el 27/3/2013 a las 18:56

Millones de gracias! No sabes como busque esta info para solucionar este problema, ya que cambiaba el diseño de la pag y me mostraba siempre una imagen distinta!

Escrito por Marcelo, el 31/3/2013 a las 4:32

Hola, veo que este post tiene su rato, y que ha ayudado a muchos...la duda que tengo está relacionada con esto...
hace unos días migré un blog a otro de wordpress...pero guardé el original pero le borré todo para exponer la info del evento actual..la cosa es que a pesar de que ya le borré todas las imágenes del blog viejo y pongo el link en fb, me aparece la foto del blog viejo...que en realidad ya no existe ni siquiera en la librería de fotos...como hacer para que en fb, no salga más esa foto vieja inexistente?
Si puedes ayudar, genial...

Escrito por Maria Luisa, el 9/4/2013 a las 22:26

Hola! Valiosa información. A nosotras nos pasa como a alguna otra persona de los mensajes. A veces se nos publica una foto en miniatura cuando publicamos un enlace y otras no, por qué puede ser esto?

Nuestra web es http://monasdeseda.com

Escrito por Monas de Seda, el 16/4/2013 a las 13:55

no me funciona con los eventos del calendario de Joomla alguna sugerencia?

Escrito por Erika, el 17/4/2013 a las 11:33

Excelente artículo. Me ha ayudado muchísimo.

Escrito por Pablo Cordero, el 7/5/2013 a las 10:57

Me funcionó!!!
Me funcionó!!!
Me funcionó!!!

Estaba cansada de buscar esto en internet.

Escrito por maria, el 18/5/2013 a las 19:50

Por favor podriais explicar más claramente, como conseguir cambiar la imagen en miniatura cada vez que pongo en facebook una entrada con un enlace de mi blog. Siempre aparece mi foto y querría ir cambiándola cada vez. No e tiendo como se hace ni desde dónde. Desde Fb, desde Blogger?. Gracias¡¡¡

Escrito por Paloma, el 21/5/2013 a las 14:59

Excelente aporte!!! Muchas gracias :D Tuve que googlear URL Linter porque desde Facebook no aparece en la búsqueda como si fuera una aplicación normal. Agradezco sobretodo que lo hayas compartido ya que a muchos nos ahorraste muchísimo tiempo!!!

Escrito por Eduardo, el 18/6/2013 a las 8:55

Mil gracias, me has salvado casi casi de suicidarme, me estaba volviendo loco porque no me salia la imagen correspondiente al enlace.

Escrito por Oscar, el 27/6/2013 a las 17:30

Excelente ayuda :)

¡¡¡Mil gracias!!!

Escrito por Connie, el 7/7/2013 a las 11:47

hay manera de hacer esto mismo pero cuando publico mi web site desde twitter?

Escrito por eliaquin, el 13/7/2013 a las 21:14

excelente viejo! gracias!...a los que no les sale entre aquí https://developers.facebook.com/tools/debug e ingresen su url de la pagina y depuren y listo!

Escrito por juan, el 14/7/2013 a las 7:21

Hola! El debug de facebook me muestra perfecto la imágen que seleccioné.

Pero al querer compartir el sitio en facebook no me lo muestra. Tiene alguna demora que aparezca?

Gracias. Una solución este artículo!

Escrito por Fabián, el 16/7/2013 a las 21:16

"esto se hace añadiendo el metatag "image_src" en el encabezado de nuestras páginas"
a que paginas te refieres, a la de facebook o al blog? y donde se pone exactamente?
gracias

Escrito por sonnia23, el 22/7/2013 a las 15:14

Tremendo aporte era lo que buscaba, me salvaste Muchas Gracias!!!

Escrito por Hernan, el 30/7/2013 a las 15:32

Hola Sonnia23, el metatag lo tienes que añadir en tu blog, imagino que sabrás que puedes editarlo dentro del código HTML.

Yo lo añado justo después de donde se hace referencia a la imagen, algo así como

<a href="http://... IMGP3742+copy.jpg" width="640" rel="image_src" /></a></div>

Y hasta ahora me ha funcionado perfectamente.

Espero haberte ayudado.

Escrito por Connie, el 1/8/2013 a las 19:14

Hasta hoy me había funcionado de maravilla pero ahora, al depurar me salen estos avisos:

Inferred Property: The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Y no tengo ni idea de cómo solucionarlo, espero que alguien me pueda ayudar.

Gracias y saludos a todos los que pasan por aquí.

Escrito por Connie, el 1/8/2013 a las 19:16

Hola, hice todo como explicaste, en el depurador me muestra una sola imagen, pero cuando quiero publicar la pagina me salen las imágenes q salían antes, q sera?
Espero tu respuesta Gracias!

Escrito por Alfredo, el 4/8/2013 a las 19:34

Hola lo hice y me funciona el tema es que mi pagina tiene 8 imagenes y facebook las tomas a todas como opcion para elegir la imagen de miniatura, por eso pregunto como hago para que al compartir solo aparesca una sola imagen y nada mas, desde ya muchas gracias

Escrito por ezequiel, el 9/8/2013 a las 4:16

Ya lo soluciones es que hay que poner imagenes grandes mayores a 200 x 200

Escrito por ezequiel, el 10/8/2013 a las 20:19

Gracias.

Escrito por Hugo Hernéndez, el 25/8/2013 a las 18:08

Hola...estoy ya que no sé qué seguir mirando porque facebook no me quita la imagen que me puso desde el principio. He añadido el link que indicas, el meta:og de la imagen, la imagen mide más de 200px por 200px, la url que comparto está con la codificación URI...y nada, no consigo cambiarla. La url de la que hablo es coachingytu.es

¿alguien me pude ayudar?
Muchas gracias

Escrito por Eva, el 30/8/2013 a las 16:13

Perdón, soy la de antes. Apuntar también que he estado depurando en facebook y tampoco .... gracias de antemano.

Escrito por Eva, el 30/8/2013 a las 16:26

¡¡Mil gracias!!

Escrito por Rebeca, el 3/9/2013 a las 20:34

Hola, funciona de maravilla.... gracias por el tip, hacía rato quería hacer esto ...

Escrito por Eladio, el 18/10/2013 a las 22:32

Gracias me sirvió :D

http://neographic.cl/index.php
Diseño web y Programación

Escrito por cristhian, el 6/11/2013 a las 20:29

Trome, muchas gracias!

Escrito por Ingrid, el 5/12/2013 a las 2:14

Para que tome la imagen, sin problemas de ningún tipo, hay que incluir el meta-tag: <meta property="og:image" content="http://tusitio.com/ruta/imagen.jpg" />
El nombre de la imagen es mejor ponerlo en minúsculas. También se puede incluir la imagen dinámicamente, donde imagen,jpg, será el correspondiente código php, en mi caso es:
<?php echo $row_DatosProducto['strImagen']; ?>

Escrito por Julio, el 12/12/2013 a las 22:05

muchas gracias men

Escrito por Javier, el 29/1/2014 a las 20:03

Excelente aporte, muchas gracias!

Escrito por Humberto, el 3/4/2014 a las 19:18

el Object debuger me da el siguiente error:

Critical Errors That Must Be Fixed:
Composer Data Unavailable:
Failed to get composer template data.

Lo curioso es que tengo la web subida en dos servidores, si intento pegar url desde www.gasolinasuper.hol.es funciona perfectamente, si lo hago desde www.gasolinasuper.es no muestra imagen, titulo ni nada

Me estoy volviendo loco

Escrito por Manuel, el 25/5/2014 a las 22:46

Hola la verdad es que he leido todo los comentarios y tengo algunas dudas.

El proceso a seguir seria:

1. El boton de facebook copio el codigo tal cual viene en facebook y lo pego en mi html.

2. Pego en el head <link href="http://www.dominio.com/ruta/imagen.jpg" rel="image_src" />

Y asi el boton compartir de facebook sacado de la pagina de facebook compartiria la imagen que yo le indicara.

Escrito por Antonio, el 28/5/2014 a las 0:01

Gracias por la información, muy buena sobretodo la parte de verificar con el debug de facebook.

Solo para complementar la imagen tiene que tener un tamaño minimo de 200x200, hacia arriba no hay problema.

Y si lo quieren poner en un blog de wordpress y si usas un plugin como all in one SEO, en un apartado puedes agregar headers en las páginas y ahi puedes poner la referencia a la imagen sin mucha complicación.

Saludos

Escrito por Enrique, el 28/5/2014 a las 5:00

Trato de personalizar con un logo los post cuando comparto con Facebbok, sin embargo siempre coge mi foto de perfil. Dices que introduzca el metatag "image_src", quería saber dónde y cómo, no me acabo de enterar. Gracias

Escrito por Álvaro, el 23/6/2014 a las 19:41

Trato de personalizar con un logo los post cuando comparto con Facebbok, sin embargo siempre coge mi foto de perfil. Dices que introduzca el metatag "image_src", quería saber dónde y cómo, no me acabo de enterar. Gracias

Escrito por Álvaro, el 23/6/2014 a las 19:43

ya van dos veces que leo este post en os páginas diferentes.... ¿ Quién es el plagiador? ¿ Por qué tan poco sentido de la originalidad? Que asco.

Escrito por Marina, el 6/8/2014 a las 20:01

Muchas gracias, me has ahorrado horas de búsqueda, has iluminado el camino para solucionar el problema.

Boris

Escrito por Iluminación led colombia, el 7/8/2014 a las 1:02

Muy bueno, gracias por tu aporte. El resultado, en https://www.facebook.com/RosarioFreak

Escrito por Gustavo V., el 8/1/2015 a las 1:28

https://www.youtube.com/watch?v=dz3jQVlqtEU

Escrito por Kathi, el 14/1/2015 a las 6:45

Tutorial

Escrito por Kathi, el 14/1/2015 a las 6:46

Gracias me quitaste un dolor de cabeza tenia horas intentando resolver esto.

Escrito por Jesus, el 29/1/2015 a las 23:33

Funciono perfecto, pero ahora el problema es que no aparece la descripccion de la pag que ser?

Escrito por Lulo, el 22/4/2015 a las 4:40

Excelente aporte, justo lo estaba buscando por toda la web, tengo una preguntica.

Como hacer para que sea dinámica la carga de imagen y su información según el post donde este ubicado.

Quedo atento. gracias.

Escrito por Santander de Quilichao, el 6/5/2015 a las 18:20

<meta property="og:image" content="http://tusitio.com/ruta/imagen.jpg" />

Con esto jala sin problema.

Saludos.

Escrito por Joan, el 26/5/2015 a las 22:07

Gracias!!!! Llevaba un buen rato volviéndome loca!
:-)

Escrito por nuria, el 17/6/2015 a las 16:10

Oye gracias por la ayuda...ke bueno ke hayan personas ke le resuelvan los problemas cybernétikos a la gente...jejejeje. En serio muchas gracias.

Escrito por Seira, el 23/8/2015 a las 19:43

Hola chicos. Gracias a todos por la aportacion. Aun estoy dando vueltas y no consigo que funciones.
Lo que estoy haciendo es entrando en modo texto en mi entrada de wordpress y pegando al principio del todo este codigo:

<link href="http://www.naukad.com/wp-content/uploads/2015/05/bigstock-Bundle-Of-Dollars-In-A-Bea-31609808_900-600.jpg" rel="image_src" />

Se supone que seria suficiente para que facebook me coja la imagen indicada. Sin embargo, no me funciona y tampoco se queda grabado el codigo que pegue cuando salgo y vuelvo a entrar (a pesar de haber grabado antes, claro)

A que se refieren con pegar el codigo en el head? ¿Debo tener un codigo <head> o algo así?

Gracias a todos. Espero vuestra ayuda.

Un saludo

Escrito por Jose, el 27/10/2015 a las 23:20

Agradezco, enormemente, vuestra información...sin embargo, no entendi nada.... donde debiese agregar eso???

Escrito por Mr. Beermann, el 18/11/2015 a las 21:44

Gracias por la ayuda, es lo máximooo!!! ya me estaba volviendo loca... jajaja Muchas Gracias...

Escrito por Pilar, el 8/1/2016 a las 0:09

Fantástico amigo, despues de años de tu post aún sigues ayudando! mil gracias.

Escrito por sergio, el 8/1/2016 a las 7:02

Buenas,,no se nada de diseño de paginas ni de blogs,,estoy con tutoriales viendo aquí en internet e hice un blog con wordpress, pero al publicar el enlace de facebook, no me sale la foto,,sera que alguien me puede colaborar con eso.
La verdad de html5 y esos programas no se nada,,pero si necesitan algo de reparación y problemas con pcs aquí estoy a la orden.

Gracias

Escrito por Enrique, el 18/1/2016 a las 4:56

Muchas gracias,

todavía no me sale en la web, ahora lo revisaré, pero si se refelja el cambio una vez usado el depurador.

Saludos !!

Escrito por Pedro, el 1/2/2016 a las 13:35

JO, pues a mi me sigue saliendo la imagen que elige facebook. Llevo tres horas en el ordenador y no logro quitarla, aún con lo que ustedes me han dicho que haga...qué frustración... alguien puede ayudarme?

Escrito por Sandra, el 7/2/2016 a las 0:14

Perdonad, tengo un problema que veo es comun a muchos. Tengo un blog de infantil y publico con regularidad diferentes post y los subo a la página que tengo creada en facebook para el mismo. Hasta hace poco no tenía ningún problema. Pero desde hace un par de semanas cuando subo el post a la pagina del blog en face me sale siempre la misma imagen que no tiene nada que ver con el post. He leido la mayoria de los comentarios pero no entiendo muy bien qué tengo qu hacer para solucionarlo. Agradeceria vuestra ayuda.
Un saludo y gracias de antemano.

Escrito por Ana, el 18/2/2016 a las 18:14

La de vueltas que le he dado sin saber porque no salia la imagen que yo tenia puesta en wordpress
Muchisimas gracias por la información!!!!!!!

Escrito por mar, el 19/4/2016 a las 17:28

 

Déjanos tu opinión:






Compártelo


¿De qué se habla en esta web?

Usamos cookies propias y de terceros para analizar tus hábitos de navegación. Si continuas navegando consideramos que aceptas su uso. OK | más detalles