Usar el thumbnail de wordpress con Facebook XFBML

Hace una semana decidí eliminar todos los plugins relacionados con Facebook Yummie y hacer la implementación a mano usando el protocolo Open Graph y los tags XFBML para insertar los plugins de facebook. Uno de los problemas que me encontré es que cuando alguien recomendaba una nota la imagen que Facebook levantaba para usar como ícono podía ser cualquier al azar.

En el siguiente ejemplo podemos ver como se comportaba Facebook cuando la gente recomendaba un post:

Como pueden ver me tomó en dos ocasiones el icono de comentarista sin avatar, una publicidad y una manito negativa de las imágenes para votar los comentarios. Por razones obvias esto no sirve, especialmente porque esto también se ve reflejado en el perfil de facebook del usuario que recomienda.

Para solucionarlo recurri a un meta tag ya conocido de Open Graph, el «og:image» que indica a facebook que imagen hay que usar para esa acción. Hay que agregar una linea que dice así:

< meta property="og:image" content="URL DE LA IMAGEN" />

El problema mayor de esto es que no anda la función standard para mostrar thumbnail en wordpress

< ?php the_post_thumbnail(); ?>" / >

Y si anduviese, la salida de esa función sería la url con el tag IMG, por lo tanto tampoco nos sirve. Para sortear este problema tuve que recurrir a algun un poquito mas complejo.

< ?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 90,90 ), false, '' ); echo $src[0]; ?>

En este caso lo que hacemos es volcar la URL de la imagen del thumbnail a una variable y mostramos esa variable. Un problema que aun no resolví es hacer que esta funcion me de un thumb de tamaño específico y no el que hace por defecto WordPress.

Para finalizar el metatag de Open Graph debería quedar así:

< meta property="og:image" content="ID), array( 90,90 ), false, '' ); echo $src[0]; ?>" />

Gracias a esto ahora cuando alguien recomiende un post, este saldrá en Facebook con la imagen destacada que hayamos especificado en el post.

Ahora siii!

Se agradece cualquier ayuda para poder tomar la URL de un thumb de tamaño específico.

Read 9 comments

Responder a kilinkis Cancelar la respuesta