Integrar Facebook Open Graph en WordPress

facebook open graph demo

Si tienes un blog con WordPressy has compartido una entrada en Facebook habrás notado que no muestra siempre la imagen correcta, la que debería ser; con frecuencia la imagen destacada de la entrada. Además, es posible que esto no sólo te pase con la imagen, sino que también lo haga con el título, la descripción o que, cuando alguien pulse el botón de «me gusta», no muestre el thumbnail correcto.

Si te ha pasado esto, en esta entrada aprenderás lo justo para hacer que Facebook reconozca bien los datos de las entradas de tu WordPress. Esto es algo que no todos los temas hacen bien.

¿Qué es Open Graph?

Open Graph es un protocolo que creó Facebook para ayudar a compartir contenido con amigos y admiradores de los sitios web. Esto, sea quien sea quien de a «me gusta», hará que tu contenido sea mostrado en su tablón (o muro). Así que, para evitar el fallo que mencionaba antes de los thumbnails, títulos, descripciones… tienes que hacer unas mejoras a tu sitio para que Facebook sepa qué cosa corresponde con qué.

Tranquilo, es más sencillo de lo que parece. Basta con asegurarnos de que nuestro sitio es 100% compatible con las especificaciones de Open Graph.

Instalación mediante plugin

Si tus conocimientos de desarrollo son bajos, puedes instalar un plugin que realice estos cambios por tí. Yo algunas veces he recomendado WP Facebook Open Graph aunque, como todo, es cuestión de gustos.

Instalación manual

Si, por otro lado, quieres hacerlo de forma manual (más óptimo, sin plugins mejor), tendremos que agregar el siguiente contenido al fichero functions.php de nuestro tema:

//Agregamos Open Graph en los Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Añadimos la información Open Graph
function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //Si no es un post o página
        return;
        echo '<meta property="fb:admins" content="EL ID DE TU USUARIO"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="AQUI VA EL NOMBRE DE TU SITIO WEB"/>';
    if(!has_post_thumbnail( $post->ID )) { //La entrada no tiene imagen destacada, utiliza una imagen predeterminada
        $default_image="http://ejemplo.com/image.jpg"; //Aquí tienes que poner la ruta de la imagen prefeterminada que se mostrará.
        echo '<meta property="og:image" content="' . $default_image . '"/>';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
    }
    echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Por supuesto, no olvides modificar el ID de tu usuario, el nombre de tu sitio web o la URL de la imagen predeterminada.

Espero que sea de ayuda, ¡si es así no dudes en compartirlo!

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

15 comentarios en “Integrar Facebook Open Graph en WordPress

  1. Hola, no me funciona, comparta lo que comparta siempre me hace lo mismo, mi sitio web con la dirección el nombre y la imagen del blog, pero yo quiero que identifique la de cada post y la meta de cada uno y nada… saludos

  2. hola un saludo acabo de hacer tal cual el código y tengo un problema ya que no puedo obtener la imagen si obtengo la descripción y a su vez en nombre del sitio pero me toma 3 imágenes la agrego manual es decir yo pongo la url e igual sigue mostrando 3 imágenes me puedes orientar o bien hay algo que deba de configurar en wordpress ?

    1. Hola Rubén, pues ahora mismo no se me ocurre qué puede ser. Si te da a escoger 3 quizá es porque funciona realmente así. Esta entrada es para parámetros por defecto (sin imagen ni descripción ni nada coge esos elementos por defecto).

Deja una respuesta

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

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.