Menu Superior

Cómo optimizar el “Me gusta” de Facebook en tu blog

Recientemente Facebook liberó una nueva característica que sustituye a la tradicional utilidad conocida a partir de los botones de compartir en Facebook.

Se trata del famoso “Me gusta”, que ahora reúne funcionalidades más avanzadas, las cuales, hacen de este botón un elemento imprescindible a la hora de ofrecerles a los usuarios de tu bitácora, la posibilidad de compartir tus ideas en la red social de una manera mucho más óptima y atractiva.

El cambio consiste, en que cuando un usuario hace clic en el botón me gusta” de algún post de tu blog, automáticamente dicha acción se verá reflejada en el muro del usuario (y también en las novedades recientes del inicio), donde además del título de la entrada, se desplegará también la imagen del artículo en miniatura, una breve descripción y un campo para comentar, entre otros aspectos.

Como toda novedad que surge desde esta Red Social, las opiniones en la blogosfera no se hicieron esperar , por lo que la novedosa característica ha sido objeto de apreciaciones que a diferencia de otras oportunidades, en esta ocasión las reacciones han sido positivas entre la mayoría de blogueros, así como también, entre quienes se dedican al marketing a través de Facebook.

Sin duda, ahora podemos tener una mejor presencia en los perfiles de nuestros seguidores ya que desde nuestro sitio, podemos personalizar los enlaces compartidos a través de la implementación de etiquetas Meta específicas. Si dichos meta-tags no son incluidos, pues facebook los creará por defecto, arrojando resultados poco atractivos y por lo general imprecisos.  En consecuencia, es necesario optimizar nuestro botón me gusta, de manera tal que los resultados generados impacten positivamente en nuestro weblog.

En Pulso Social, hemos puesto a prueba dicha funcionalidad, por lo que queremos compartirles algunos consejos para optimizar esta función en tu blog.

¿Cómo optimizar esta nueva función?

Ahora no solo es cuestión de tomar el código que nos arroja Facebook  para insertar el botón me gusta en la web, sino que es necesario personalizar la aplicación para poder tener control sobre la apariencia de los enlaces en  los muros de nuestros fans.

Las etiquetas meta, deben incluirse en la cabecera de nuestro sitio, no sin antes cerciorarnos que ya contamos con botón me gusta en nuestro blog. En WordPress nos referimos al archivo header.php  colocando los tags antes de la etiqueta de cierre </head>. EL formato es el siguiente:

[php]<meta property="og:nombre etiqueta" content="valor etiqueta" />[/php]

Las etiquetas que se pueden utilizar son:

og:title:

Este es el texto que deseamos destacar como el titulo del enlace al contenido que nos ha gustado, el cual aparecerá en tono azul y en negrita. En wordpress el valor a colocar debe ser la función que llama los títulos de los post:

[php]<meta property="og:title" content="<?php the_title(); ?>" />[/php]

og:type:

Este es el tipo de enlace que el usuario a compartido como “Me gusta”. Actualmente se encuentran disponibles 38 tipos, siendo “article” el valor más común, cuando de compartir post se trata.  Este tag clasifica los elementos compartidos como “Me gusta” por parte de un usuario especifico agrupando los enlaces relacionados.

og:image:

Esta es la imagen que deseamos mostrar junto al enlace. Si no especificamos este meta-dato, Facebook lo hará automáticamente, tomando imágenes aleatorias para cada enlace compartido. En el peor de los casos hasta el avatar de algún usuario que ha dejado un comentario en tu blog, puede aparecer como imagen destacada de algún post de tu bitácora, lo que puede generar una  mala impresión afectando la relevancia del enlace. Para evitar esto, podemos usar como valor la URL de la imagen del logotipo de tu sitio.

[php]<meta property="og:site_name" content="URL-donde-tienes-tu-logo"; />[/php]

El resultado sería este:

Una  mejor opción, es configurar para que aparezca la imagen exacta que realmente corresponde al post enlazado. Para ello hay muchas opciones de código, siendo la siguiente la que recomiendo:

[php]<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 90,55 ), false, ” ); echo $src[0]; ?>" />[/php]

Ahora bien, lo anterior funcionará siempre y cuando utilices la funcionalidad de imagen destacada (soporte para thumbnails) en wordpress. Si lo que haces es colocar las imágenes en el cuerpo del post, entonces el plugin Facebook Like thumbnails, te ayudará a mostrar la imagen pertinente a tu contenido.

