Instalar Boton Facebook "Me gusta" en Blogger

4/24/2010 05:25:00 p.m. | Publicadas por nenesio | Editar entrada


Los botones Facebook "Me gusta" y/o "Recomendar" son los mas nuevos badge de la red social. Puedes ver una demo del botón como en esta página. Este nuevo botón de Facebook permitirá a sus lectores a compartir rápidamente sus mensajes con sus amigos en Facebook, también puedes llegar a saber cuánta gente le ha gustado lo escrito en tu blog.

La instalación es sencilla solo ingresar a tu cuenta de Blogger e ir a Diseño / Edición de HTML y haga clic en la casilla que dice "Expandir plantillas de artilugios".

Ahora busca la siguiente linea en tu template:

<data:post.body/>


Tambien puedes usarlo debajo de la linea:

<div class='post-header-line-1'/>


y abajo de esta linea añades:

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


Si deseas que solo se visible en la pagina del articulo añades esta:

<b:if cond='data:blog.pageType == "item"'><br /><iframe allowTransparency='true' expr:src='"h ttp://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/><br /></b:if>


Si deseas añadir una clase y colocar el botón a la derecha o la izquierda puedes usar la siguiente:

A la derecha para todo el blog:

<div style="float:right;padding:4px;"><br /><iframe allowTransparency='true' expr:src='"h ttp://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:250px; height:40px;'/></div>


A la derecha solo para la pagina del articulo:

<div style="float:right;padding:4px;"><br /><b:if cond='data:blog.pageType == "item"'><br /><iframe allowTransparency='true' expr:src='"h ttp://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:250px; height:40px;'/><br /></b:if></div><br />


A la izquierda para todo el blog:

<div style="float:left;padding:4px;"><br /><iframe allowTransparency='true' expr:src='"h ttp://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></div>


A la izquierda solo para la pagina del articulo:

<div style="float:right;padding:4px;"><br /><b:if cond='data:blog.pageType == "item"'><br /><iframe allowTransparency='true' expr:src='"h ttp://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/><br /></b:if></div>


Solo es el uso del estilo float:right o float:left y con esto le puedes ubicar a tu gusto sin necesidad de hacerlo desde el css.

Si lo buscas ubicar al lado del titulo entonces busca esta linea:

<b:if cond='data:post.link'>


y justo antes de esta linea añades el boton, te recomiendo hacerlo con el estilo a la derecha.

Al boton puedes añadirle tu propia configuración para hacerlo mas adaptable a tu sitio, elegir si mostrar "Me gusta" o "Recomiendo", por defecto viene como "Me gusta" si deseas mostrar "Recomendar" necesitas editar en el código del botón action=like a action=recommend.

Viene en 3 colores usables, por defecto viene con el color colorscheme=light puedes cambiarlo a colorscheme=dark o colorscheme=evil.

Puedes elegir la forma en que se muestra si quieres en ves de decir de tantas personas le gusto esto cambiando layout=standard a layout=button_count.
Las fuentes tambien son editables, por defecto viene font=arial y esta puedes cambiarlas a:

  • font=lucida+grande
  • font=segoe+ui
  • font=tahoma
  • font=trebuchet+ms
  • font=verdana


Si necesitas modificar el tamaño del botón busca width:450px y el numero es el tamaño si lo necesitas mas pequeño solo baja el numero, si es mas grande aumentas el numero.

Con esto ya tenemos el botón visible y listo para ser usado por los visitantes.

Via | Blogger Plugins

Etiquetas:
ShareThis

Recientes Post:

Suscribirse a: Comentarios de la entrada (Atom)

Suscripciones

Blog Archivo

Designed by Blogger Recursos Created by ИЄИЄSIØ.