lunes, 3 de enero de 2011

Agregar el botón 'Me gusta' de Facebook en Blogger

Uno de los widgets que más me piden es el botón 'Me gusta' de Facebook que por alguna razón no lo había publicado (quizá porque esa información ya se encuentra en todas partes), pero bueno, veamos cómo poner este botón en Blogger que "mide la popularidad" de una entrada entre los usuarios de Facebook.

El botón es muy sencillo y puede aparecer tanto arriba de las entradas o debajo de ellas, se verá más o menos así:



Para colocarlo en tu blog entra en Plantilla | Edición de HTML, marca la casilla Expandir plantillas de artilugios, y ahora, si quieres que el botón aparezca debajo de las entradas busca esta línea:
<div class='post-footer-line post-footer-line-1'>
Debajo de ella agrega esto:
<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=false&amp;width=450&amp;height=40&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px'/>
O bien, si quieres que quede arriba de las entradas entonces agrega el código anterior debajo de:
<div class='post-header-line-1'/>
Con ese simple paso ya tendremos el botón de me gusta en el blog. Si deseas que el botón se muestre sólo en las entradas entonces el código que deberás pegar es este:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=false&amp;width=450&amp;height=40&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px'/>
</b:if>
En cualquiera de los dos casos el botón tiene algunas configuraciones para poderlo personalizar ligeramente.
show_faces=false indica si se mostrarán o no algunos avatares de quienes le gusta el contenido, con false no se mostrarán, con true sí lo hará.
width=450, es el ancho del widget.
height=40, es el alto del widget.
action=like, es el texto que aparecerá, con like dirá Me gusta, con recommend dirá Recomendar.
font=tahoma, es el tipo de letra, por defecto está en tahoma pero se puede cambiar por arial, lucida+grande, segoe+ui, trebuchet+ms y verdana.
colorscheme=light, es el color del botón, con light tendrás el color típico del botón con dark el botón será de un color más oscuro

No hay comentarios:

Publicar un comentario