Imagen destacada al compartir entradas de WordPress en Facebook

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&#91;0&#93; == 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&#91;0&#93; == 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 … 

  1. Usa la imagen destacada establecida en la entrada a la hora de compartirla en Facebook
  2. Si no hay imagen destacada establecida usará la primera imagen que se encuentre en la entrada
  3. 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.

compartir de wordpress a facebook

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

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(9 votos, promedio: 4.6)

¿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.

47 comentarios en “Imagen destacada al compartir entradas de WordPress en Facebook”

  1. 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..

    1. yo lo he metido justo donde se dice y nada. Hay que editarlo? se mete elcódigo tal cual está? necesito ayuda, gracias.

  2. Grupocreaciones

    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

  3. 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

  4. 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

  5. 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.

  6. 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

  7. 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?

  8. Christofer Angel

    yo tengo el mismo problema, abra algun plugin que arregle esto ? sin necesidad de meter mano al codigo ?

    1. Negocio Redondo

      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.

  9. Negocio Redondo

    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!

  10. 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?

  11. 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…

    1. 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

  12. 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?

  13. 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,

  14. Adrian Ruben Dogar

    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.

  15. 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 😀

  16. 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…

Deja un comentario

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

 

Ir arriba Ir al contenido