martes, 19 de febrero de 2013

Agregar me gusta de facebook en blogger




Facebook agregó nuevos "plugins sociales" que se pueden incorporar en cualquier sitio web, entre otras cosas, un botón de "Me gusta" a cualquier anotación. Este botón esta presente en todas las anotaciones publicadas en Facebook y ahora, disponible para sitios externos.
¿Ventajas? La primera es conocer que contenidos le agradan más a tus lectores y la segunda, que al pulsar en el botón, el lector la esta compartiendo inmediatamente en su perfil de Facebook y sin usar recursos propios.

Funcionamiento

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 sin espacios:
<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>
 
Nota: Puede usarse post-footer-line-1 o 
cualquier otra en el footer. El código a agregar puede modificarse con 
los parámetros que se listaron en la parte de funcionamiento.

0 comentarios:

Publicar un comentario