Como definir las miniaturas en Facebook al compartir

Pablo

Algo que siempre me molesto es que al momento de compartir un enlace en Facebook siempre el sitio tomaba cualquier imagen para acompañar el enlace, y la verdad que casi siempre quedaba mal, hoy investigando un poco y mirando el código fuente de varios sitios descubro que mediante tan solo una linea de código podemos seleccionar la imagen nosotros mismos, definiendo de esa forma que la miniatura por defecto sea uno de nuestro agrado.

Como una imagen vale mas que mil palabras, por ejemplo yo definí una imagen con el logo de Kabytes, obteniendo este resultado:

miniatura facebook

Ahora lo lindo de hacer esto es que, por un lado vamos a garantizarnos que nuestros enlaces sean acompañados por una linda imagen, ya sea nuestro logo, etc. Y por otro lado esto solo se hace con una linea de código, que debemos colocar dentro del head de nuestro sitio y es la siguiente:

<link rel="image_src" href="http://www.kabytes.com/logo_social_kb.jpg" />

En donde obviamente la ruta deberá apuntar a donde nosotros alojemos la imagen que queremos mostrar.

Fácil no? :D

Pablo

Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.

Comentarios 62

Comentarios

  1. Jose Responder

    Hola, esto esá interesante gracias :)

    Sabes el tamaño exacto que tiene la imagen en facebook?

  2. Pablo Responder

    @Jose: Casi seguro te diria que es de 100×100 px igualmente yo coloque una un poquito mas grande pero siempre cuadrada entonces cuando escala no se deforma :D

  3. Alfredo Artiles Responder

    Pues yo no logro que me funcione en http://www.followfriday.es, y me interesa mucho porque cuando sugiere algo lo que sugiere son los banners comerciales.

    Estoy haciendo algo mal?

  4. Pablo Responder

    @Alfredo: A mi si me funciona tu sitio, acabo de probar enviarlo y se ve perfecta la imagen :D

  5. Alfredo Artiles Responder

    Cierto, a mi también ahora. Creo que Facebook cachea esa información durante un tiempo… porque antes de implementar esta solución intenté insertar un enlace para comprobar qué minuaturas sugería, así que debe haberlo cacheado.

  6. y0k3s3 Responder

    Muy interesante lo intentare integrar en mi CMS,

    Saludos :-)

  7. jorge Responder

    men yo tengo este codigo en un div pero no se donde pongo esa linea que dice , si la pongo en el head igual me sale el icono de fb como miniatura

    ” target=”blank”>

  8. Giancarlo Responder

    hola muy Interesenta el tema.
    He puesto el codigo con la ruta de mi imagen en head,pero todavia no aparece la imagen miniatura q puse en el codigo a adjuntar un el enlace de mi web en facebook,necesito ayuda urgente,de antemano muchas gracias

    Saludos.

  9. Cristian Responder

    Acabo de agregar el codigo a mi web y me funciono perfectamente (gracias por el dato!)
    FB consideró los siguientes tags en el head en mi index.htm para crear la informacion del enlace:

    saludos!
    -C

  10. Fredy Margffoy Saravia Responder

    Hola, soy inexperto en herramientas facebook, inicialmente al enlace que se refería de mi pagina le aparecían las imágenes miniatura y escogía la que necesitaba, igual cuando la selección la hacia dentro de la página en el link de un LEER MAS, pero luego de un tiempo ya se pudo hacer y si los enlaces son de otras páginas si aparecen las miniaturas; que tengo que hacer?
    Cordialmente.
    Fredy Margffoy Saravia.

  11. david Responder

    Hola. He montado un site en wordpress y a la hora de compartir un post o cualquier pagina a facebook no me recoge ninguna imagen para la miniatura, ni tansiquiera utilizando el consejo que has puesto en este post.
    Se que por defecto, facebook tambien “registra” la pagina que quieres compartir, y si detecta más imagenes, también de las pone en una lista para que puedas elegir. Si en lugar de poner el post en facebook copiando y pegando la url lo hago con una herrmienta tipo rss grafitty, entonces si que me coje la minaitura del post, pero pq entra por el rss.
    Estoy utilizando un plugin para generar los thumbs del wordpress que se llama “custom fields image” y ya no se si este debe ser el motivo de que fallo.

    alguna recomendación?

    gracias.

  12. Alex NRG Responder

    Muchas gracias por este post! me sirvio de maravilla en un html… pero tengo la duda y agradeceria si alguien me puede ayudar:

    ¿Como lo uso con JOOMLA? ¿Como se lo agrego a los articulos?

    Gracias de antemano :D

  13. Duar Responder

    hola!!si me interesaria que me dijeras como hacer para que al compartir solo saque las miniaturas del post!!! te agradeceria q me contestaras!! un saludo!!:D

  14. Cristhian Responder

    Hola!
    Me podrías facilitar nuevamente el código… es que he encontrado este post por medio del ggogle pero no puedo visualizarlo.

    De antemano gracias.

    Salidos!

  15. Gabo Cardona Responder

    Hola, muy bueno tu post, muchas gracias, pero a mi no me funciono, yo tengo mi sitio en Joomla, y tu consejo a mi no me funciono, si alguna orientación, muchas gracias.

  16. Giancarlo Responder

    hola amigos, el codigo funciona excelente
    100% comprobado gracias.

  17. Rodrigo Responder

    Yo no veo ningún código en este post… lo borraron?

  18. Pablo Responder

    @Rodrigo, en un rato lo arreglo, un plugin de WP elimino el codigo, disculpas!

  19. Gabriel Responder

    gracias! funciona muy bien. Sabes como hacer para mostrar en lugar de una sola imagen, varias imagenes?

  20. Jonathan Calderón Responder

    PUés si, funciona bien,. el problema es que coloque una imagen de prueba, y cuando coloco la que de verdad deseo ya no sale, al parecer se almacena en cache de facebook :S AYUDa por favor..¡, igual gracias por el dato

  21. Cignus Responder

    Buenas… muy interesante, esto era loque andaba buscando… ahora una pregunta interesante… mi pagina web yo la hice totalmente en flash… como hago o hay algun codigo diferente para lograr el mismo resultado? espero por su ayuda… gracias!!

  22. kpo Responder

    hola, llevo semanas tratando de hacerlo y nada.

    la pagina que quiero editar es http://www.marciales.com.mx/mmastoremexico.htm y la imagen que quiero q salga es la q se encuentra justo debajo de donde dice “datos de contacto”

    les agradecere infinitamente me puedan ayudar.
    Gracias

  23. Jessus Responder

    Hola, funciona de lujo, el caso es que me gustaria poner la imagen por defecto y las imagenes del post, esto es posible??

  24. Irene Responder

    Buenos días!
    No consigo que me funcione. Os comento: yo pongo la ruta absoluta en esta etiqueta “http://www.nombrepag.com/ruta/imagen.jpg” pero la ruta no me la coje facebook. Cuando le doy a compartir me aparece como que ha elegido una imagen, pero sale en blanco, y si miro el código, veo que el src de la misma es “http://www.nombrepag.com/imagen.jpg”, sin la ruta, por lo que la imagen no se ve… ¿Sabeis por qué?

  25. Córdoba Responder

    Me salvaste las papas!

  26. hax Responder

    Gracias por la info, tan sencilla y se le batalla jaja.

  27. Karina Responder

    alo, sume el codigo al head, lo probe y no puedo verlo, lei los comentarios espero q sea cuestion d tiempo, si alguien puedo verlo espero me avisen.
    gracias

  28. EgRoJ Responder

    Pues yo intente hacerlo, y tampoco salio nada, pero lo hice con otra pagina de mi propio dominio, y salio una imagen, la primera que tengo en la pagina. Es decir, no solo lee el Header, tambien lo hace del Body, aunque no se que debe tener la imagen para que salga desplegada.

    Un saludo!

  29. beto Responder

    funciona de lujo , thanks !!

  30. Utilidades Responder

    Muchas gracias por el aporte :) Antes de esto, todos los artículos que se recomendaban aparecían con el icono del rss. De esta forma todo perfecto.

    Saludos!

  31. Onizukar Responder

    hoy tuve problemas con esa imagen
    y con https://developers.facebook.com/tools/lint pude solucionarlo

  32. Jason Responder

    Hola Pablo, soy nuevo en facebook !!

    queria saber donde se edita el codigo fuente de una pagina ?? en facebook

    saludos…

  33. Pablo Responder

    Muchas gracias por el aporte, me ha sido de muchísima utilidad :)

    Un saludo!

  34. Rodrigo Responder

    Es muy bueno tu aporte.. me sirvió… aunque solo un parte. Me pregunté si había posibilidad de que en los casos que se compartan posteos se muestren también las miniaturas de las imágenes.

    Así encontré esto: http://www.wpbeginner.com/wp-themes/how-to-avoid-no-thumbnail-issue-while-sharing-post-on-facebook/

    Es para WordPress. Se trata de un código que se puede utilizar en functions.php que le dice a facebook que tome los thumb del posteo, y si no existen que utilice el logo de la página.
    Es una alternativa para los que tenemos un sitio de noticias donde una imagen en el link llama más la atención que el logo del sitio.

    Lo probé y funciona, aunque a veces facebook no reconoce los thumb por más que existan y sólo muestra el logo.

    Saludos!!

  35. Mercedes Responder

    ¡Hola! Tengo un problema con Facebook. Cuando añado comentarios de los periódicos no me sale ni la imagen en miniatura, ni los titulares del reportaje. Sólo el nombre del periódico. Esto hace unos días que me ocurre. ¿Sabes a que es debido?

  36. Yesnik Silva Responder

    Al fin!, estuve meses buscando como resolver esto. Gracias mil!

  37. Manuel Reaño Responder

    Hola Pablo, tengo un problema desde hace unos días, estoy actualizando la web de Itara y no puedo linkear con imagen en fb.

    http://www.itaraarquitectos.com

    espero puedas ayudarme pues seguí el tutorial.

  38. Cesar Acosta Responder

    algún plugin parecido a esto.. si tanta complicación en entrar en editor???

  39. Cesar Acosta Responder

    lo intente y nada no se pudo ando en wordpress en header pero nada funciona =( alguien por ahí un plugin que funcione o que haga lo mismo???

  40. Cesar Acosta Responder

    hola pude solucionarlo con este plugin: facebook like thumbnail

    ahora si puede ver mis miniaturas en face =D

  41. Varg Responder

    El tutorial para definir una “única” imagen para compartir me funcionó perfectamente, siempre y cuando esta imagen no sea mayor a los 100px de ancho.

    Yo estoy utilizando joomla y k2 para noticias y necesito compartir estas imágenes (la miniatura) en facebook. Como son de mayor tamaño Facebook no me las detecta, pero cuando las reduzco de tamaño sucede lo correcto.
    ¿Alguien entiende este comportamiento de Facebook? ¿Puede estar relacionado con el Template que uses en Joomla?

  42. Agustin Responder

    Muy interesante, aunque lo que yo quiero es que al compartir un artículo se vea la misma foto que utilice en la nota, por otra parte, al compartirlo, en el resumen del artículo me aparece el código de Adsense, la verdad es que soy todo un novato en esto,quería ver si me podías ayudar, desde ya muchas gracias y un saludo!

  43. sebastian Responder

    Hola, lo mismo que agustin, tengo a cargo un proyecto de cuponeras y hay paginas clave:
    el listado de ofertas (cada una con su shared correspondiente) y la del detalle del deal.

    voy a probar tu ejemplo pero me gustaria personalizar cada shared cuando hay mas de uno

    gracias

  44. picachus Responder

    Gracias!! Feliz 2012!

  45. Joseba Responder

    Gracias por todo, una duda, cómo se puede hacer para que no haga la precarga de todas las imágenes de la página que indicamos para compartir y sólo haga la que le ponemos en el head? Gracias.

  46. Aitor Responder

    Tengo un problema desde pasado ayer, que pongo los enlaces de los últimos artículos escritos i de la pagina principal de mi web en Facecook, y no me aparece la miniatura.
    El problema podría ser que utilizo joomla 1.5.2.4, y el sistema esta obsoleto o algo… y debo migrar a la versión 1.7.5 o 2.5 ?
    No se que hacer, ayudadme por favor… :S

  47. Cesar Responder

    Hola que tal necesito ayuda no logro poner la imagen miniatura y q aparesca en facebook al contrario m pone una imagen de Twitter y no logro quitarla. necesito q m ayudes con esto esta es mi web http://www.proyecta-dos.com Gracias

  48. Quovo Responder

    Muy buen aporte! gracias! ;)

  49. Laura Responder

    Hola, Un pregunta, yo puse el link en mi pagina pero ahora no quiero esa imagen, si no que me salgan las imagenes que tenga en el link que quiero compartir, quite el código de la pagina, pero todavía me sigue saliendo la imagen como miniatura en facebook, ya no quiero esa imagen Pls Ayuda!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  50. Roberto Responder

    Ponga
    antes de
    La imagen tiene que ser cuadrada y no mas de 200x200px

    Después va a estar dirección para que facebook reconozca su imagen.

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

    Esto es para una sola imagen estática para dinámica no lo se. Pero si quieren promocionar un sitio en vez de un articulo o productos esto es la manera ideal.

  51. Kraworm Responder

    interesante :D gracias, una preguntota, cuando el link aparece, tambnn aparece una descripcion, no sabes como ponel la descripcion alado de la imagen? :D

  52. Adenawell Responder

    Excelentísimo el tuto.
    No me hubiese imaginado que se podía poner el Thumbnail de facebook así.

    Muchas gracias! :)

  53. lalopezzz Responder

    muy útil, gracias

  54. beluu Responder

    hola, tengo problemas con las fotos en miniatura en facebook, no me aparecen ninguna, ni los cuadraditos en el chat en nada me aparecen las fotos,y la mia tampoco aparece :/ como puedo hacer para que me aparezcan?? gracias!

  55. Josma Responder

    Hola mi problema es el siguiente como puede hacer que al darle share a las entradas tome unicamente la primer imagen del post en miniatura ya que hice cambio de plantilla y hoy el boton me muestra muchas imagenes y eso se ve feo a la hora de compartir y quiero que este como la anterior plantilla he tratado de poner diferentes codigos y siempre me hace un lista grande de imagenes a elegir… yo no quiero poner un especifica sino la primer imagen de cada post que la tome como principal eso hace ayer todavia que tenia la plantilla anterior

  56. diego Responder

    Muy buenas
    Yo otra de las formas efectivas que uso es la siguiente metadata, que se coloca dentro de y donde ‘content’ hace referencia a la foto que queremos que se muestre en FB:

    Espero que os valga

  57. Ari Responder

    Hola, no me queda claro donde debo colocar el codigo. Me ayudas por favor?

Realizar un comentario