Portada Internet Enlaces no detectados por Facebook: cómo solucionarlo fácilmente

Enlaces no detectados por Facebook: cómo solucionarlo fácilmente

COMPARTIR
, / 189

Facebook urls

Seguro que a mucho os habrá pasado, a mi me ha traído loco desde hace tiempo: cuando quieres compartir un post en Facebook e insertas la url en la caja de publicación Facebook detecta automáticamente la url y muestra el título del post, la imagen y la descripción. Pero no siempre. Por alguna extraña razón en ocasiones es necesario añadir (o quitar) una barra al final de la url para que Facebook pueda detectar adecuadamente todos esos parámetros. Pero existe una solución. Se trata de hacer que Facebook detecte nuestra url con todos sus parámetros (título, imágen, descripción) especificando las propiedades meta correctas en el archivo header.php del theme de nuestro blog.

Añadiendo meta propiedades de Open Graph a nuestro blog

Para que Facebook pueda detectar adecuadamente todas las propiedades de nuestro post tenemos que añadirle unas etiquetas meta property en la cabecera del blog, esto es, en el archivo header.php del theme que estemos usando, y entre las etiquetas de cabecera <head></head>.

Además, debemos indicar con código php diferentes meta property según la página sea la home del blog, o un post o página. Para un blog de WordPress el código a insertar sería este:

<meta property="fb:app_id" content="el id de tu aplicacion"/>
<?php if(is_single() || is_page()) { ?>
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), large, false, '' ); echo $src[0]; ?>" />
<meta property="og:type" content="article" />
<meta property="og:description" content="<?php
while(have_posts()):the_post();
$out_excerpt = str_replace(array("rn", "r", "n"), "", get_the_excerpt());
echo apply_filters('the_excerpt_rss', $out_excerpt);
endwhile; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="el nombre de tu blog" />
<meta property="og:title" content="<?php the_title(); ?>" />
<?php } else { ?>
<meta property="og:image" content="la url de la imagen o logotipo de tu blog" />
<meta property="og:type" content="blog" />
<meta property="og:description" content="la descripción de tu blog" />
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:site_name" content="el nombre del blog" />
<meta property="og:title" content="el titulo del blog" />
<?php } ?>

No obstante, algunas meta property son opcionales. Si no tienes definida una app de Facebook para poder moderar los comentarios del blog no es necesario que insertes la línea relativa al ID de la aplicación.

El resto de etiquetas meta property es aconsejable tenerlas para que todo funcione a la perfección. Habréis observado que en algunas etiquetas he optado por prescindir de la función de WordPress que podría dar el mismo resultado, como en la descripción del blog. Así nos aseguramos que no se realiza una llamada a la base de datos con el consiguiente ahorro de procesamiento.

Comprobar que Facebook detecta correctamente las meta propiedades de los posts

Una vez que hemos incluido el código en el archivo header.php de nuestro blog debemos proceder a comprobar que todo funciona correctamente. En primer lugar, si utilizamos un plugin de caché tendremos que realizar un refresco para que Facebook pueda acceder a los nuevos valores.

A continuación accederemos a la herramienta Debugger de Facebook donde podemos testear cualquiera de las url de nuestros posts y la de la home del blog. Introducimos la url de un post y hacemos clic en el botón de depuración.

Facebook nos mostrará entonces los valores detectados para cada una de las etiquetas, así como los posibles errores. Si hemos insertado el código tal y como explicamos antes (sustituyendo evidentemente los valores por los nuestros propios) no habrá ningún problema (a menos que tengamos algún plugin activado que pueda interferir).

De este modo nos evitaremos esos casos incómodos en los que Facebook no detecta correctamente la url y los parámetros de nuestro post, teniendo que añadir o quitar una barra (slash) de cierre a la url.

Más sobre Internet, Redes sociales

,

Existen un buen puñado de redes sociales dedicadas a los libros y la lectura. La mayoría permiten llevar un registro de los libros que …

,

Si manejas muchas cuentas de Twitter y necesitas programar actualizaciones todos los días seguramente estás usando Buffer. No me refiero a programar tuits automáticos …

,

Hace 8 años que apareció Twitter y para celebrarlo acaban de presentar una herramienta que nos permite conocer nuestro primer tuit. Parece que fue …


Lo más reciente

,

Daily Rituals: How Artists Work es un libro de Mason Currey en el que analiza los diarios y cartas personales de algunos intelectuales, compositores, …

,

Estos días se presentó un documental titulado The Immortalists en el que se sigue la vida de dos científicos que, cada uno por su …

,

Una técnica fotográfica denominada Schlieren Flow Visualization permite visualizar cosas que, en principio, son invisibles para el ojo humano. La técnica no es nueva, …


Lo más leído este año

,

Un simple truco visual hace que los GIFs animados parezcan tridimensionales, según reportan Gizmodo y otros medios. Al parecer todo lo que hay que …

,

Daily Rituals: How Artists Work es un libro de Mason Currey en el que analiza los diarios y cartas personales de algunos intelectuales, compositores, …

,

Todos los nombres geográficos de lugares, sitios, ciudades, etc. tienen un significado. Otra cosa es que ese significado sea más o menos evidente, conocido …