Botón "Me gusta" de Facebook en cada entrada del blog

En este tutorial, vamos a situar un botón de "Me gusta" de Facebook en cada entrada del Blog. Este botón permitirá a tus lectores, publicar un enlace en su muro hasta la entrada donde está situado el botón. Además, te permitirá conocer el número de votos por entrada, permitiendo valorar la popularidad de la misma.

Si usas una de las plantillas que vienen por defecto en Blogger es posible que al pie de tus entradas aparezca la barra botones para compartir

Desactivar la barra de botones para compartir de Blogger

Recuerda que el objetivo que persigue este tutorial es ir sustituyendo estos botones (poco visuales) por los botones oficiales tanto de Facebook (este tutorial) como botón de Twitter y con el botón de Google+, tal y como puedes ver en este blog. Mi recomendación por lo tanto es ocultarla.

Ocultar la barra estándar de botones para compartir de Blogger

• Entra en la Pestaña Diseño
• Haz clic en "Editar" en la sección "Entradas del Blog"
• Desmarca la casilla "Mostrar botones para compartir"

Colocar el botón de "Me gusta" en cada entrada del blog

• Paso 1. Acceder al editor HTML y haz copia de seguridad antes de realizar cambios
• Ve a la "Pestaña Plantilla" y ve al pie de esta página. 
• Haz una copia de seguridad de la plantilla pulsando el enlace "Realizar copia de seguridad"
• Haz clic en el enlace "Editar código HTML de la plantilla"
• Paso 2. Busca el siguiente código dentro de tu plantilla:
• Usa el buscador del navegador pulsando Ctrl F o Ctrl B y busca este texto:
• Para colocar el botón al Pie de la entrada busca:
  post-footer-line post-footer-line-1 Te recomiendo que copies este texto y lo peges en el buscador.
• Para colocar el botón en la Cabecera de la entrada busca:
  post-header-line
  Te recomiendo que copies este texto y lo peges en el buscador.
• El código del botón  irá justo debajo de la línea que acabas de encontrar
• Paso 3. Copia el código del botón "Me Gusta", tienes dos opciones:
• Opción 1. Botón de "Me Gusta"




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

• Opción 2. Botón "Me Gusta + Enviar"

<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/><fb:like expr:href='data:post.canonicalUrl' font='arial' layout='button_count' send='true' show_faces='false'/>

• Paso 4 Copia el fragmento y pégalo justo debajo de la linea encontrada en el Paso 2.
• Paso 5. Guarda la plantilla y visualiza el Blog

Puedes variar el aspecto del botón gracias al parámetro layout. Los posibles valores son: standard, button_count o box_count. Más información en la página de desarrolladores de Facebook

Nota: Como dijimos al comienzo nuestro objetivo es sustituir la barra estándar de botones para compartir de Blogger por unos botones más visuales, es por ello que te recomiendo colocar también el botón de "Twitter" y el botón de "Google+".