domingo, 13 de junio de 2010

Coloca el botón Me gusta en Blogger (el contador)

Con los recientes cambios que ha hecho Facebook sobre la invasión del llamado Me gusta ha salido la posibilidad de incluir este botoncito en nuestro sitio web o blog para que la gente vote si le gusta el post o quieres que compartan un enlace determinado. En el siguiente tutorial les voy a enseñar a insertar este código para poder tener un toque más social en su blog.

El botón es más bien un iframe al que se le pasan por parámetros las características del elemento. El código es más o menos como sigue:

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


Los parámetros son:




  • href – Con la URL a compartir.


  • layout – Estilo del botón. Valores: standard o button_count


  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.


  • width – Ancho del iframe.


  • action – Texto del botón. Valores like o recommend.


  • font – Fuente a utilizar.


  • colorscheme – Esquema de colores. Valores: light, dark o evil.



Estos valores se pueden cambiar directo en el código o usar el formulario de personalización de Facebook, el resultado es el mismo.



Agregar botón "me gusta" a Blogger



1. Ir al código de la plantilla y expandir artilugios.



Home → Diseño → Edición de HTML → Expandir plantillas de artilugios



2. Elegir el lugar a agregar el código. El lugar tradicional para hacerlo en el post-footer, es decir, al pie de cada entrada, entonces, se busca el código:



<div class='post-footer-line post-footer-line-1'>


Y abajo se agrega el siguiente código:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

</b:if>


Mas info en Vida MMR

1 comentario:

Luu dijo...

Muchas gracias! Lo estuve buscando, en muchos lugares aparecía, ero este es el que mejor se entiende. Saludos :)