og:url:

Esto es muy importante, ya que nos permite especificarle a Facebook, cual debe ser la URL (Permalink)  a la que debe apuntar el enlace compartido. En WP sería:

[php]<meta property="og:url" content="<?php the_permalink(); ?>" />[/php]

og:site_name:

Aqúi especificamos el nombre del sitio con el que aparece el enlace.

fb:admins o fb:app_id:

Permite asignar un listado con los ID  de facebook, de los usuarios que deseamos sean administradores de la aplicación para que puedan acceder a las estadísticas del enlace compartido. Para obtener estos ID, basta con pasar el cursor por encima de la imagen de perfil del usuario y de esta manera tomar el ID que aparece en el extremo inferior izquierdo del navegador. En otro caso si el usuario no tiene personalizado la URL de su perfil, pues desde la barra de direcciones se puede apreciar su ID. Como alternativa, podemos especificar un ID de una aplicación de Facebook que hayamos creado.

Og:description:

Permite personalizar el texto descriptivo que aparece en el enlace. Si no especificamos este tag, Facebook tomará por defecto un extracto de nuestro artículo, lo cual está bien. Sin embargo a algunos usuarios en vez de aparecerle el resumen de su post, le aparece datos como la fecha en la que se publico la entrada. Esto se puede solucionar colocando la siguiente función como valor de la etiqueta descripción:

[php]<meta property="og:description"; content="<?php the_excerpt(); ?> />[/php]

También es posible especificar un texto en particular, solo que este se mostrará cada vez que un usuario comparta un post.

Una opción muy optima, es usar una descripción diferente al extracto, asignándole un texto único y atractivo a cada post, utilizando la funcionalidad de Custom Field o campos personalizados. Por ejemplo, podemos crear un campo con nombre “metadescription” y con valor igual al “el texto que queramos”. Ejemplo:

Para cada post tendríamos que asignarle ese campo. Luego en los meta-tags de facebook colocar:

[php]<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "metadescription", true)); ?>" />[/php]

El resultado:

De acuerdo a todo lo anterior, en nuestra header.php podemos colocar como meta-tags de facebook algo como:

[php]<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "metadescription", true)); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 90,90 ), false, ” ); echo $src[0]; ?>" />
<meta property="og:site_name" content="Nombre de tu sitio" />
<meta property="fb:admins" content="ID-1,ID-2,ID-3" />[/php]

Nota: recordemos reemplazar los campos como Nombre del sitio y ID de usuario por los que corresponde a tu web, además de no olvidar colocarlo antes de la etiqueta de cierre </head> en header.php. Además facebook actualiza las páginas cada 24 horas por lo que si deseas ver cambios al instante, debes actualizar manualmente las entradas que desees a través de URL Linter de Facebook.

Cómo implementar las metaetiquetas de facebook rápidamente?

Si eres de los que prefieres no tocar los archivos de tu instalación de WordPress, pues con solo instalar el Plugin WP-OGP, podras personalizar estos meta-datos y tener control de ellos sin tener que editar directamente los ficheros de WP.

Sin duda en el mundo de las redes sociales, las recomendaciones personalizadas están mandando la parada convirtiéndose en una nueva forma de publicidad. De hecho Google acaba de unirse a esta tendencia lanzando el botón+1 a sus resultados de búsqueda ( de esta nueva funcionalidad pronto hablaremos en Pulso), lo que viene a ser el equivalente al nuevo botón Me gusta, que por cierto, es una novedad muy interesante que Facebook nos ofrece para darle un mayor impulso a nuestro contenido en la popular red social. Así que te invitamos a probarla y esperamos que te sea de gran utilidad.

