Open Graph de Facebook: insertarlos en WordPress


Facebook Open Graph

 

Hola mundo! Aprovechando que hoy mismo he visto por cierta página web que aun hay gente que no sabe añadir los Open Graph de Facebook a un blog WordPress he decidido crear una pequeña guía de como hacerlo. Explicaré dos maneras de hacerlo, una será mediante un plugin, WordPress SEO by Yoast, y la otra incluyendo un poco de código PHP.

Para los que todabía no lo saben, los Open Graph sirven para definir los meta datos de un compartir, lo que viene siendo decir a Facebook el título, url, imagen y descripción que quieres que se vean al compartir. Ahora que todo sabemos para lo que sirven pasemos a aprender como insertarlos.

Open Graph con WordPress SEO by Yoast

Si tiene que ver con el SEO posiblemente puedas conseguirlo con este plugin, por algo está considerado el mejor plugin. Puedes descargarlo desde este enlace y luego instalarlo o instalarlo directamente desde tu panel de control buscando “Wordpress SEO by Yoast”. Los pasos a seguir una vez instalado son fáciles, tan fáciles como ir a “SEO” en el panel de control, seleccionar “Social” del submenú y completar el formulario de la pestaña de Facebook(completa la de Twitter y Google+ para conseguir algo similar a esto pero en estas redes).


Código PHP

Esta forma de insertar Open Graph en WordPress con código PHP es algo más laboriosa pero como todo tiene sus ventajas. El hacer uso de código propio en la mayoría de casos hará que consigamos un código más limpio lo cual vale oro según como avanzan los buscadores. Dejando de lado debates sobre SEO pasemos a ver el código, el cual he conseguido en la web de dariobf.

//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="ID_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="NOMBRE_WEBSITE"/>';
    if(!has_post_thumbnail( $post->ID )) { //La entrada no tiene imagen destacada, utiliza una imagen predeterminada
        $default_image="URL_IMAGEN_DEFECTO"; //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 );

Este código tendrás que adaptarlo y luego añadirlo a tu archivo functions.php que puedes editar desde la pestaña “Apariencia” y “Editar”. Las ediciones necesarias son las siguientes.


  • ID_USUARIO: aquí tienes que colocar el id de tu usuario
  • NOMBRE_WEBSITE: el nombre de tu página web
  • URL_IMAGEN_DEFECTO: en caso de no existir una imagen en la entrada esta se usará por defecto.

En caso de error o dudas podéis comentármelas usando los comentarios. Un saludo!


¿Qué te ha parecido el contenido?

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas
Ha habido 8 votos con una media de 5,00 sobre 5
Cargando…
17 Comentarios
  1. 6 julio, 2017
    • 6 julio, 2017
      • 6 julio, 2017
        • 6 julio, 2017
          • 6 julio, 2017
          • 6 julio, 2017
  2. 8 enero, 2016
    • 8 enero, 2016
      • 9 enero, 2016
  3. 5 agosto, 2015
    • 5 agosto, 2015
      • 5 agosto, 2015
        • 5 agosto, 2015
  4. 5 junio, 2015
    • 6 junio, 2015

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.