Añadir el botón “I like” de facebook en tu página web

Uno de los últimos cambios de Facebook es permitir a los creadores web insertar un botón de “i like” en su página web.

Vamos a ver cómo hacerlo y qué implica.

Insertar el botón es muy sencillo. Vamos a explciarlo paso a paso:

Primero hay que ir a esta URL de facebook y rellenar el campo “URL to Like” (es decir, la URL de tu sitio web).

Si lo que deseas es insertar otro widget o Social Plugin, debes visitar esta web de facebook donde tiene todos los tipos de plugin disponibles para tu blog / pagina web.

Lo más básico es el botón “I like”, pero también podrás insertar otras cajas como “recommendations”, “activity feed”, “live stream”, “login button” o “comments”. Casi todos funcionan del mismo modo, al ir a la url nos pedirá rellenar un simple formulario que rellenaremos.

Podemos encontrar la ID de nuestra página en la URL de la misma (aunque usemos vanity urlnames).

Este simple formulario genera un código HTML

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.top-rankin.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

que insertaremos en nuestra página web. Por ejemplo, en este blog de WordPress está insertado como widget tipo “texto” en la barra lateral. Si os fijais el height del iframe está en blanco. Es recomendable darle un valor, en mi caso, de 24px.

¿Qué genera esto?

Una vez insertado, veremos el botón de “I Like” en la web.

Boton i like de facebook en tu web

Cada vez que una visita pulse, tendrá que registrarse en Facebook (si no lo está ya) para que cuente el like. Como veis es un nivel de engagement muy alto. Además, el like queda registrado en el perfil del usuario.

Boton i like de facebook en tu perfil

Atención: el Like Aparecerá en el perfil, no en el NewsFeed. Too bad!

De esta manera los contactos que visiten su perfil verán el enlacea nuestro site, que será indexado y nos ayudará al SEO, sin duda.

Un Consejo:

Podemos incluir algo más de información en el perfil del usuario muy facilmente. Basta con insertar estos meta tags en el HEAD de nuestro HTML:

<meta property=”og:title” content=”Top-rankin”/>
<meta property=”og:site_name” content=”El blog de Social Media”/>
<meta property=”og:image” content=”http://top-rankin.com/images/logo.jpg”/>

¿Es una violación de la privacidad?

Sin lugar a dudas, para mi es una pasada que por decir que te gusta una página (algo que en principio debería ser anónimo) tengas que conectar con Facebook y que quede constancia en tu perfil. Muchos usuarios que ya estén logeados ni se darán cuenta. Con esto quiero decir, que esta función tiene los días contados, seguro, pero mientras dure… es una pasada. Intentad atraer a perfiles influenciadores y dar a conocer vuestro blog /site lo más posible.

Y si os gusta Top-rankin, ya sabeis, que se entere todo el muro :)

Esperamos vuestros comentarios, y si os ha gustado este artículo, os sugiero:

, , ,

6 Responses to Añadir el botón “I like” de facebook en tu página web

  1. Xavi 25 abril, 2010 at 17:38 #

    ¡es genial esta aplicación!

    Pero en mi plantilla de WordPress no me deja ponero como texto en la barra lateral. Cuando le doy a guardar se borra el texto y solo mantiene el título :(

    ¿algún truco para solucionar-lo?

    felicidades por el blog!!

    • Xavier Colomés 27 abril, 2010 at 17:31 #

      Hola Xavi, lo puedes incluir tambien en cualquier plantilla donde puedas insertar HTML (cabecera, post, etc). Tienes el blog alojado en wordpress? entonces tengo entendido que no puedes editar ni CSS ni nada… espero que sirva de ayuda :/

  2. Carles 5 mayo, 2010 at 7:30 #

    Hola Xavier
    Yo utilizo blogspot y tengo un problema. Pongo el código y una vez publicado me sale un espacio muy grande “en blanco” debajo…no se cómo hacer que no ocupe tanto…no lo entiendo…

  3. Xavier Colomés 5 mayo, 2010 at 7:35 #

    Hola Carles,

    tienes que modificar los valores del WIDTH y HEIGH que aparecen en la etiqueta IFRAME, pon, por ejemplo, un height de 75px o menos.

    width:450px; height:75px">

  4. Eduardo 7 febrero, 2011 at 20:42 #

    Es necesario tener word press para que funcione?

    Estoy en la construcción de una pagina prácticamente desde bloc de notas y realmente me gustaría tener la opción del “I like”

  5. René Rubio 19 julio, 2011 at 10:54 #

    Hola, muy útil tu artículo… la pregunta es: en una misma web. ¿Puedo hacer más de un botón ilike o compartir de facebook con diferentes contenidos que se muestran en el muro (imagenes y frases)?

Deja un comentario