• Ir al contenido principal
  • Skip to secondary menu
  • Ir al pie de pĂĄgina
El Blog De Leonardo Muñoz

El Blog De Leonardo Muñoz

  • Home
  • Blog
  • Trading
    • Brokers de Forex
    • Brokers de Opciones Binarias
  • Ingresos Online
    • Afiliados Forex
    • Bitcoin
    • Compra y venta de dĂłlares
    • Emprende en Internet
    • Google AdSense
    • Ingresos por Internet
    • Marketing Digital
    • Programas de afiliados
    • YouTube
  • Publicidad Digital
    • Bing Ads
    • Facebook Ads
    • Google Ads
    • Twitter Ads
  • MĂĄs
    • Actualizaciones del blog
    • Blogger
    • Crecimiento de mi canal de YouTube
    • EducaciĂłn Financiera
    • PrevenciĂłn del fraude
    • Procesadores de Pago
    • Recomendaciones tecnolĂłgicas
    • Redes Sociales
    • SEO
    • Sugerencias
    • WordPress
      • Dominios
      • Hosting WordPress
      • Tutorial
    • Donaciones
El Blog De Leonardo Muñoz > Blogger > Botones para compartir entradas de Blogger en las redes sociales

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>

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 == &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.

Botones para compartir entradas de Blogger en las redes sociales

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:

  1. Facebook
  2. Twitter
  3. Google+
  4. Pinterest
  5. Menéame
  6. Linkedin
  7. WhatsApp

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

También te puede interesar:
  • Utiliza la verificaciĂłn de dos pasos en tu cuenta Todo Google
  • MantĂ©n el porcentaje de rebote de tu blog bajo
  • Incrementa tus ventas con la publicidad onlineIncrementa tus ventas con la publicidad online
  • QuĂ© es y cĂłmo utilizar el archivo Robots.txtQuĂ© es y cĂłmo utilizar el archivo Robots.txt

Mi nombre es Leonardo Muñoz y soy el autor de este blog, me gusta todo lo relacionado al marketing digital y por esa misma razĂłn me motivo a escribir publicaciones por aquĂ­ para lectores como tĂș que quieren aprender acerca de las posibles estrategias que pueden usar para aplicarlo y ganar dinero en Internet y tambiĂ©n escribo de otros temas muy interesantes.

SĂ­gueme en las redes sociales
SĂ­gueme en FacebookSĂ­gueme en TwitterSĂ­gueme en YouTubeSĂ­gueme en Linkedin
Footer
Usamos cookies que recogen datos sobre sus hĂĄbitos de navegaciĂłn. Si continĂșa navegando se considerarĂĄ que acepta su uso.
PolĂ­tica de cookies +
Advertencia de riesgos: Producto difícil de comprender, la CNMV ha determinado que no es adecuado para los pequeños inversores, debido a la complejidad y alto riesgo que implica.

Advertencia para personas de la Unión Europea: Los CFDs son instrumentos complejos que conllevan un elevado riesgo de perder dinero råpidamente debido al apalancamiento. Entre el 74-89% de las cuentas de inversores minoristas pierden dinero al operar con CFDs. Es necesario que entienda el funcionamiento de los CFD y si se puede permitir asumir el alto riesgo de perder su dinero.

Copyright © 2017-2018: El Blog De Leonardo Muñoz
 
Consulte Nuestros Términos y Condiciones y Nuestra Política de Privacidad