Cómo colocar los botones de redes sociales al final de cada post

Lo que veremos en este post es algo muy básico, algo de lo que hace tiempo debí hablado (como unos 3 o 5 años) y solo es que hasta que lo volví a aplicar en un proyecto en el que estoy trabajando recordé que nunca había hablado de él en el blog.

Un problema que tenemos los usuarios de Blogger son los pequeños botoncitos sociales que coloca por defecto al final de cada entrada, los cuales son muy pequeños (por no decir minúsculos) y para nada atractivos que no ayudan en nada a la estética y difusión de la entrada. Seamos sinceros, ¿alguna vez lo hemos utilizado en otros blogs?

Gracias a dios, Facebook, Twitter y las demás redes sociales nos permiten colocar su propio botón personalizado, cosa que veremos como realizar de manera rápida y sencilla en este post.

En el caso de estos botones, los colocaremos de tal forma que solo sean visibles al momento de de ver completamente el post y no así cuando se encuentre resumida en la entrada principal (si tenemos activada esa opción claro), esto con el fin de que no se repita en cada post que aparece en el inicio de nuestro blog y que haga mas pesada su carga (cosa que a nide le gustará: ni a tí, ni a tu lector ni a google).

Colocando los botones sociales en Blogger

Para colocar los botones de "me gusta" y demás, debemos hacer lo siguiente:

1.- Ir a Blogger.
2.- En la pestaña Plantilla de nuestro blog y después hacer clic en Editar HTML
3.- Hacer clic dentro de la plantilla y apretar ctrl + F para abrir la barra de búsqueda
4.- Buscamos la segunda etiqueta <data:post.body/> (pulsa intro 2 veces) y justo debajo de esta etiqueta pegaremos el siguiente código:

<b:if cond='data:blog.pageType == "item"'> <table border='0' cellpadding='0' style='float:left;'> <tbody>
<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='es' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'> </a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td> <td> <g:plusone expr:href='data:post.url' size='medium'/> </td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=true&amp;share=true&amp;width=120&amp;height=21&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; height:21px'/></td>
</tr>
</tbody> </table>
</b:if> 

5.- Guarda los cambios.

Nota: En caso de que no obtuvieras los resultados esperados, aplica los cambios en la tercera etiqueta <data:post.body/> que debe estar apenas unas líneas abajo, y en caso de seguir sin obtener resultados, intenta con las demás hasta que des con la indicada. Checa muy bien este paso, que es el que más problemas trae.

Al observar las entradas de tu blog observarás que al final ya cargará los botones de redes sociales. Las partes marcadas en el código en rojo son condicionantes que evitan mostrar los botones en la pagina principal, en caso de que tengas las entradas resumidas (con el salto de línea). Si deseas mostrarlas solo elimina las etiquetas rojas.

¿Qué te pareció? ¿Pudiste lograrlo? ¿Conoces algún otro método? comparte tus observaciones en los comentarios.

¿Te fue de ayuda este artículo?

Si el artículo te agrada puedes suscribirte a La Taberna para recibir las últimas actualizaciones del blog o bien, puedes dar me gusta en Facebook, seguir en Twitter o agregar a tus círculos de Google +. También puedes expresar alguna duda, sugerencia, o comentario a través de la página de contacto o aquí en la misma entrada.

¡No te pierdas ninguna publicación!

Suscríbete a La Taberna de Julio y recibirás todas las actualizaciones directamente en tu correo. Cero SPAM, lo prometo :)