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â.
