23 junio 2016

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 :)
Related Posts Plugin for WordPress, Blogger...
      edit

2 comentarios:

  1. Hola Julio,
    Gracias por el tutorial.

    Me da el siguiente error: Error al analizar XML, línea 1577, columna 108: The reference to entity "href" must end with the ';' delimiter.

    Qué puedo hacer para resolverlo?

    Además quiero preguntarte cómo hago para ponerle un llamado a la acción y color de fondo para resaltar el cuadro?.

    ResponderEliminar
    Respuestas
    1. ¡Hola MaryCarmen!

      Disculpa, el código tenía un error (si no me lo comentas nunca me doy cuenta ¡gracias!), ya lo he reparado y lo puedes probar :)

      Eliminar

Todo comentario es bien recibido, pero recuerda: primero será revisado antes de ser publicado. :)
Si deseas incluir un enlace utiliza este código: <a href="URL del enlace">Texto del enlace</a>