Definir la imagen usada como miniatura al compartir en facebook

Hoy vamos a hablar sobre un problema que puede resultar bastante molesto. En muchas ocasiones cuando vamos a compartir algún artículo de nuestra web en alguna red social como por ejemplo Facebook, vemos con resignación y un poco de rabia que la imagen o la información que aparece no es la que nosotros hemos especificado en el artículo o que ni siquiera aparece ninguna foto. Para evitar este quebradero de cabeza y que aparezca la imagen que queremos, vamos a valernos de este artículo para definir la imagen usada como miniatura al compartir en facebook.

Este artículo está escrito para que la imagen e información que aparezca sea la que le hemos asignado al artículo al crearlo y el tutorial está realizado desde un entorno Joomla. Desde WordPress, Prestashop y cualquier otra plataforma se realizaría de otro modo.

Pasos a seguir

Facebook muestra la información del artículo que estamos compartiendo cogiendo la información de unas meta etiquetas que podemos definir manualmente o bien de manera automática, como veremos más adelante. Estas meta etiquetas pueden proporcionar información tal como el título del artículo, la url, la imagen, la descripción, etc.

Las etiquetas de las que hablo son estas concretamente:

<meta property=»og:title» content=»Título del artículo»/>

<meta property=»og:url» content=»http://www.dominio.com/url-del-articulo»/>

<meta property=»og:image» content=»http://www.dominio.com/directorio/imagen-del-articulo.jpg»/>

<meta property=»og:description» content=»Descripción del artículo»/>

Para poder añadir estas etiquetas desde Joomla, tenemos que hacerlo de la siguiente forma y con la ayuda de la biblioteca JFactory de Joomla, que es la que tiene las funciones que nos permite trabajar con documentos. El código para añadir esas etiquetas mediante programación es el siguiente:

$doc = JFactory::getDocument();
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );
$doc->addCustomTag( '' );

Pero claro, si usamos este código, lo que estamos haciendo es que todos los artículos que vayamos a compartir en Facebook tengan la misma información y esto no nos interesa, puesto que queremos que cada artículo tenga su propia información. 

Para hacer que cada artículo tenga sus propias meta etiquetas con la información correspondiente a cada uno de ellos tenemos que irnos a la plantilla de los artículos que se encuentra en esta ruta “tuProyecto/templates/tuTema/html/com_content/article/default.php”. 

En este archivo es dónde tenemos que incluir el siguiente código, que viene siendo el mismo que hemos visto arriba, pero adaptado para que la información se genere automáticamente para cada artículo. También tienes que tener en cuenta que “tuProyecto” y “tuTema” es el nombre del proyecto que quieres modificar y el segundo es el nombre del tema que estás usando, por ejemplo, en mi caso concreto, esa url quedaría así “joomla/templates/beez3/html/com_content/article/default.php”.

El código lo tenemos que poner justo arriba del todo de este fichero y es el siguiente.

$doc = JFactory::getDocument();
//CON ESTO COGEMOS LA IMAGEN PRINCIPAL DEL ARTÍCULO
$images  = json_decode($this->item->images);
$doc->addCustomTag( 'item->title.'"/>' );
$doc->addCustomTag( '' );
$doc->addCustomTag( 'image_intro.'"/>' );
$doc->addCustomTag( 'item->metadesc.'"/>' );

Con este código debería coger esa información a la hora de compartir el artículo en Facebook y de esa forma solucionarse el problema.

Conclusión

Como puedes comprobar es una solución bastante sencilla para este problema que en principio puede traernos dolores de cabeza. No se necesitan grandes conocimientos en programación, pero al menos hay que saber localizar el archivo a modificar.

Cuéntame en los comentarios que te ha parecido el artículo, si has tenido algún problema a la hora de poner en práctica la solución o si has conseguido solucionar el problema.

¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (6 votos, promedio: 3,67 sobre 5)
Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes


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 *

43 Comentarios

abogados propiedad intelectual

Mucha mejor imagen decidiendo qué es lo que aparece en esta miniatura. Muchas gracias por la explicación, de lo más útil

agencia seo Madrid

Gracias por los consejos y las recomendaciones. Fundamental tener todos los detalles en cuenta para nuestra empresa y su imagen en redes

Edwin Rengifo

A mi me funcionó perfecto, al día siguiente de haber puesto el código, pero 2 días después dejó de funcionar, ahora dice es "0Data"

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