Definir la imagen usada como miniatura al compartir en facebook

Definir la imagen usada como miniatura al compartir en facebook, Una vez integrado el botón compartir de facebook, por ejemplo con el plugin ADDTHIS para php,joomla o wordpress. Vamos a elegir la imagen que queremos como miniatura para el compartir en facebook. Facebook por defecto ya escoge las imágenes de tu web al hacer clic en el botón compartir y te muestra una paginación en el caso de que tengas mas de una imagen en tu web, para que elijas la imagen mas idónea (a criterio personal) para el contenido que se va a compartir. Para evitar que facebook se tome la libertad de hacer esto, y así evitar que todas las imagenes de tu web sean seleccionadas por el, basta con añadir el atributo “rel=” al tag que contenga la imagen que deseamos escoger como única y predeterminada para este compartir. un ejemplo de este tributo seria:

rel="image_src" />

Con esto facebook ya sabe que solo debe obtener esta imagen ya que sera la única que contenga el rel=”image_src”. En el caso de que existan mas imagenes con este rel, facebook obtiene todas aquellas que lo contengan, mostrando la paginación para seleccionar la miniatura Si este metodo no funcionara correctamente, por cualquier motivo. Tenemos otra forma de hacer esto.

Paso a describirla: Consiste en definir un metatag en el header que contiene la propiedad que nos indica facebook en su pagina de documentacion sobre sus propios plugin. No olvidemos que cuando hacemos click en el boton compartir lo unico que hacemos es definir que url es la que compartimos, y es el propio facebook quien se encarga de recuperar las imagenesque nosotros definimos como predeterminadas en el caso de que lo hagamos asi.

Por lo cual en el momento que hagamos click en compartir pasamos la responsabilidad a facebook. Para definir este meta tag, agregamos esta linea:

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

es importante, mucho, definir la URL absoluta de la imagen para evitar errores en la captura de la imagen por parte de facebook. Con este metatag esta comprobado que correctamente coge unicamente la imagen definida en “content” y no alguna otra de nuestra web. Indico como nota, revisar las url que hemos configurado en el enlace de compartir de nuestra web, ya que una mala referencia hace que se invalide este proceso y no fucione. Como ultimo paso, en el caso de que sigamos viendo que facebook siga cogiendo la imagen erronea y no la que nosotros definimos, podemos depurar nuestra pagina en el debugger de Facebook. Esto es util ya que facebook nos cachea la pagina y las imagenes que compartimos en este tipo de botones para acelerar el proceso.

El debugger se encuentra en: https://developers.facebook.com/tools/debug/, solo debemos introducir la url o urls a depurar de nuestra pagina y facebook se encarga de depurar la web, mostrandonos los errores que hemos cometido, o los contenidos que busca y no encuentra por que intefieren otras propiedades u otros elementos, por ejemplo: el titulo, la url o la imagen. Ademas de comprobar y mostrarnos esto, actualiza la cache que el tiene guardada de nuestro sitio.

