Como definir las miniaturas en Facebook al compartir
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:
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? 
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.
Hola, esto esá interesante gracias
Sabes el tamaño exacto que tiene la imagen en facebook?
@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
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?
@Alfredo: A mi si me funciona tu sitio, acabo de probar enviarlo y se ve perfecta la imagen
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.
Muy interesante lo intentare integrar en mi CMS,
Saludos
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”>
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.
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
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.
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.
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
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
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!
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.
hola amigos, el codigo funciona excelente
100% comprobado gracias.
Yo no veo ningún código en este post… lo borraron?
@Rodrigo, en un rato lo arreglo, un plugin de WP elimino el codigo, disculpas!
gracias! funciona muy bien. Sabes como hacer para mostrar en lugar de una sola imagen, varias imagenes?
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
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!!
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
Hola, funciona de lujo, el caso es que me gustaria poner la imagen por defecto y las imagenes del post, esto es posible??
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é?
Si la pones de 100px de ancho apuesto que lo toma, reduce el tamaño.
Me salvaste las papas!
Gracias por la info, tan sencilla y se le batalla jaja.
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
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!
funciona de lujo , thanks !!
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!
hoy tuve problemas con esa imagen
y con https://developers.facebook.com/tools/lint pude solucionarlo
Hola Pablo, soy nuevo en facebook !!
queria saber donde se edita el codigo fuente de una pagina ?? en facebook
saludos…
Muchas gracias por el aporte, me ha sido de muchísima utilidad
Un saludo!
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!!
¡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?
Al fin!, estuve meses buscando como resolver esto. Gracias mil!
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.
algún plugin parecido a esto.. si tanta complicación en entrar en editor???
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???
hola pude solucionarlo con este plugin: facebook like thumbnail
ahora si puede ver mis miniaturas en face =D
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?
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!
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
Gracias!! Feliz 2012!
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.