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? 😀
Tweets that mention Como definir las miniaturas en Facebook al compartir | Kabytes -- Topsy.com
14 años ago
[…] This post was mentioned on Twitter by René Silva Silva, Andrea Verdiani. Andrea Verdiani said: Kabytes – Como definir las miniaturas en Facebook al compartir: Algo que siempre me molesto es que al .. http://bit.ly/8lh44y […]
Jose
14 años ago
Hola, esto esá interesante gracias 🙂
Sabes el tamaño exacto que tiene la imagen en facebook?
ruben pc
8 años ago
interesante
Pablo
14 años ago
@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 😀
uberVU - social comments
14 años ago
Social comments and analytics for this post…
This post was mentioned on Twitter by andreaverdiani: Kabytes – Como definir las miniaturas en Facebook al compartir: Algo que siempre me molesto es que al .. http://bit.ly/8lh44y…
Alfredo Artiles
14 años ago
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?
Pablo
14 años ago
@Alfredo: A mi si me funciona tu sitio, acabo de probar enviarlo y se ve perfecta la imagen 😀
Alfredo Artiles
14 años ago
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.
y0k3s3
14 años ago
Muy interesante lo intentare integrar en mi CMS,
Saludos 🙂
jorge
14 años ago
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»>
Giancarlo
14 años ago
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.
Cristian
14 años ago
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
Fredy Margffoy Saravia
14 años ago
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.
david
14 años ago
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.
Alex NRG
14 años ago
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 😀
Duar
14 años ago
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
Cristhian
13 años ago
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!
Gabo Cardona
13 años ago
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.
Giancarlo
13 años ago
hola amigos, el codigo funciona excelente
100% comprobado gracias.
Rodrigo
13 años ago
Yo no veo ningún código en este post… lo borraron?
Pablo
13 años ago
@Rodrigo, en un rato lo arreglo, un plugin de WP elimino el codigo, disculpas!
Gabriel
13 años ago
gracias! funciona muy bien. Sabes como hacer para mostrar en lugar de una sola imagen, varias imagenes?
Miniaturas en Facebook
13 años ago
[…] […]
Jonathan Calderón
13 años ago
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
Cignus
13 años ago
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!!
kpo
13 años ago
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
Jessus
13 años ago
Hola, funciona de lujo, el caso es que me gustaria poner la imagen por defecto y las imagenes del post, esto es posible??
Irene
13 años ago
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é?
Varg
12 años ago
Si la pones de 100px de ancho apuesto que lo toma, reduce el tamaño.
Córdoba
13 años ago
Me salvaste las papas!
hax
13 años ago
Gracias por la info, tan sencilla y se le batalla jaja.
Karina
13 años ago
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
EgRoJ
13 años ago
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!
beto
13 años ago
funciona de lujo , thanks !!
Utilidades
13 años ago
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!
Onizukar
13 años ago
hoy tuve problemas con esa imagen
y con https://developers.facebook.com/tools/lint pude solucionarlo
Jason
13 años ago
Hola Pablo, soy nuevo en facebook !!
queria saber donde se edita el codigo fuente de una pagina ?? en facebook
saludos…
Pablo
13 años ago
Muchas gracias por el aporte, me ha sido de muchísima utilidad 🙂
Un saludo!
Rodrigo
13 años ago
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!!
Mercedes
13 años ago
¡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?
Yesnik Silva
13 años ago
Al fin!, estuve meses buscando como resolver esto. Gracias mil!
Manuel Reaño
13 años ago
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.
Cesar Acosta
13 años ago
algún plugin parecido a esto.. si tanta complicación en entrar en editor???
Cesar Acosta
13 años ago
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???
Cesar Acosta
13 años ago
hola pude solucionarlo con este plugin: facebook like thumbnail
ahora si puede ver mis miniaturas en face =D
Varg
12 años ago
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?
Agustin
12 años ago
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!
sebastian
12 años ago
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
picachus
12 años ago
Gracias!! Feliz 2012!
Joseba
12 años ago
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.
Aitor
12 años ago
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
Cesar
12 años ago
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
Quovo
12 años ago
Muy buen aporte! gracias! 😉
Laura
12 años ago
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Roberto
12 años ago
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.
Pablo Jiménez
11 años ago
Excelente aporte, había elegido una imagen pero no cumplía con los requisitos, coloqué una de 150x150px y resultó perfecto. Saludos
Javier
9 años ago
Muchas gracias,
parece que facebook a hecho algo bien, ni cambiando la imagen ni limpiando el cache del navegador se solucionaba, siempre se veía la misma imagen, ahora sí comparto una entrada y no aparece la imagen correcta lo puedo solucionar con esa herramienta.
Kraworm
12 años ago
interesante 😀 gracias, una preguntota, cuando el link aparece, tambnn aparece una descripcion, no sabes como ponel la descripcion alado de la imagen? 😀
Adenawell
12 años ago
Excelentísimo el tuto.
No me hubiese imaginado que se podía poner el Thumbnail de facebook así.
Muchas gracias! 🙂
lalopezzz
12 años ago
muy útil, gracias
beluu
12 años ago
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!
Josma
11 años ago
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
diego
11 años ago
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
Ari
10 años ago
Hola, no me queda claro donde debo colocar el codigo. Me ayudas por favor?
Fernando Perez
9 años ago
Hola tengo el problema que no encuentro el código indicado o no se donde pegarlo, trabajo en una web en php y cada vez que escribo un twitter y pongo el link a la web en facebook que también esta unido a twitter se ve cualquier imagen que no coinside con lo que postie, como soluciono esto alguien sabe que código es el correcto y donde se pega. gracias
Johao
9 años ago
muchas gracias por la informacion , me sirvio mucho, estuve horas buscando y no encontraba nada.
los cambios los realice en uno de mis sitios web
http://www.news-shoes.com/
saludos