Compartir en Facebook con Imágenes Destacadas

Una de las mejores formas que tienes para dar visibilidad a las entradas que publicas en tu WordPress son las redes sociales. Gracias a ellas, tus seguidores pueden enterarse rápidamente de la existencia de nuevas publicaciones y, con un poco de suerte, es fácil que algunos de ellos se hagan eco de tus noticias y éstas lleguen a sus amigos y conocidos, alcanzando así un público aún mayor. Pero para ello, tienes que mimar tu presencia en las redes sociales y, obviamente, la forma en que compartes tu trabajo en ellas no es una excepción. Hoy veremos cómo puedes mejorar el aspecto que tienen tus entradas al ser compartidas en Facebook.

Si os habéis fijado, todas las entradas de WPrincipiante están acompañadas de Imágenes Destacadas. Estas imágenes juegan una doble función: por un lado, intentan ser elementos visuales únicos que capturen la atención del usuario y, por otro, intentan dar pistas sobre el contenido que hay detrás. Personalmente, creo que encontrar imágenes que sean bonitas e informativas a la vez no es sencillo, y muchas veces me veo obligado a escoger entre una cosa y la otra. Estoy seguro que tú también dedicas un tiempo a buscar imágenes llamativas que capturen la esencia de tus entradas… Pero, ¿por qué estas imágenes no aparecen cuando las compartimos en Facebook? Muy sencillo, porque no has configurado tu WordPress adecuadamente 😉 ¡Veamos cómo conseguir el siguiente efecto!

El Plugin que necesitas

Existen varios plugins en el repositorio de WordPress que nos solucionan el problema:

1. El más conocido es, seguramente, el de SEO de Yoast. El plugin de Yoast nos permite manipular muchísimos parámetros relacionados con el SEO y, de regalo, añade un conjunto de etiquetas que son las que Facebook necesita para mostrar la imagen destacada.
2. Otra opción que he encontrado, también sencilla, es Facebook Featured Image and Open Graph Meta Tags.

Descargando cualquiera de los dos plugins solucionarás el problema.

Aprendiendo un poco más sobre WordPress…

El objetivo de WPrincipiante no sólo es compartir la solución que estás buscando, sino también ayudarte a aprender por el camino. Así pues, vamos a dedicar un par de minutos a entender cómo funciona el segundo plugin (el cual es tan sencillo que se puede explicar fácilmente) y, de paso, repasemos la tecnología que hay detrás de Facebook para mostrar las imágenes destacadas: Open Graph.

¿Qué hacen estos plugins?

Lo único que necesitamos hacer para conseguir imágenes destacadas en Facebook es añadir un conjunto de etiquetas meta en la cabecera de tu HTML. Para ello, WordPress dispone de una acción llamada wp_head, a la cual podemos engancharnos y, de este modo, añadir el texto que queramos:

function fbogmeta_header() {
  if ( is_single() ) { ?>
    <!-- Open Graph Meta Tags for Facebook and LinkedIn Sharing !-->
    <meta property="og:title" content="<?php the_title(); ?>"/>
    <meta property="og:description" content="<?php
      echo strip_tags( get_the_excerpt( $post->ID ) );
    ?>" />
    <meta property="og:url" content="<?php
      the_permalink();
    ?>"/>
    <?php $fb_image = wp_get_attachment_image_src(
      get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
    <?php if ( $fb_image ) : ?>
      <meta property="og:image" content="<?php
        echo $fb_image[0]; ?>" />
    <?php endif; ?>
    <meta property="og:type" content="<?php
      if ( is_single() || is_page() ) {
        echo "article";
      } else {
       echo "website";
      } ?>"
    />
    <meta property="og:site_name" content="<?php
      bloginfo( 'name' );
    ?>"/>
    <!-- End Open Graph Meta Tags !-->
    <?php
  }
}
add_action( 'wp_head', 'fbogmeta_header' );

Para disponer de las imágenes destacadas sin tener que usar el plugin, basta con que pegues el cuerpo de esta función en el fichero header.php del tema que tengas activo (yo lo pondría antes de la llamada a wp_head()) y el resultado final acabará siendo el mismo.

Nelio Forms

Un plugin de contacto fantástico que usa el editor de bloques. En su simplicidad está la potencia del plugin. Me encanta, es muy versátil y funciona de maravilla para mí.

Wajari Velasquez

WordPress.org

Descarga gratis

Versión premium

El protocolo Open Graph

Facebook creó hace unos años el protocolo Open Graph con el objetivo de permitir que cualquier página web pudiera integrarse en su red social. Si echamos un vistazo a la página de desarrolladores de Facebook, encontraremos información sobre las meta-etiquetas que hemos presentado en esta entrada. Sencillo, ¿no?

Espero que os haya gustado el truquito de hoy y, sobretodo, que hayáis aprendido un poco más sobre WordPress y su integración con otras plataformas.