domingo, 24 de abril de 2011

Blogger: botón "Me gusta" de Facebook en cada entrada del blog

Nuestro blog es cada día más social. La semana pasada vimos cómo vincular el blog con Facebook y Twitter, además pusimos iconos sociales al blog, ahora toca el turno del "Me gusta" de Facebook...

En este ejemplo vamos a situar un botón de "Me gusta" en cada entrada del Blog. Este botón permitirá  publicar el post en el muro de quien lo pulsa y además, lleva un contador de las veces que se ha votado la entrada, permitiendo valorar la popularidad de la misma

Si te fijas ya tenemos una zona de botones para compartir cada entrada:


En el caso de que no los tengas visibles, debes ir a la Pestaña Diseño y luego Elementos de la Página. Editas la sección Entradas del Blog y marcas Mostrar botones para de compartir.

Pasos para colocar el botón de "Me Gusta" al pie de cada entrada

Paso 1.  Ve a la pestaña Diseño y luego entra en Editor HMTL
Paso 2. Por seguridad haz una copia de la plantilla pulsando "Descargar plantilla completa"
Paso 3. Haz clic en Explandir plantilla de artilugios
Paso 4. Busca <b:include data='post' name='shareButtons'/> (usa el buscador del navagador)
Paso 5. Pega justo debajo lo siguiente:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; +data:post.url + &quot;&amp;layout= button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='1' scrolling='no' style='border:none; overflow:hidden; width:100pxheight:20px'/>
Paso 6. Guarda la plantilla y visualiza el Blog

Si te fijas hemos asociado esta funcionalidad a que estén los botones de compartir visibles. Puedes ir jugando con el fragmento de código hasta situarlo en el posición que más creas conveniente.

Puedes variar el aspecto del botón gracias al parámetro layoutLos posibles valores son:standard, button_count o box_count. En función del tipo de Layout que elijas es posible que tengas que variar el ancho (width) y el alto (height). Mas información en la página de desarrolladores de Facebook

Vía: iniciaBlog.com

No hay comentarios:

Publicar un comentario