Que es Facebook OpenGraph y como integrarlo en tu sitio web WordPress

Opengraph es un nuevo protocolo que ayuda a Facebook a identificar correctamente los contenidos que se comparten en Facebook provenientes de otros sitios web. Hoy te hablamos como ese protocolo beneficia a tu website

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é

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:

[php]
<pre class="php">//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 );
[/php]

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!