22 Responses to Cómo optimizar el “Me gusta” de Facebook en tu blog

  1. Hostage abril 1, 2011 at 9:44 pm #

    Alguno ha podido instalar el plugin wp-ogp?

    Quise probarlo en un sitio pero me sale error y tocó eliminarlo para que no afectara.

    • Hans Steffens abril 1, 2011 at 10:27 pm #

      Hostage, compartenos por favor el error que WordPress te genera al instalar el plugin WP-OGP, para saber de que manera podemos ayudarte.

      Saludos

  2. sebasweb abril 1, 2011 at 11:23 pm #

    Hola a todos!!

    Gracias por este post!! soy usuario de wordpress y pude aplicar a la perfección las recomendaciones que hace @hanss1982.
    Después de leer el post finalmente me decidí por el código que sugiere como resumen de la explicación, cambie los datos por los míos y listo.

    Mi sitio es http://www.sebasweb.net te invito a leer algunos post que he hecho, y de paso a darle clic en me gusta para que veas cómo funciona.

    Saludos,

    Gracias de nuevo a Hans y todo el equipo de pulso social!

  3. Hans Steffens abril 2, 2011 at 11:30 am #

    Me alegra que esta entrada haya sido útil para ti @sebasweb

    Saludos!!

  4. javier abril 6, 2011 at 3:00 pm #

    Habeis echado un vistazo a la página del nuevo partido político de ciudadanos para combatir el abuso de los políticos.

    A mi me mola

    http://www.higienedemocratica.es

  5. jorge julio 19, 2011 at 8:49 am #

    Hola amigo, tengo un problema grave. Resulta que he insertado el botón me gusta en mi blog, pero cuando dan clic en él, aparecere error No encuentro la etiqueta por ninguna parte y no se que hacer…será problema de mi theme….

    • Hans Steffens julio 19, 2011 at 9:51 am #

      La etiqueta og:image la tienes vacia. Actualmente revisando tu código fuente tienes algo así:

      en content no tiene valor, entonces debes colocar o la URL de la imagen que quieres que aprezca en facebook cuando den me gusta en tus post o utilizar la linea de código que explico en el post para esta etiqueta. Ese valor debe ir entre las comillas del valor content correspondientes al tag og:image

      Saludos @Jorge

  6. Eric julio 30, 2011 at 11:09 am #

    Muchísimas gracias! Ha sido de auténtica ayuda este post. Te felicito!
    Saludos!

  7. Fidel diciembre 6, 2011 at 2:10 pm #

    donde puedo buscar el codigo de admin que ahora aparecer con . y no se cual es de todos, y todavia tengo problemas con estas etiquetas

    • Hans Steffens diciembre 6, 2011 at 2:14 pm #

      Hola Fidel

      Ingresa a tu perfil de facebook y ubica el cursor sobre la foto de perfil y sobre el extremo inferior izquierdo de tu navegador aparecerá el ID de tu cuenta que debes anotar y establecerla en el header de tu web site, bajo las etiquetas descritas.

      Cuentanos que problemas tienes?

      Saludps

  8. Nebel enero 6, 2012 at 7:12 pm #

    Tienes todo este gran tip para blogger?

    Saludos

  9. Vios enero 29, 2012 at 6:56 pm #

    muchas garcias me sirvió el plugin que pusiste para arreglar un problema con las imagenes que seleciona,ahora ya coje la primera imagen del post,saludos

  10. Lucho febrero 14, 2012 at 9:20 am #

    hola. tenes idea de como hacer que aparezca la imagen del post en blogger? la unica forma que encontré fue eliminar el og:image pero me aparecen todas las imágenes del blog. gracias, excelente web

  11. Emanuel febrero 15, 2012 at 3:43 pm #

    Hola gente, estaría bueno si pueden realizar un video tutorial de como hacerlo para facilitarnos, ya que me cuesta un poco el tema de los códigos con el tema que yo elegí para mi wordpress. Saludos

  12. Miguel Angel febrero 16, 2012 at 2:03 am #

    Un artículo muy bueno, muchas gracias por esa información me va a servir mucho.
    GRACIAS..

  13. adfly bot marzo 8, 2012 at 10:56 pm #

    Why users still use to read news papers when in this technological world everything is presented on web?

  14. Nohely marzo 16, 2012 at 10:39 am #

    Como puedo invitar a mis contactos de mi face de usuario a dar Me Gusta en una página de una empresa por medio de una notificación que les llegue a sus facebook de usuario a mis contactos ?? Me llegó una pero no puedo hacer lo mismo.

  15. Rodrigo abril 6, 2012 at 9:59 am #

    Hola!! te hago una pregunta, en el post comentas que hay que cambiar el valor de “ID”, cuál sería ese valor? gracias!!!

Deja un comentario