Personaliza el like de facebook de tu PAGINA WEB

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, 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 , 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 descripción corta y un campo para comentar.

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, 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 sitio web.

¿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.colocando los tags antes de la etiqueta de cierre </head>. EL formato es el siguiente:

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.

<meta property=”og:title” content=”Titulo de la pagina generalmente es title de la pagina” />

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.

<meta property=”og:url” content=”Enlace a mi sitio web o pagina que te ha gustado ” />

og:site_name:

Aquí especificamos el nombre del sitio con el que aparece el enlace.

<meta property=”og:site_name” content=”Nombre del sitio web ” />

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.

<meta property=”fb:app_id” content=”IdFacebookUsuario ” />

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.

<meta property=”og:image” content=”Imagen a mostrar en el muro”; />

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.

<meta property=”og:description” content=”Descripción que se quiere visualizar en el muro ” />

el resultado seria lo siguiente:

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s