Imagen destacada al compartir entradas de WordPress en Facebook

Publicado por Fernando Tellado el 24 Sep, 2012

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

<?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()) { ?>

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; ?>" />

<?php } else { ?>

<?php } ?>

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

PUEDE QUE TAMBIÉN TE INTERESE…

AVISO: esta publicación es de hace dos 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.