*OJO con el debugger. Debemos introducir la url real que se usa para compartir un contenido, en el caso de que introduzcamos una url y no veamos cambio efecivo debemos fijarnos en este punto por que quizas estemos introduciendo una url del tipo: [ http://www.dominio.es/noticia/contenido.php?id=01 ] y quizas la url que le indicamos en nuestra web este codificada cuando llamamos a facebook: [ http%3A%2F%2Fdominio%2Fnoticia%2Fcontenido.php%3Fid%3D01 ] Esto lo podemos comprobar en la barra de direcciones del navegador una vez que hemos hecho clic para compartir un contenido. Este “despiste” puede ser producto de que para compartir una URL correctamente con facebook debemos codificarla con PHP a traves de su metodo urlencode

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

40 Comentarios

Carlos aravena

Hola mi consulta es. Se puede insertar una img miniatura desde una base de datos usando php por que yo tengo todas mi img en la base de datos

Alvaro Munoz

Buenos días Carlos, El código de facebook que necesitas instalar para que salga esa imagen que deseas y no otra es: < link href="http://www.dominio.com/carpeta/imagen.jpg" rel="image_src" / > Esta línea de código se instala en el header como metatag. No obstante, es mucho mejor utilizar plugins. Si utilizas wordpress, podrás instalar uno de los mejores plugins para el SEO que también soluciona este problema: YOAST. Existe un apartado en este plugin que te permite no solo cambiar la foto, sino también el título y descripción. Cambiar título descripción y foto para el facebook

Carlos

Es un disparate tener un blog para solucionar problemas y no responder las consultas. La pregunta que muchos hacen es concreta: ¿ Dónde se instala el bendito código para que la imagen a compartir sea la misma del post?, es una pregunta demasiado sencilla, como para que no tenga respuesta.

Gabriel

Claramente dice EN EL HEADER... si no tienes conocimiento ni siquiera tan básico como para saber qué y dónde está el header, toma un manual de HTML (el más básico, por básico que sea, habla de eso al inicio) o cambia de profesión / oficio o contrata a alguien que sepa lo m´´as mínimo... tu aseveración es como decir "me cagan las agencias que te venden autos y no te avisan que HAY QUE CARGARLES GASOLINA CUANDO EL MARCADOR APUNTA A EMPTY (VACÍO)"... no seamos tan pendejos colegas...

che69

Me encabronan estos putos blogs donde siempre te dicen que poner pero no donde putos ponerlo y jamas se dignan a contestar alguna ves, ¿¡¡¡¡donde putos se pone en codigo!!!!!??? si van a ayudar haganlo bien!!!

Juan Recomienda

Me acabas de salvar la vida. Muchas gracias.

melisa

hola! mi pagina es de wix, donde tengo que pegar lo que me dijiste?

Guillermo

No funciona, lo pongo y cuando le doy en compartir me aparece una imagen de mi sidebar. Ya le hice debug y nada, me sigue mostrando la misma imagen

Rosa

Hola que tal tengo una duda de donde poder colocar la linea de codigo si esta pagina es usada por joomla espero me puedan ayudar gracias

Juan

Hola, tengo un problema al compartir una publicación tanto en Facebook o en una FanPage no sale la imagen que corresponde a la noticia los mismo ocurre en twitter. Te agradecería me ayudes. Gracias

Álvaro

Hola, entiendo como definir el metatag, lo que no entiendo es como y dónde se agrega. Si pudieras aclarármelo. Gracias

Aldo

ME PUEDES AYUDAR A SABER DONDE ES QUE SE COLOCA EL LINK? PLEASE AYUDAME

Fabian

Pienso que el problema aparecio desde que facebook hizo las ultimas actualizaciones,  a mi los share button de AddThis me dejaron de funcionar de un dia para el otro

Federico

Excelente aporte. No tenia conocimiento de como hacerlo. Funciona perfecto.

CRISTIAN OSCAR VERA

Dónde coloco este código, no tengo ni idea en donde debe ir exáctamente... rel="image_src" /&gt;

Victor

Verás  a mi con mi web al compartir cualquiera de las páginas sale como vista previa  en facebook la foto de la plantilla de página web gratis .es.tl  y no aparece ninguna de mi página. Hice lo de depurar la página y me sale esto: Errors That Must Be Fixed Object at URL 'http://victordibujos.es.tl/' of type 'homepage-baukasten:page' is invalid because the domain 'victordibujos.es.tl' is not allowed for the application id '1397147747201627' which owns the specified object type. If you are the owner of this application, you can verify your configured 'Site Domain' at https://developers.facebook.com/apps/1397147747201627. No tengo ni idea de lo que será por más que miro en vano... A ver si hay alguna idea de como puede aparecer una foto cuando comparta... saludos!

donleo

jodeme, yo no puedo lograr que me tome la imagen del header, ni tan siquiera poniendo la jodida imagen en el cuerpo del primer articulo de la pagina de inicio, fb y la PMQTP

alex0360

que bien probé el ultimo de depuración pero me quedo con el primero, GRACIAS.

Daniel

Hice todo lo que dices acá, pero facebook sigue tomando imágenes aleatorias de mi web, parece ser que ya no funciona de esta forma..

julio boissiere

hola amigo disculpa soy completamente nuevo en esto donde debo pegar el codigo : < link href="http://www.dominio.com/carpeta/imagen.jpg" rel="image_src" / > osea entioendo que cambio los datos por los mios pero no se donde lo voy a colocar luuego... una vez mas disculpe pero soy completamente nuevo en esto ojala pueda explicarme

Rebeca

¡¡Mil gracias!!

Eva María

Hola, lo primero muchas gracias por el aporte. No consigo que me modifique la imagen y he seguido paso por paso tu post, ¿por favor? ¿podría alguien ayudarme? Es mi primer proyecto y es superimportante que todo me salga bien. Gracias

Rubén Muñoz Autor

¿Has probado con la caché?

Rubén Muñoz Autor

Hola Pepito. ¿Podrías dar más detalles de donde te has quedado exactamente?

Jens

Tienes seguro el mejor sitio web sobre el tema. Saludos!

Alfredo

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!

Javio Egas

Muchas gracias por esta publicación y compartir conocimientos, yo no he podido solucionar mi problema que básicamente consiste en que cuando pongo un link en facebook con mi blog, fb toma la imagen en miniatura más vieja, no la de la última entrada ¿qué debo hacer?

Alberto E. Hernández Cruz

Muchas Gracias por la información. Funciono Al 100%

Jorge Seo

Gracias, para mi es importante añadir este codigo que me tomaba la imagen del header dando una mala impresion cada ves que mi sitio era publicado en Facebook. Saludos Jorge Ferreira  

Paula V

do. Yo uso este codigo de Fbok Share: <script>var fbShare = { url: '<data:post.url/>', size: 'compact' }</script> <script src='http://widgets.fbshare.me/files/fbshare.js'/> <!-- end share facebook -->   No tengo idea de como hacer para que me elija la imagen del post y  no cualquiera, que deces a 1. Por fave hecho limita a dos y favor ayúdame  

Eduardo

Hola, me gustaria saber en que parte del archivo header.tpl habría que añadir la línea y donde guardamos la imagen a la que hacer referencia. Gracias!

Jose Armando

Hola ROBERT, si tu url esta enmascarada debes usar esa ruta ya que al tener activada la mascara de URL esa es la dirección a la que accederá buscando la imagen. Pruebalo y nos comentas que tal a ido

Ruben

Hola Amigos, para una mayor rapidez en la respuesta podéis utilizar Nuestro Twitter o Facebook

ROBERT

Mi pregunta es simple. que pasa si tengo almacenada mi website en un hosting gratis y estoy enmascarando mi url la que obiamente me interesa es la que enmascare. gracias por la ayuda.

Armando

Hola Miguel, ¿ha realizado las comprobaciones en facebook debbuger?, en el caso de ser afirmativa la respuesta. ¿Muestra este la imagen que usted desea compartir? ¿lanza algun tipo de error el debbuger?

miguel

Saludos, muchas gracias por tu explicación y web, están genial. Pero te comento, a mi ni me sale imagen en facebook, solo aparece la dirección sin foto en miniatura. He seguido tus pasos en ambos métodos..y nada. Agradecería mucho si pudieras echarme una mano! Gracias!!!

Esther

Muchísimas gracias! Me ha funcionado a la primera!

Abel

Hola, muchas gracias, a mi si me funcionó correctamente, la verdad que tienes un blog muy completo, por favor no dejes de seguir actualizandolo. Suerte...!!! =)

armando

Pepito, hemos actualizado la entrada. En el caso de que no consiga su objetivo, ¿podria describirnos donde coloca y con que datos la propiedad para elegir la imagen?. Gracias por entrar a nuestro blog

pepito

Lo he estado probando, pero no hay forma, a ver si puedes dar más detalles de cómo lo has hecho. Gracias