¿Te gusta esto?... Entonces que no se te olvide compartirlo ;)

Botones para compartir entradas de Blogger en las redes sociales

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 == &quot;item&quot;'><div class='botonera'><div class='face'><a expr:onclick='&quot;window.open(&apos;http://www.facebook.com/sharer.php?m2w&amp;s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.canonicalUrl + &quot;&apos;,&apos;&apos;,&apos;width=650,height=450&apos;);&quot;' href='javascript:void();'>Facebook</a></div><div class='twit'><a expr:onclick='&quot;window.open(&apos;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl + &quot; Vía:@aquí coloca tu usuario de Twitter&apos;,&apos;&apos;,&apos;width=500,height=500&apos;);&quot;' href='javascript:void();'>Twitter</a></div><div class='goog'><a expr:onclick='&quot;window.open(&apos;http://plus.google.com/share?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title + &quot;&apos;,&apos;&apos;,&apos;width=500,height=500&apos;);&quot;' href='javascript:void();'>Google+</a></div><div class='pint'><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;https://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div><div class='mene'><a expr:onclick='&quot;window.open(&apos;http://www.meneame.net/submit.php?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title + &quot;&apos;,&apos;&apos;,&apos;width=650,height=450&apos;);&quot;' href='javascript:void();'>Menéame</a></div><div class='link'><a expr:onclick='&quot;window.open(&apos;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet + &quot;&amp;source=Aquí debes colocar el nombre de tu blog&apos;,&apos;&apos;,&apos;width=650,height=450&apos;);&quot;' href='javascript:void();'>Linkedin</a></div><div class='whatsapp' id='whatsapp'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' href='javascript:void();'>WhatsApp</a></div></div></b:if>

El <b:if cond='data:blog.pageType == &quot;item&quot;'> </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='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + 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(&quot;whatsapp&quot;).style.display=&quot;block&quot;;}else {document.getElementById(&quot;whatsapp&quot;).style.display=&quot;none&quot;;}</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:


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.
Usamos cookies propias y de terceros que recogen datos sobre sus h√°bitos de navegaci√≥n. Si contin√ļa navegando se considerar√° que acepta su uso. OK M√°s informaci√≥n aqu√≠