Este truco viene a solucionar un problema bastante común, y es el aspecto nada atractivo de las publicaciones al compartirlas tus lectores en Facebook, pues muchas veces sale como imagen por defecto una cualquiera de la barra lateral, una de la entrada que no ilustra adecuadamente el contenido o incluso la imagen cabecera de tu WordPress.
Porque, si defines una imagen destacada en WordPress para cada entrada, y la eliges para que sea el referente gráfico que defina tu publicación ¿no sería lo más lógico que sea esa la que ilustre tu publicación al compartirla la gente en Facebook?. Pues de eso se trata.
La solución pasa por añadir el siguiente código al archivo header.php de tu tema activo, antes de la etiqueta wp_head() a ser posible (vamos, que si):
<!-- Inicio compartir en FB -->
<?php
$thumb = get_post_meta($post->ID,'_thumbnail_id',false);
$thumb = wp_get_attachment_image_src($thumb[0], false);
$thumb = $thumb[0];
$default_img = get_bloginfo('stylesheet_directory').'/imagenes/imagen_por_defecto.png';
?>
<?php if(is_single() || is_page()) { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } else { ?>
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php if ( $thumb[0] == null ) { echo $default_img; } else { echo $thumb; } ?>" />
<?php } ?>
<!-- Fin compartir en FB -->
Este código revisará si hay una imagen destacada definida en la entrada, y …
- Usa la imagen destacada establecida en la entrada a la hora de compartirla en Facebook
- Si no hay imagen destacada establecida usará la primera imagen que se encuentre en la entrada
- En caso de que no hubiese ni imagen destacada ni imagen alguna en la entrada, usará la imagen por defecto indicada en la línea 6, que deberás modificar para que se ajuste a algo que exista en tu web.
Nota: este código funciona en el caso en que se comparta en Facebook la URL de una entrada directamente, copiando la URL y pegándola en tu caja de estado o la de una página, si usas algún plugin de iconos para compartir en redes sociales es posible que no funcione debido a que cada plugin utiliza un sistema distinto para compartir.
Código encontrado en vonlind
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Genial Fernando, deberías explicarlo también con la función wp_head() (add_action) para los que sus temas actualizan muy seguido, Je je.
Por algun extraño caso nunca me funciona el poner estos códigos directos al theme.. ni este ni ningun otro que involucre ponerlo en algun archivo.. css o similar..
Existira un plugin que haga algo similar? que me interesa bastante el tema..
Me uno al pedido, existira algun plugin que hagan lo mismo???
¿Qué tal OGraphr y plugins similares?
Que discusiones tengo con algunos usuarios por esto.
Muy interesante.
Lo probare.
Gracias
Joder, Fernando, muchas gracias por este truco, que IFTTT siempre me ponía la imagen de un widget lateral y hoy por fin me ha puesto la imagen destacada.
yo lo he metido justo donde se dice y nada. Hay que editarlo? se mete elcódigo tal cual está? necesito ayuda, gracias.
Tal cual está, en el header.php y listo. Revisa que puedes editar y guardar que algunas instalaciones no dejan por seguridad.
Fernando, esta era el tema que estaba esperando, muy bien 😉
Fernando, esta era el tema que estaba esperando, muy bien 😉
No me funciona :/
Hay un problema: el código hace que aparezca el enlace «Seguir leyendo» sobre la cabecera en la página de la entrada. Uso Atahualpa como theme.
Disculpa amigo, yo tengo el mismo problema. ¿Pudiste resolverlo? ¿Me podrías decir cómo le hiciste?
Hace meses me pasé a Oxygen. Lo siento.
Gracias.
hola mi nombre es rigoberto tengo un problema soy nuevo en Word press en my dashboard no parece la funcion de permalinks la busco por todos los settings y nada esperosu ayuda gracias
Yo utilizo el plugin SEO Ultimate, y en su ultima versión trae un apartado para configurar el contenido que se publicará en las redes sociales, como título, imagen y resumen.
A mi este código no me hace nada, lo añado como dices, en header.php justo antes de
Sin embargo al ir a publicar en FB no reconoce ninguna imagen… ¿Que puede estar fallando? Esta modificacion me vendría muy bien ya que trabajo con posts de muchas imagenes y es una locura para publicar cada cosa en FB.
Uso NextGen Gallery para las imagenes, no se si tendra que ver…
Gracias
Disculpa lo indio que soy pero como meto codigo al header.php? que opciones me voy? estoy desesperado no entiendo donde meter el fukin codigo
Muchas gracias!
Pero no me funciona para los autopublicados
Muchas gracias! funciona 😀
tengo mi web en wordpress y no entiendo, hay que ediar algo¿? o no hay que tocar nada del código en cuestión?, no se explica muy bien. si pudirean contestar…gracias.
pruebo
Gracias por el aporte! me funcionó a la perfección!
Pues a mí no me ha funcionado… Esta mañana al publicar una entrada desde el blog al Twitter y del Twitter al Facebook, me cogí una imagen de una entrada de hace mucho tiempo. Ahora después de poner el código me ha cogido un trozo de la imagen del banner… T_T
Tengo un problemilla. Cuando comparto entradas de mi web en facebook me aparece la imagen destacada que le haya puesto al post, sin problemas. Pero cuando directamente comparto la url de mi web (www.campanillas.eu) entonces me deja el espacio de la imagen en blanco. Que tengo que hacer para que me saque ahi el logo de mi web?
yo tengo el mismo problema, abra algun plugin que arregle esto ? sin necesidad de meter mano al codigo ?
Facebook Like Thumbnail
Que tal Angel, prueba con el código SI funciona. En mi caso lo intente ya que tenia el problema. Pero buscando, esta es la solución.
Hola que tal, solo para confirmar que si funciona el código descrito para no tener más problemas con la duplicación de imágenes al compartir un artículo por Facebook.
En mi caso de cada artículo que quería compartir, solamente tomaba en cuanta una imagen en todos los artículos (lo cual era molesto), al agregar el código ya agrega la imagen correcta que corresponde a cada artículo.
¡Saludos!
ingresé el código y wp publicó en facebook con la imágen destacada pero sólo una vez, después volvió a la imágen por defecto en las próximas entradas, cómo lo puedo resolver?
al chingazo el post…funciona muy bien…solo que se genera un erro del php…pero lo solucioné poniendo estas dos líneas al principio de tu código:
error_reporting(0);
@ini_set(‘display_errors’, 0);
saludos…
Yo pongo el código tal y como se indica y no me funciona. En mi caso no me coge ninguna imagen, sólo el texto ¿Conocéis algun pluggin con el que solventar el tema? Gracias
Hola, muchas gracias por la información. Por alguna razon, a mi me dejó de funcionar, ya casi nunca respeta la foto destacada al compartir. Alguna sugerencia de qué podria estar funcionando mal?
Hola esto vale para la home? a mi no me funciona…snif….
Ya funciona, es que tarda en actualizar. Garcias!!
No funciona
Me funciono a la perfeccion y quito las molestas fechas al compartir. ERES LO MAXIMO!!!!
Hola, alguien sabe como solucionar este inconveniente que tengo con mi WordPress al publicar las entradas en Facebook.
Las entradas les asigno una imagen destacada de 940×788 px ya que esta imagen si visualizada en la pagina principal de mi blog y es el tamaño perfecto para verlos bien, pero cuando se comparten los artículos en Facebook, la imagen destacada queda cortada. Hay forma de hacer que se re-dimensione la imagen destacada cuando el articulo se publique en Facebook y que se pueda visualizar bien?
Gracias,
I just tried the script and it cracks my wp site. I run wp 4.4.1.
It just stop loading my site at all.
a mi tambien me da error 🙁
Excelente aporte y para los que les da miedo insertar el código no se preocupen, sí funciona, tienes que buscar el archivo head.php y dentro del código buscas la etiqueta justo debajo de esa etiqueta pegas el código que comparte el compañero Fernando, saludos desde México y muchas gracias por la ayuda 😀
te funciono?
Sí me funcionó con una plantilla pero no con otra, al final encontré otra solución, si gustas te la comparto manda correo a [email protected] saludos y excelente semana 😀
Creo que el funcionamiento de este código varía dependiendo del tema que se posea, no me funcionó.
No me funciona, estoy desesperada…lo he probado todo. En lugar de salir la imagen destacada me aparece el logotipo y ni configurando por ALL in ONE SEO, aparece bien, ni poniendo el código que indicas en reader.php
Alguien sabe que más puedo hacer? o que pluggin puede hacer que salga la imagen destacada en cada post al compartir en Facebook? este tema me da dolor de cabeza…