facebook

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 FacebookMuy sencillo, porque no has configurado tu WordPress adecuadamente 😉 ¡Veamos cómo conseguir el siguiente efecto!

Compartir una entrada en Facebook
Compartir una entrada en Facebook potenciando la imagen destacada.

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.

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.

4 respuestas a «Compartir en Facebook con Imágenes Destacadas»

  1. Avatar de Herman Tellez

    creo que falta un cierre en cuanto a la etiqueta php hasta el final no mas que no se donde hehe

    1. Avatar de David Aguilera

      Hola Herman,

      No entiendo muy bien qué quieres decir. ¿Has probado de copiar el código y no funciona? La verdad es que me extraña, ya que probé de ponerlo en el fichero principal de un plugin que tengo y no me falla.

      Si me das un poco más de información, quizás pueda ayudarte 😉

      Un saludo,
      David

      1. Avatar de Oscar Sanchez
        Oscar Sanchez

        Hola David eh probado el código que dejo, y si me funciona pero no con todas las entradas, por que ???

        1. Avatar de David Aguilera

          Hola Oscar,

          ¿puedes compartir un par de enlaces a tu blog? Uno que apunte a una entrada cuya imagen destacada sí funcione y otro a una donde no. Sin poder ver el código resultante es muy difícil que pueda ayudarte 😉

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.