Cuando tenemos un blog de Blogger por default este nos trae plantillas que incorporan botones para compartir las entradas en las redes sociales como Facebook, Twitter, Linkedin, etc, el problema con esto es que dichos botones sociales son muy feos.
A mí en lo personal estos botones sociales no me gustan ya que no llaman la atención de los lectores para que estos interactúen más y se animen a compartir las entradas de mi blog en la redes sociales y por eso los tengo desactivados y tengo visibles los que puedes ver en este blog.
Los botones que están al inicio de cada entrada y al final son con HTML y CSS, estos no involucran códigos javascript externos ya que todo es interno y cuando un usuario hace clic para compartir una entrada de forma automática se abre una ventana pop up que se ejecuta a través de un pequeño script que permite a los lectores compartir los contenidos.
Las ventanas pop up son malas cuando se abren de forma automática dentro de un post ya que son intrusivas y cuando esto ocurre en la mayoría de los casos llevan a páginas con malwares, pero en este caso solo saltan si los lectores quieren y llevan a sus cuentas en las redes sociales para que compartan los post, así que no hay ningún problema con esto.
¿Cómo se pueden añadir los botones para compartir en las redes sociales las entradas de un blog de Blogger?
Bueno aquí te enseñare como puedes añadir estos botones al final de cada entrada de tu blog, el procedimiento es muy sencillo, si estas ingresando a través de tu pc o laptop los botones que te aparecerán son los de: Facebook, Twitter, Linkedin, Meneame, Google+ y Pinterest, pero si ingresas desde un Smartphone podrás observar que el botón para compartir en WhatsApp también aparece y te enseñare como se hace esto.
Bueno primeramente debes buscar las siguientes líneas de código para añadir los botones:
- <div class=’post-footer-line post-footer-line-3′> Esta es la línea de código de la plantilla para PC.
- <div class=’post-footer-line post-footer-line-2′> Esta es la línea de código de la plantilla para dispositivos móviles, si te aparece dos veces debes ir a la segunda.
Justo debajo de ambas líneas debes pegar el siguiente código:
<b:if cond=’data:blog.pageType == "item"’><div class=’botonera’><div class=’face’><a expr:onclick=’"window.open('http://www.facebook.com/sharer.php?m2w&s=100&p[title]=" + data:post.title + "&p[summary]=" + data:post.snippet + "&p[url]=" + data:post.canonicalUrl + "','','width=650,height=450');"’ href=’javascript:void();’>Facebook</a></div><div class=’twit’><a expr:onclick=’"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " Vía:@aquí coloca tu usuario de Twitter','','width=500,height=500');"’ href=’javascript:void();’>Twitter</a></div><div class=’goog’><a expr:onclick=’"window.open('http://plus.google.com/share?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=500,height=500');"’ href=’javascript:void();’>Google+</a></div><div class=’pint’><a href=’javascript:void((function(){var%20e=document.createElement('script')
;e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());’>Pinterest</a></div><div class=’mene’><a expr:onclick=’"window.open('http://www.meneame.net/submit.php?url=" + data:post.canonicalUrl + "&title=" + data:post.title + "','','width=650,height=450');"’ href=’javascript:void();’>Menéame</a></div><div class=’link’><a expr:onclick=’"window.open('http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl + "&title=" + data:post.title + "&summary=" + data:post.snippet + "&source=Aquí debes colocar el nombre de tu blog','','width=650,height=450');"’ href=’javascript:void();’>Linkedin</a></div><div class=’whatsapp’ id=’whatsapp’><a data-action=’share/whatsapp/share’ expr:href=’"whatsapp://send?text=" + data:post.title + " – " + data:post.url’ href=’javascript:void();’>WhatsApp</a></div></div></b:if>
Une el script de arriba en una linea lo tuve que cortar para que quedara bien en la entrada
El <b:if cond=’data:blog.pageType == "item"’> </b:if> es solo un condicional para que los botones aparezcan dentro de las entradas del blog únicamente y no en la página principal ya que se vería feo.
Aun no guardes el código ya que debes buscar ]]></b:skin> o </style> (esto dependerá de tu plantilla) y arriba de la etiqueta debes pegar los estilos de los botones. La mayoría de las plantillas de Blogger utilizan ]]></b:skin> para el cierre de las líneas de estilos CSS, la única forma de que aparezca </style> es que la plantilla sea personalizada como la mia; el código de los estilos es el siguiente:
.botonera .face a{background:#3b5998}.botonera .twit a{background:#2daae1}.botonera .goog a{background:#dd4b39}.botonera .pint a{background:#ca2128}.botonera .mene a{background:#ff6400}.botonera .link a{background:#0079bb}.botonera .whatsapp a {background: #189d0e;}
Ahora si puedes hacer clic en “Guardar Tema”.
Hasta aquí los botones funcionaran correctamente tanto para PC como para Smartphone excepto el de WhatsApp, en mi caso yo no utilizo plantilla para móviles porque la de escritorio es adaptable a cualquier tamaño de pantalla y por eso incluí de una vez en el código el botón de WhatsApp, no hay problema con que añadas ambos códigos así en tu plantilla, pero en la de escritorio que es la que va debajo de <div class=’post-footer-line post-footer-line-3′> puedes eliminar el botón de WhatsApp que se encuentra de último, dicho código es:
<div class=’whatsapp’ id=’whatsapp’><a data-action=’share/whatsapp/share’ expr:href=’"whatsapp://send?text=" + data:post.title + " – " + data:post.url’ href=’javascript:void();’>WhatsApp</a></div></div> (También la deje señalada arriba en negrita)
Ahora bien como ya dije este botón todavía no funcionara correctamente hasta este punto y para que pueda hacerlo sin problemas en móviles debes buscar </body> y arriba de esa línea debes pegar el siguiente script que permitirá el funcionamiento del botón:
<script>if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.getElementById("whatsapp").style.display="block";}else {document.getElementById("whatsapp").style.display="none";}</script>
Luego debes hacer clic nuevamente en “Guardar Plantilla”, este script detecta desde el tipo de navegador que un usuario entra si es de escritorio o de móviles y permite que el botón aparezca o desaparezca según el caso, haciendo un llamado por ID al div. Una vez que hagas todo esto tus botones deben quedar de la siguiente forma:
- Google+
- Menéame
Si estas ingresando desde una PC puedes ver que los botones que están arriba son desde el de Facebook hasta el de Linkedin y si ingresas desde un Smartphone podras ver el de WhatsApp (Los botones están desactivados dentro de la entrada ya que solo son muestras de como te deben quedar, pero los puedes usar para compartir el post desde el inicio o abajo de este contenido).
Estos botones sociales son súper ligeros
Como estos botones no utilizan funciones externas javascript esto permite que sean súper ligeros ya que solo se ejecutan con CCS, HTML y scripts internos, este post lo hice gracias al contenido original de OloBlogger, lo que hice fue añadir el botón de WhatsApp para complementar la botonera que permite compartir las entradas en las redes sociales, en caso de que quieras visitar el post original creado por Oloman lo puedes hacer desde aquí “Botones sociales ligeritos de peso para evitar demora en la carga”.
