Poner el botón “me gusta” de Facebook en el blog

Facebook permite usar muchos de sus plugins sociales para poder implementarlos dentro de cualquier página web y entre los botones más populares está el “me gusta” que ha superado con bastante margen al botón de “compartir” pues ha demostrado ser más práctico y menos complicado que este último.
 

Por ello vamos a ver cómo le hacemos para poder implementarlo dentro de nuestro blog para que no se nos haga un lío y no nos resulte frustrante esta tarea.
Primero lo primero. Debemos elegir cuál de todos los botones disponibles de “me gusta” que tiene Facebook queremos aplicar en el blog. Aquí tienes una muestra:

 

Estos son los códigos para cada botón:

 1

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

2

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=button_count &amp;width=120&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=40" scrolling="no"

3

<iframe src="http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2Fnombredetublog.blogspot.com&amp;send=false&amp;layout=box_count &amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=tahoma&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:80px;" allowtransparency="true"></iframe> 

 Aunque los códigos los facilita el mismo Facebook, he preferido mostrar estos que ya están con algunos cambios para poder agregarlos sin ningún contratiempo y que también puedes ver gracias a la gentileza de Karla Castañeda.

 Ahora lo siguiente es más sencillo.  Entra a Diseño, Edición HTML, y marca la casilla  Expandir Artilugios, (no olvides primero hacer una copia de tu plantilla como respaldo por si metes la pata) y busca:

 <div class='post-footer-line post-footer-line-3'>

Justo debajo de ésto pega el código del botón que elegiste.
Das vista previa para asegurarte que todo está correcto tal como lo querías. Debe quedarte algo así:

Pero si quieres que el botón se sitúe a la derecha de las entradas, deberás agregar lo siguiente a cualquier código que hayas elegido.

<div align=’right’>

Aquí va el código del botón que elegiste

</div>

  Siempre da vista previa antes de guardar los cambios. Si todo está como lo planeaste, tendrás un botón así:

 

 Pero si quieres que el botón quede arriba de las entradas tal como lo tengo yo en este blog, deberás buscar esta parte del código en tu plantilla:

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

Justo debajo pega el código del botón que más te guste.
En todos los códigos, cambia “nombredetublog” por la url o dirección de tu blog. Aunque los códigos ya están para ser implementados, también puedes personalizar el botón reemplazando lo que está en azul, pero ten  en cuenta que el ancho (width) del botón del primer código (para que quede a la derecha del blog) debe ser mínimo 300px o no aparecerán los clicks que hayas recibido. Aunque por la gran cantidad de palabras que tiene casi no se va a diferenciar si lo pones a la derecha o izquierda, pues necesita casi el mismo espacio para poder mostrarse. Con los otros botones no tendrás ese problema.

En show-faces=false, no aparecerán las fotos de los que te dan clicks, con true sí se mostrarán, pero para ello deberás modificar las medidas del botón (width) (height) hasta que se adapten al blog.

Por lo demás, es sencillo. Espero que te resulte este truco, suerte.