La forma simple de agregar el botón "Me Gusta" a Blogger consiste en:
1) Ir a la pestaña "Diseño"
2) Ir a la opción "Edición de HTML"
3) Marcar la casilla "Expandir plantillas de artilugios"
Si lo que buscas es que botón aparezca debajo de las entradas de tu blog entonces busca la línea:
Y debajo de ella agrega el siguiente código:
En todo caso, si deseas que el botón aparezca en la parte superior de la entrada, agrega el código mencionado debajo de la línea:
Con el anterior código el botón me gusta aparecerá en todas las entradas de la portada, lo cual no se ve tan bien (al menos así me parece), por lo cual para que el botón siga apareciendo en la parte superior de las entradas, pero solamente cuando las personas ingresan a la entrada del blog agrega el siguiente código:
Y así de simple... ahora si deseas configurar el botón y personalizarlo a tu gusto, hay que tomar en cuenta que puedes hacerlo modificando:
show_faces=false indica si se mostrarán o no algunos avatares de quienes le gusta el contenido, con true se mostrarán, con false no se mostrarán.
width=400, con esto se está indicando que el ancho del widget es 400, así que puedes modificarlo al tamaño que desees.
height=40, es el alto del widget al que le hemos dado el valor de 40, lo puedes modificar como desees.
action=like, modificando esto podemos apreciar o bien el texto que aparecerá dicienddo "Me Gusta", y poniendo "recommend" mostrará "Recomendar".
font=tahoma, es el tipo de letra que se hará uso por defecto, el valor puede ser modificado por las siguientes fuentes: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana.
colorscheme=light, es el color del botón, con light se mostrará el conocido color del botón:
y con dark el botón será de un color más oscuro:
Sin embargo, el inconveniente de usar la forma Simple es que cuando le den "Me gusta" se verá así en sus muros:
No se ve la imagen que caracteriza a tu blog, ni descripción alguna sobre tu blog... para eso tenemos que usar la forma Completa
<div class='post-footer-line post-footer-line-1'>
Y debajo de ella agrega el siguiente código:
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=400&height=40&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:40px'/>
En todo caso, si deseas que el botón aparezca en la parte superior de la entrada, agrega el código mencionado debajo de la línea:
<div class='post-header-line-1'/>
- Ejemplo del código aplicado:
Con el anterior código el botón me gusta aparecerá en todas las entradas de la portada, lo cual no se ve tan bien (al menos así me parece), por lo cual para que el botón siga apareciendo en la parte superior de las entradas, pero solamente cuando las personas ingresan a la entrada del blog agrega el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=400&height=40&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:40px'/>
</b:if>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=400&height=40&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:400px; height:40px'/>
</b:if>
Y así de simple... ahora si deseas configurar el botón y personalizarlo a tu gusto, hay que tomar en cuenta que puedes hacerlo modificando:
show_faces=false indica si se mostrarán o no algunos avatares de quienes le gusta el contenido, con true se mostrarán, con false no se mostrarán.
width=400, con esto se está indicando que el ancho del widget es 400, así que puedes modificarlo al tamaño que desees.
height=40, es el alto del widget al que le hemos dado el valor de 40, lo puedes modificar como desees.
action=like, modificando esto podemos apreciar o bien el texto que aparecerá dicienddo "Me Gusta", y poniendo "recommend" mostrará "Recomendar".
font=tahoma, es el tipo de letra que se hará uso por defecto, el valor puede ser modificado por las siguientes fuentes: arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana.
colorscheme=light, es el color del botón, con light se mostrará el conocido color del botón:
y con dark el botón será de un color más oscuro:Sin embargo, el inconveniente de usar la forma Simple es que cuando le den "Me gusta" se verá así en sus muros:
No se ve la imagen que caracteriza a tu blog, ni descripción alguna sobre tu blog... para eso tenemos que usar la forma Completa