Botones sociales ligeritos de peso para evitar demora en la carga | Oloblogger Los botones sociales que casi todos ponemos en nuestras páginas para que los lectores puedan compartir sus contenidos, son uno de esos eleme...

30 de julio de 2014

Botones sociales ligeritos de peso para evitar demora en la carga

Los botones sociales que casi todos ponemos en nuestras páginas para que los lectores puedan compartir sus contenidos, son uno de esos elementos prácticamente fijos que suman peso en nuestras plantillas y afectan a la velocidad carga.

Cada botón que añadimos supone por una parte más código a cargar y no sólo por esas pocas líneas que ponemos, sino también por todo el contenido que dichas líneas generan al llamar a sus correspondientes funciones JavaScript o al contenido de otras páginas externas para mostrarse mediante iframes.

Por otra parte, cada llamada a esos sitios externos supone una nueva petición para el servidor que siempre es también motivo de algo de demora. Es verdad que para casi todos existen sistemas asíncronos (Google+, Pinterest) que alivian un poco este tema, ya que no cargan todo ese código hasta que el contenido principal de nuestro propio sitio no ha aparecido, pero a la postre, también se cargan y suman.

Un sitio dónde me gusta comprobar esto porque es muy gráfico es en Pingdom Tools. En esa o cualquier otra herramienta similar, fijaros en los ficheros que se cargan y que llevan el nombre fb, twitter o plus, aunque simplemente con una conexión lenta (móvil) ya se puede apreciar perfectamente como esto de los botoncitos es de lo que más tarda en cargar.

Botones sociales lentos


Pero pocos quieren queremos renunciar a esos botones y por otra parte, también nos gusta que luzcan hermosos y operativos en nuestro sitio ¿verdad?

Pues nada, hoy veremos un sistema para que todo eso que se tiene que cargar, sólo se haga cuando el usuario pinche en el botón en cuestión y por otra parte, que este tenga el aspecto que nosotros queramos... dentro de unos límites.

Porque eso sí, esta mejora tendrá un precio y será que tendremos que renunciar a los contadores de los botones. Pero ¿a quién le importan esos números además de a nuestro ego? Recordar que para conocerlos ya existen otras herramientas.


Todo el sistema se basa en usar direcciones específicas que permiten pasar parámetros y que casi todos los servicios tienen para poder remitir artículos. Aquí tenéís una lista de direcciones directas para compartir que incluye las redes más populares y alguna cosilla más por si con las seis que pondré no tenéis bastante.

Teniendo esas direcciones y añadiéndole unas cuantas variables, habremos resuelto el tema del lastre de los botones sociales.

No vamos a cargar nada a priori, ni librerías, ni imágenes externas, ni datos sobre contadores... nada. Todo serán enlaces (casi) simples y será después de que nuestra página haya terminado de cargar -no antes- cuando al pinchar los botones se lanzará una ventana emergente con el servicio escogido y automáticamente se añadirán en ella los datos del artículo: título, resumen, imagen, etc.

Sería algo como esto que podéis probar a continuación, pues los siguientes son botones de ese tipo, totalmente operativos.




Una vez explicado que esto son simples enlaces, para conseguir que se abran en ventana nueva lo que hacemos es añadir un JavaScript básico para generar un pop-up y mediante las variables DATA de Blogger, ya añadimos el resto de datos que en cada caso nos son necesarios. Para otras plataformas el sistema sería el mismo pero utilizando las variables que le sean propias (y que desconozco).

Este sería el código a insertar en la plantilla, allá dónde queramos que aparezcan los botones. Como siempre, los dos sitios que parecen idóneos para Blogger serían dentro del post-header o del post-footer.

<div class='botonera'>
<!-- Google+ -->
<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>
<!-- Twitter -->
<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:@oloman&apos;,&apos;&apos;,&apos;width=500,height=500&apos;);&quot;' href='javascript:void();'>Twitter</a></div>
<!-- Pinterest -->
<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;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div>
<!-- Facebook -->
<div class='face'>
<a href='javascript:void();' 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;'>Facebook</a></div>
<!-- Menéame -->
<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>
<!-- Linkedin -->
<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=Oloblogger&apos;,&apos;&apos;,&apos;width=650,height=450&apos;);&quot;' href='javascript:void();'>Linkedin</a></div>
</div>

No olvidéis cambiar los dos datos marcados en verde por los vuestros propios. Son en el botón de Twitter el usuario y en el de Linkedin, el de la fuente o source.

Con esto ya tenemos unos enlaces que servirán para compartir, pero como querremos algo un poco más mono, con CSS los animamos y de paso los hacemos adaptables (RWD). Este sería el estilo necesario para que quedaran como visteis antes.

.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {overflow: hidden;margin: 0px;display: inline-block;*display: inline; zoom: 1;}
.botonera a {display: inline-block; *display: inline; zoom: 1;width: 62px;height: 20px;margin: 2px;padding: 0 2px;color: white;text-decoration: none;line-height: 20px;text-align: center;font-family: arial;font-size: 12px;cursor: pointer;}
.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;}


¿Los queremos con otra pinta y quizás más gráficos? Pues nada como crear un sprite y usarlo para los botones. Estos también funcionan con el mismo sistema. Probando si eso...


Para los perezosos, el CSS para este otro aspecto sería el siguiente y el sprite que utiliza está al final del post para descargarlo si lo queréis, pero espero que le echéis imaginación y a partir de ahora haya botones ligeros por todas partes con aspectos mil ;)

.botonera {margin: 10px auto;text-align: center;font-size: 0;}
.botonera div {text-indent:-9999px;overflow:hidden;margin:0px;display:inline-block;*display:inline;zoom:1; }
.botonera a { width:32px; height:32px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFuVjIxPQpquxiJ0a0cP79CFN4dlmuaWx6hZ4QWFMHUBQ9YnVDtqauWtLeIfndjEHrNkU2VjhwVZ_vNoyla7l_iIjMPpgUKuAssgCuTiD0pNaA0EaQDYIpwymcdh921iwSzz0_om2Ol6M/s1600/sprite-redes32.jpg);cursor: pointer;}
.botonera .link a {background-position: 0px 0px;}
.botonera .mene a {background-position: -32px 0px;}
.botonera .face a {background-position: -160px 0px;}
.botonera .twit a {background-position: -192px 0px;}
.botonera .pint a {background-position: -224px 0px;}
.botonera .goog a {background-position: -32px -32px;}


Actualizado el código en lo referente al botón de Facebook para evitar el error que se producía al compartir en esa red desde dispositivos móviles. La magia la hace un simple m2w&amp;

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

129 comentarios :

  1. oloman estan perfectos, pero ahi un problema y es que ha los usuarios que accesen a nuestros blogs desde navegadores como firefox al hacer click en compartil le abrira una segunda pagina en blanco aparte de la emergente apareciendo el codigo [object Window] y puede resultar incomodo para un usuario que quiera seguir navegando en nuestro blog.

    ResponderEliminar
    Respuestas
    1. Gracias por la observación Kelvin. Prueba ahora que creo que ya lo he solucionado y corregido en el código

      Eliminar
    2. Yo también he notado ese problema en Firefox.
      Se podría solucionar cambiando de lugar el código javascript: en lugar de incuirlo en el atributo href, escribirlo en el atributo onclick:
      <div class='botonera'>
      <!-- Google+ -->
      <div class='goog'>
      <a href="javascript:" 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;'>Google+</a></div>
      <!-- Twitter -->
      <div class='twit'>
      <a href="javascript:" expr:onclick='&quot;window.open(&apos;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl + &quot; Vía:@oloman&apos;,&apos;&apos;,&apos;width=500,height=500&apos;);&quot;'>Twitter</a></div>
      <!-- Pinterest -->
      <div class='pint'>
      <a href="javascript:" onclick='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;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'>Pinterest</a></div>
      <!-- Facebook -->
      <div class='face'>
      <a href="javascript:" expr:onclick='&quot;window.open(&apos;http://www.facebook.com/sharer.php?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;'>Facebook</a></div>
      <!-- Menéame -->
      <div class='mene'>
      <a href="javascript:" 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;'>Menéame</a></div>
      <!-- Linkedin -->
      <div class='link'>
      <a href="javascript:" 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=Oloblogger&apos;,&apos;&apos;,&apos;width=650,height=450&apos;);&quot;'>Linkedin</a></div>
      </div>

      Eliminar
    3. Muy bien Jorge. Precisamente estaba experimentando con una pequeña función pero esa idea me parece mucho más sencilla. Gracias. Lo pruebo y lo incorporo, porque estoy viendo que falla en Facebook.

      Eliminar
    4. Hola amigo nuevamente, te escribo para informarte que el boton de facebook en miviles no funciona, espero y me puedas ayudar saludos.

      Eliminar
    5. ¿Qué es lo que ocurre en móviles exactamente?

      Eliminar
    6. al darle a compartir en facebook desde movil abre una ventana emergente que tira error, puedes accesar a este articulo desde un movil y darle a compartir y veras.

      Eliminar
    7. Pues hasta aquí llego Kelvin. Ya no sé cómo solucionar eso. Sin embargo a mí me pasa algo distinto; lo hace todo bien (sin errores) pero no carga la dirección a compartir :(

      Eliminar
    8. disculpa por mi mala explicacion, pero es exactamente lo mismo que me pasa ami.

      Eliminar
  2. Oloman, le he dado clic al boton de Pinterest para compartir la imagen y no sale la ventana emergente para poder compartirla.

    ResponderEliminar
    Respuestas
    1. ¿En ninguno de los cuatro que hay (cabecera post, demo1, demo2, pie post) te funciona? Yo lo acabo de probar y me va en todos. A veces demora un poquito en cargar, porque piensa que el truco consiste precisamente en que no está pre-cargado.

      Eliminar
    2. Te explico: yo he querido compartir la imagan de tu post y cuando le doy clic a tu botón de Pinterest me sale otra pagina, en donde se muestran hasta las imagenes de los comentarios de este post.

      Y en un blogg de pruebas que tengo cuando le doy clic al boton de Pinterest no sale nada. En ese blog tambien le puse lo que mencionas en este post http://www.oloblogger.com/2013/05/boton-pin-hover.html

      Los demás botones me funcionan muy bien. Espero haberme explicado. Saludos Oloman "no te pierdas"

      Eliminar
    3. Ahora sí entendí Jhonny, pero es que es así como funciona el botón de Pinterest: se pincha en él y un marco se solapa sobre la página mostrando todas las imágenes disponibles para que el usuario pueda compartir la que desea. No sé si habrá otro tipo de botón, pero si hay más de una imagen ¿cómo marcamos la que queremos?

      Eliminar
  3. Oloman parece que las comillas sencillas que tiene el titulo de este post en la palabra misterio bloquean todos los botones sociales ligeros, lo mismo que este otro en la palabra flyout. Si las cambias por comillas dobles funcionan sin problemas.

    Si al comienzo del texto de la entrada del post se utiliza alguna palabra con comilla sencilla se bloquea el botón de Facebook únicamente. Si se utiliza comilla doble en el texto no se bloquea. (En resumen, mejor utilizar comillas dobles tanto para el titulo como para el texto de la entrada.

    ResponderEliminar
    Respuestas
    1. OK Roudy. Gracias.

      Yo sabía que las comillas dobles en los títulos daban problemas en algunos sistemas de sumarios hechos con JavaScript, pero no había caído que eso podía ser problema también para este tipo de botones.

      Tú dices que mejor comillas dobles, pero como digo, yo he comprobado que eso genera otro tipo de problemas así que mi conclusión es: MEJOR SIN NINGÚN TIPO DE COMILLAS en los títulos

      Eliminar
  4. Me sale esto en FB =O
    ¿Me puedes ayudar?

    Blogger
    accounts.google.com

    Free weblog publishing tool from Google, for sharing text, photos and video.

    ResponderEliminar
    Respuestas
    1. No entiendo qué es eso porque no sé en qué contexto estamos hablando. Si pudieras darme más detalles...

      Eliminar
    2. Entiendo lo que pasa, debes habiltar el blog como publico, la ruta es: Configuración > Lo basico > Permisos > Lectores del blog y cambiar de privado a público, eso lo debe solucionar

      Eliminar
    3. Gracias Mario, pero yo sigo sin entender nada. Esperemos que tu inspiración sea efectiva ;)

      Eliminar
  5. Saludos mi estimado Amigo Oloman... como siempre haciéndonos mas fácil la vida a los que apenas seguimos intentado arreglar y poner bonito nuestro site...

    por otro lado te quiero poner una pequeña molestia respecto a una plantilla de un amigo al cual le estoy ayudando .... el problema es el siguiente:

    Quiero reducir el espacio entre el Menu y el Cuerpo de los post de este blog:..
    http://tierraltaparaisodetodos.blogspot.com/
    cabe anotar que el menu esta puesto en un gadget que ya viene prediseñado en la plantilla es una plantilla de blogger... desde ya muchas gracias por todos tus aportes y ayudas que siempre me han sido de gran utilidad.. un Abrazo y sigue Adelante DTB !!!!!!!

    ResponderEliminar
    Respuestas
    1. Busca en la plantilla...
      .main-inner {
      padding-top: 30px;
      }
      ...y cambia ese 30px por un 0px. Si no lo tienes entonces inserta un...
      .main-inner {
      padding-top: 0 !important;
      }

      Eliminar
    2. Gracias mi hermano... ya lo logre quedo genial.. como siempre el mejor.... :) un Abrazo !!!!!!

      Eliminar
  6. Hola Oloman me gustaron mucho los botones, pero me gustaria ponerle el efecto como de opacidad como los tienes tu, me podrias decir como por favor?
    un saludo!

    ResponderEliminar
    Respuestas
    1. Muy observador ;) Eso se me ocurríó después.
      Para conseguirlo añade a ".botonera a" un "opacity: .8;" y luego añade una nueva línea que sea
      .botonera a:hover {opacity: 1;}

      Eliminar
  7. Saludos Oloman... disculpa la molestia pero tengo un problema muy raro con el gadget de: " Lo mas Visitado" en mi blog.. depronto la ultima imagen se sale del gadget de la sidebar y no me acuerdo haber echo alguna mejora a la plantilla de mi blog.. si me pudieras colaborar te lo agardecria enormemente.. desde ya un Abrazo.. este es mi blog;...... blogdejoralgom.blogspot.com
    Disculpame el spanm...

    ResponderEliminar
    Respuestas
    1. No lo veo... ¿está arreglado?

      Eliminar
    2. Hola Oloman sii.. depronto se arreglo no se si fue un error de google o mis navegadores.. pero ya esta solucionado.. de todas maneras Mil Gracias por Responder.. un Abrazo !!!!

      Eliminar
  8. Hola Oloman.
    Guardaré ese codigo de los botones por si algún dia me animo a utilizarlos.
    Bueno quería preguntarte algo que no va sobre el tema de los Botones.

    Sabes como podría areglar este pequeño problema?:

    http://4.bp.blogspot.com/-14whxIoHLRs/U_qoRQKgf7I/AAAAAAAAA2w/NLmvLOSI480/s1600/Sin%2Bt%C3%ADtulo.png

    Para que entiendas mejor la imgen: Dividí en tres columnas la columna de post, nose si me explico. Bueno el problema es que quedan muy separados unos post de otros.
    Los codigos que tengo son:

    .post-outer {display: inline-block;}

    .post {
    border:2px solid #BFBFBF;
    background:#FAFAFA;
    float:left;
    width:240px;
    margin:7px;
    padding:0px 5px 5px 5px;
    overflow:hidden;
    }


    Y otra pregunta.
    Bueno tengo este script:


    ***************

    summary_txt = 50;img_thumb_width = 95;

    original de Anhvofunction removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}
    }strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
    function createSummaryAndThumb(pID, pURL){
    var div = document.getElementById(pID);var imgtag = "";
    var img = div.getElementsByTagName("i m g");
    if(img.length<=0)
    ;summ = summary_txt;}
    var summary = imgtag + '+ removeHtmlTag(div.innerHTML,summ) + ;
    div.innerHTML = summary;

    *****************************(borre algunas cosas a este codigo por que sino no se puede publicar en comentario XD)

    Script que sirve solo para imágenes. ¿Sabes de algún script pero para videos?


    Saludos...

    ResponderEliminar
    Respuestas
    1. Cambiaste de plantilla y ya no existen esos problems ¿No, José?

      Eliminar
    2. La plantilla la tengo en este blog de pruebas http://1abril1983.blogspot.com/

      Bueno el primer problema lo solucione con algo llamado Masonry.

      Masonry es una biblioteca de diseño de cuadrícula JavaScript. Funciona mediante la colocación de elementos en la posición óptima basada en el espacio vertical disponible.

      Pero aún no encuentro el script para hacer video thumbnail.

      Eliminar
    3. Conozco Masonry, pero gracias por indicarlo para otros que puedan necesitarlo.

      Lo que no conozco es ningún script para capturas de vídeos, pero si estás dispuesto a reducir el tamaño de los resúmenes de texto a cambio de una mayor velocidad, este sistema sí que te captura bien la miniatura de los vídeos gracias al data:post.thumbnailUrl de Blogger.

      Luego sólo es cuestión de redimensionarla y hacerla cuadrada con este otro truco.

      Eliminar
    4. Este codigo lo encontre unas horas después de hacerte la pregunta

      http://www.oloblogger.com/2012/03/miniaturas-para-sumarios-mas-grandes.html

      Auque un poco diferente

      http://2.bp.blogspot.com/-LMCLqzD66k0/VAU8zpEHZ7I/AAAAAAAAA6s/0pKQnanGlKk/s1600/Sin%2Bt%C3%ADtulo.png

      Y sobre los codigos de
      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Me intero el de:



      Intentaré agregar eso del primer post completo a ver si sale.

      Eliminar
    5. OK
      - alguien usó mi truco de redimthumb :) -

      Eliminar
    6. "alguien usó mi truco de redimthumb" XD

      Aún no consigó agregar el truco del Primer post completo y
      tras varias vueltas en mi cabeza, el codigo sigue lo mismo

      http://2.bp.blogspot.com/-LMCLqzD66k0/VAU8zpEHZ7I/AAAAAAAAA6s/0pKQnanGlKk/s1600/Sin%2Bt%C3%ADtulo.png

      XD XD. En tú post:

      http://www.oloblogger.com/2013/03/sumarios-rapidos-blogger-resumenes.html

      Ví el codigo:





      Pero nose que otro codigo le faltará, es que quiero agregarle estilo, nose si me explico.

      El primer post, que tenga un ancho más grande que los demás post.

      Eliminar
    7. "Ví el codigo:
      b : if cond = ' data : post . is FirstPost ' >
      < data : post . body / >
      < b : else / >
      "

      Eliminar
    8. De todos los del enlace de sumarios rápidos, el que te interesa creo que es marcado como "SUMARIOS. PRIMER POST COMPLETO EN TODO TIPO DE PAGINAS. RESTO CON SNIPPET AUTOMATICO"

      Pruébalo (funcionará seguro) y luego ya añades el redimthumb.

      Eliminar
  9. Hola Oloman, Se ven muy bien, los probaré en alguno de mis blogs. ¡Gracias! ¡Un abrazo!.

    ResponderEliminar
  10. Oloman tengo una duda, estas lineas de código no funcionan con Blogs que utilizan las Plantillas Dinámicas de Blogger, lo he probado en un blog de prueba y no me abren las ventanas emergentes, puedes ayudarme, http://blogdepruebaderafomorales.blogspot.com/2014/08/prueba-botones-de-compartir.html

    ResponderEliminar
    Respuestas
    1. Hola. Si observas el código ya interpretado con el inspector de tu navegador, verás que el problema es que las comillas se "tradujeron" mal. Desafortunadamente ese tipo de plantillas son tierra extraña para mí y no te sabría decir qué pasa.

      Conste que lo he intentado, pero ni siquiera he logrado que los botones (ni funcionando mal) salieran.

      Eliminar
    2. Eso es porque las etiquetas data de Blogger (de donde se obtienen los datos de los botones) y el atributo expr: solo se interpretan en la parte de la plantilla.

      Para que funcionen en un post, cambia el atributo expr:onclick por onclick y cambia los valores data por variables de javascript como document.title para el título del post o location para la URL.

      Eliminar
  11. Hola Oloman resulta que al momento de compartir en Facebook aparecen partes que no tienen nada que ver con la plantilla. ¿Que crees que deba modificar? https://imagizer.imageshack.us/v2/650x405q90/537/GUBGnY.jpg

    ResponderEliminar
    Respuestas
    1. Facebook obtiene los datos de tu página (resumen e imágenes) mediante las etiquetas <meta> de tu sitio.
      Asegúrate de incluirlas correctamente.

      Eliminar
    2. Gracias Jorge, pero aparte de eso conviene tener otras cosillas en cuenta:
      http://www.oloblogger.com/2014/05/problema-imagen-compartir-enlace-facebook.html.

      Eliminar
  12. A mi me pasa algo similar, ocupa las mismas 3 imágenes que no tienen nada que ver con el post, entre a developers de Facebook y me menciona esto

    http://1.bp.blogspot.com/-yjhoA0DOdJg/VAlKzq7dvQI/AAAAAAAAAxE/RSxTvW5S_vY/s1600/Captura%2Bde%2Bpantalla%2B2014-09-05%2Ba%2Bla(s)%2B00.29.54.png

    ¿Qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. Lee los detalles de la captura de pantalla que indicas: la imagen del post para Facebook (og:image) debe tener una medida mínima de 200x200px y debe estar pública en la red para que Facebook pueda acceder a ella.

      Eliminar
    2. Actualmente el mínimo es de 600x315px para que todo vaya bien. Os remito de nuevo al enlace que puse en 12.2.

      Eliminar
  13. Buenas. Te haré una pregunta algo tonta pero es que ando un poco perdida. ¿Dónde exactamente hay que colocar el código para que se vea al final de una entrada? He probado lo que tú dices pero no me funciona. Un saludo.

    ResponderEliminar
    Respuestas
    1. Hay que escribir el código justo donde quieras que aparezca. En tu caso, después de: <div class='post-footer'> que es el pie de la entrada.

      Eliminar
    2. Muchas gracias!! Me ha quedado perfecto. Un saludo.

      Eliminar
  14. Gracias, simple pero rápido ;D

    ResponderEliminar
  15. Buen tutorial amigo, tengo un problema quiero ponerlo como un gadget y no captura los datos, lo probe primero como código en el gatget y luego reemplace el código en la plantilla y nada no captura las variables, me das una ayuda

    ResponderEliminar
    Respuestas
    1. Como gadget nunca funcionará, pues como tal no se capturan los valores que tengan las variables DATA de Blogger (dirección página, título, etc.), pero en la plantilla, si lo pones dónde se indica sí te debería funcionar. Quizás lo estás poniendo en otra sección Ericka.

      Eliminar
    2. Pues si quería que salga a mi derecha debajo de mis categorías asi: [IMG]http://i57.tinypic.com/2lbg7km.png[/IMG]. No hay forma de hacerlo lijero que funcione alli

      Pdta: Sabras como generar con un xml post secuenciales(1,2,3) solo incrementandole un valor para importarlo de uno solo.

      Gracias por tu ayuda

      Eliminar
    3. Como dije, ahí no los vas a poder colocar (fácilmemte) con este sistema.

      La otra pregunta no la entiendo...

      Eliminar
  16. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Es que creo que esa URL para compartir ya no está operativa. La he probado y nada... Incluso busqué a ver si había otra distinta actualmente y no encontré nada que funcionara.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola oloman, Hola iván, encontré la solcuión y funciona en todos los navegadores, (eso creo) y la solución es muy sencilla y es poniendo el código de una ventana pop up... lo ves en: http://www.ciudadblogger.com/2009/05/crear-ventanas-popup.html y en ésta parte: t:popUp('URL del documento')">Abrir ve ponen la URL de tumblr de modo que quede así: cript:popUp('http://www.tumblr.com/share?')" y voiala! espero les sirva, oloman siempre me a ayudado bastante, espero sirva mi pequeño aporte. Un saludo desde Colombia, y si quieren ver funcionando el botón entren en: kangutingo el boton tumblr está junto con los "botones ligeritos de peso de oloman" al final de la entrada bajo el botón de WHATSAPP

      Eliminar
    4. OK Kangutingo. Muchas gracias.

      Eliminar
  18. Hola Oloman, he leido tu post por que tengo problemas al compartir en Facebook resulta que no me sale la descripcion de cada articulo, espero puedas ayudarme tengo el un codigo:



    ResponderEliminar
    Respuestas
    1. Hola. En esta entrada hablaba de cómo poner la imagen para que no fallara, pero de paso también expliqué otras METAs necesarias para otros datos. Échale un vistazo

      Eliminar
  19. Gracias por los botones Oloman, me funcionan bien, el de fb además muestra la imagen y descripción que asignamos con open graph cosa que el botón oficial no hace, me alegra no tener que pasar horas buscando cómo configurar un botón para que muestre bien los datos.

    Sólo una cosa, no he puesto el botón de twitter porque no tengo usuario al no tener cuenta. ¿Se puede poner sin usuario?.

    ResponderEliminar
    Respuestas
    1. Iba a responderte a lo del CSS y he visto que lo habías borrado. Con respecto a lo de Twitter, sí, sin problemas. Elimina la parte que genera el "Vía" y listo. NO tienes que tener Twitter para que tus lectores compartan en esa red.

      Eliminar
    2. Gracias!, qué bonitos quedan, jujuju

      Eliminar
  20. Hola oloman quisiera saber como haces para poner los botones de redes sociales dentro de la entrada, he buscado y re buscado en tu blog pero no consigo ningun post sobre eso (a lo mejor no he buscado bien, no se) y tambien quiero saber como podria hacer para poner tambien los botones de redes sociales estaticos pero del lado izquierdo del blog :3 no se si me explico bien, si sabes algo de esto por favor dime, estoy sufriendo profundamente por el diseño de mi blog

    ResponderEliminar
  21. ¿Dentro de la entrada? No sé si te refieres a como yo los tengo, justo al principio del post flotando a la izquierda, al principio pero sin flotar, al final (esto es lo normal) o lo que pretendes es poner unos botones que siempre estén visibles aún al hacer scroll

    ResponderEliminar
    Respuestas
    1. >.< como los tienes tuuu! es que me gustan MUCHOOOO! <3

      Eliminar
    2. Vale. A ver si cuando tenga tiempo para un próximo post, ese es el tema que puedo tratar

      Eliminar
  22. Hola Oloman! No puedo ponerlo, ya probé con varios botones distintos y no hay caso, no funciona ninguno.
    Podrías fijarte si no tengo algún código que imposibilita cambiar los botones sociales?? Los ponga donde los ponga, los haga como los haga no me funcionan.
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Podría echar un vistazo, pero no te garantizo nada. Dime dónde mirar.

      Eliminar
  23. Hola, Oloman,

    ¿Qué es el source del linkedin (source=Oloblogger)? ¿Cuál es su significado y cómo se configura en Linkedin?

    Muchas gracias,
    CZD.

    ResponderEliminar
    Respuestas
    1. Vendría a ser como el "Vía" en Twitter. Simplemente hay que poner el nombre del sitio de dónde proviene el artículo a compartir.

      Eliminar
  24. Eh colocado los botones sociales, Y solo solo me funciona el de twitter ala perfección y los botones que eh agrados son Facebook, Twitter, Google + Y Pinterest. Ayuda los mas pronto posible.

    ResponderEliminar
    Respuestas
    1. Tendría que verlos Wilbert y en tu perfil no aparece blog alguno. Si lo tienes privado ese puede ser un motivo de que no funcionen

      Eliminar
  25. Creo que voy a probar esto. Usare Fontawasome en vez de poner el nombre de los botones. Espero que me funcione.

    ResponderEliminar
    Respuestas
    1. Sí que te va a funcionar Teleri, pero ten presente que cargar Awesome también produce una demora. Si es que ya lo tienes para otras cuestiones, bien, pero si lo pones expresamente para estos botones, perderás una parte de lo conseguido.

      Eliminar
  26. Hola como inserto estos botones al inicio de mi blog para que los usuarios den compartir antes de ver los articulos. gracias

    ResponderEliminar
    Respuestas
    1. Se cita en el post Tito. Sería insertando el código en el div que lleva la clase "post-header".

      Eliminar
  27. Hey Oloman saludos, solo una pregunta...

    ¿Cómo se podria insertar en un blog un popup flotante con con tu fanpage de facebook.

    Me gustaría que quede como esta pagina tiene este popup flotante para suscribirse por correo. http://musicacristiana-online.blogspot.com/

    gracias anticipadas. :)

    ResponderEliminar
    Respuestas
    1. Hola Emanuel
      Esta sería la forma de hacer eso. Sólo tienes que rellenar la caja "floatbox" en el HTML con lo que quieras, en tu caso, con el código de la fanpage.

      Eliminar
  28. amigo me gustaria darle el estilo que tienes tu y ponerle un contador

    ResponderEliminar
    Respuestas
    1. Los que yo tengo, tanto arriba como abajo, son estos mismos, cada unos con un estilo (CSS) distinto.

      Y los de este tipo no pueden llevar contadores o dejarían de ser ligeros.

      Eliminar
  29. Buenas Oloman quisiera agregar estos tipos de botones a mi blog pero no se como seria el proceso lo quiero en la parte inferior de cada entrada que se publique y en forma horizontal podrias decirme como hacer eso..

    ResponderEliminar
    Respuestas
    1. Hola Jesús

      Lo de la forma horizontal ya está definido en ese código. La primera parte es HTML y la tienes que poner directamente en la plantilla (editándola). En el post se indica dónde, dentro del DIV con nombre post-footer.

      El resto es CSS y por tanto lo tienes que añadir entre las etiquetas SKIN, también en la plantilla (más info)

      Eliminar
  30. Hola Oloman, me gustaría saber como poner la botonera al final de las entradas (prefiero encima de los comentarios) pero sobre todo que salga solamente en las entradas y no en todas las páginas del blog. Si pudieses ayudarme estaría muy agradecido.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Capin
      Sólo tendrías que encerrar todo ese código dentro de una condición para que sólo salga en páginas tipo "item".
      En esta otra entrada se explica con más detalle cómo hacer eso.

      Eliminar
    2. Vale, muchas gracias Oloman, me ha servido de gran ayudar.
      Ahora también me he dado cuenta que en mi plantilla no aparecen las fechas en las Entradas, ¿cómo puedo hacer visible la fecha?

      Eliminar
    3. La miré hace poco tiempo esa página, probé a hacerlo pero seguía sin aparecer nada.
      Además, me he dado cuenta que el lugar donde debería aparecer en la página principal está debajo de:



      Donde deberían aparecer la fecha, las etiquetas y los comentarios, pero no aparece nada. Y luego además tampoco aparece en la entrada.
      Te dejo un enlace a la demo de mi plantilla de blogger:
      http://www.premiumbloggertemplates.com/norma-premium-blogger-template/

      Muchas gracias de antemano. :)

      Eliminar
    4. No ha salido jaja, debajo de:
      div class='post-header-line-1'/>

      Eliminar
    5. La fecha funciona perfectamente en la demo a la que me remites, por lo que es imposible arreglar algo que no está roto.

      Eliminar
    6. Después de investigar un poco conseguí arreglar el tema de la fecha, pero como observaste en la demo, aparece la fecha, las etiquetas o categorías y los comentarios. A mi no me salía ninguna de las tres, ahora que he conseguido la fecha, no consigo las otras dos. Te dejo mi página web para que veas lo que he conseguido con la fecha y las otras dos que no aparecen. Muchas gracias de antemano, se aprende mucho contigo.
      http://www.ctvtelevision.es/

      Eliminar
    7. Pues esos dos que dices están en el mismo sitio que la fecha: o las tienes desactivadas (edita bloque Entradas del Blog en Diseño para comprobarlo) y/o están con un condicional que impide que se vean y/o están ocultas con un display:none en el CSS y/o no está el código que las genera en esa plantilla. Sólo pueden ser esas causas.

      Eliminar
  31. hola Oloman muchas gracis por comaprtir este codigo, pero tengo una problema y nose si se podra resolver, mi problema surge cuando comparto la entrada en twitter y la venta de de emergencia (pop-up) no se cierra automaticamente si no que esta queda avierta lo cual es muy molesto... espero que me puedas ayudar... Saludos!!!

    ResponderEliminar
    Respuestas
    1. No sé cual es el problema exactamente Wilmer. En principio el gadget funciona bien.
      Puede que tengas algún JavaScript que interfiere o algo así. Quizás alguno que hace que los enlaces externos se abran en ventana nueva.

      Eliminar
  32. Hola Oloman
    Lo he puesto en mi blog, y la carga de la pagina se ha reducido bastante. Ahora carga más rápido.
    Una consulta, intento implementar el botón de whatsapp a este código... lo he conseguido, pero no tengo cojones de alinearlo bien, ni de que salga el texto que diga whatsapp...

    Hecha un vistazo en este post: http://www.dparaguay.com/2015/11/gatito-quedo-atrapado-en-cemento-mira.html

    ResponderEliminar
  33. Bueno al final lo conseguí, era solo una cuestión de lógica:

    ResponderEliminar
    Respuestas
    1. Mejor, porque si llegas a tener que esperar a que yo contestara ;)

      Eliminar
  34. Oloman el de facebook no funciona podrias echarme la mano con ello

    ResponderEliminar
    Respuestas
    1. Pues si es lo que otros han dicho sobre que en móviles no les funciona bien, no te voy a poder ayudar, ya que a mí si me funciona. Estoy empezando a sospechar que va a ser problema de ciertos dispositivos y/o la configuración del navegador.

      Eliminar
  35. Ante todo muchisimas gracias por tan buen tutorial y explicación de como implementar éstos botones tan livianos para nuestros Blogs de blogger, de veras gracias Oloman.

    Por otra parte, le dí algo de diseño extra a los botones y quería dejar aqui mi aporte para los demás, aunque no me permite insertar código DIV ,con lo cual no puedo ayudaros.

    os quedaría un poco más personalizados y poniendo el raton encima diria eso de Compartir en Facebook, Compartir en Twitter, etc...

    Os dejo imágen ya que no me deja poner código:

    Botonera:
    http://www.upimages.net/xc.png

    CSS botonera:
    http://www.upimages.net/wc.png

    Como veis en las imágenes es prácticamente los códigos de Oloman, pero algo modificado para darle otro diseño, quedaría así:

    http://www.upimages.net/yc.png

    De nuevo gracias Oloman por tan buen tutorial y ayuda.

    ResponderEliminar
    Respuestas
    1. OK Gamerbyg. Gracias.

      Una de las ventajas que tienen precisamente estos botones es que les puedes dar el diseño que quieras.

      Eliminar
  36. Estimado Oloman: empecé a tunear uno de mis blogs, y tu blog resultó consulta permanente, así que gracias! Estoy en este punto, en cambiar un poco el tema de los botones sociales. Pero me gustaría que queden como los tuyos. Que entradas me recomendarías leer para ello? Gracias!

    ResponderEliminar
    Respuestas
    1. Los míos actuales son precisamente los que expliqué en esta entrada ¿o te refieres a los del principio de cada post? Esos otros son también los mismos pero con el CSS algo cambiado para que salgan en vertical y la manera de insertarlos dentro de la entrada la expliqué aquí.

      Eliminar
  37. Al hilo de los comentarios, he probado cantidad de codigos, adthis, sharethis, y te doy las gracias por tu aporte, pero a mí no me sale nada. Dejo tal cual tu codigo en el post header. Mi blog es http://www.webquepymes.com

    ResponderEliminar
    Respuestas
    1. En el post-header no hay nada ahora mismo, Germán. No es que no te salga, es que no hay código ahí. Posiblemente lo hayas puesto en el post-header equivocado. En las plantillas normalmente hay dos, uno para la plantilla móvil y otro para la de escritorio y como decía, es posible que la hayas puesto en la móvil. Busca otro post-header en tu plantilla y coloca el código allí.

      Eliminar
  38. Definitivamente quitaré los botones de addthis que ya tengo, me alentan un poco la carga y además los bloqueadores de anuncios los quitan, así que ya no valen tanto la pena para mi. ¿Existe alguna manera de agregar un botón para copiar el enlace de la entrada? La botonera de addthis tiene uno así que me pareció bien. Si no lo hay, igual no importa mucho.

    Saludos! Y mil gracias por ayudarnos a mejorar nuestros blogs

    ResponderEliminar
    Respuestas
    1. Hola Rocío. Si existe y precisamente estoy con ello. Cuando lo tenga lo publico.

      Eliminar
  39. Buenos días Oloman,
    Realmente tu post me sirvió muchísimo, gracias por el tutorial tan detallado.
    Pero ahora tengo un problema, en el caso en el que en el título del post tiene un # se corta en ese punto al compartir el twitter. Me explico.

    Digamos que tiene que poner un tweet diciendo:

    "Reseña de #HarryPotter url-del-post via @Stiby"

    Pues lo que realmente sale es:

    "Reseña de "

    Y se corta justo al llegar al #.

    He leído en los comentarios que hay problemas cuando existen comillas en el título del post, ¿ocurre igual con los #? ¿Se puede solucionar de alguna manera?

    Muchas gracias :D

    ResponderEliminar
    Respuestas
    1. (en el botón de Facebook también me da problemas cuando el titulo del post tiene un # y sólo sale un popup diciendo "Enter URL to share")

      Eliminar
    2. Al final he quitado los # de los títulos de las entradas y funciona genial, salvo que el botón de FB no funciona desde el móvil pero creo que he visto ese problema solucionado por los comentarios así que otro día me pondré a solucionarlo.

      MUCHISIMAS GRACIAS DE VERDAD :D tanto por el tutorial como por responder mis dudas por twitter.

      Eliminar
    3. Pues tuviste suerte con Twitter, porque normalmente me demoro bastante en poder contestaros... como estás viendo ahora mismo

      De nada.

      Eliminar
  40. ¿Cómo consigues que una imagen tan grande se inserte entera en una publicación? a mi me quedan recortadas, sobre todo las del What App. Por favor y Gracias.

    ResponderEliminar
  41. Otra vez se me olvidó dar al botoncito... ¿No hay manera de aligerar el peso de los vídeos?

    ResponderEliminar
  42. Esto no lo entiendo:

    "No olvidéis cambiar los dos datos marcados en verde por los vuestros propios. Son en el botón de Twitter el usuario y en el de Linkedin, el de la fuente o source."

    Lo hice tal como Dios me dió a entender... ¿Y ahora cómo se yo si ha salido bien? Por que los botones con ayuda de otro tutorial si han salido de momento... Por favor y Gracias

    ResponderEliminar
  43. Bueno... he dado mas vueltas que un tío vivo pero al final he puesto los botoncitos. Eso si sigo sin saber que es la source de linkedin. Y creo que encima para usarlo tengo que actualizar el navegador de la biblioteca. Vaya con la informática... Espero no volverte muy loco, de todas formas no me vas a ganar... Por favor y Gracias.

    ResponderEliminar
  44. Si tienes algo de cómo exactamente publicar en las redes sociales y además escribir negrita, subrrayado y bla bla bla me lo dices. Por favor y Gracias.

    ResponderEliminar
  45. ¿Tienes para Instamgram? Por favor y Gracias.

    ResponderEliminar
  46. Para averiguar mi sourcee de Linkendin me exige actualizar el navegador y eso creo que no se puede hacer en la biblioteca. Por favor y Gracias.

    ResponderEliminar
  47. Yujuuuu!!!! Dios me ha venido a ver. Por fin tengo todos los botoncitos insertados en el blog definitivo. Hoy es día de fiestaaaaa!!!!

    MUCHAS GRACIAS

    Solo falta hacerme a manubrio un botón de Instagram y ponerlo al lado. Junto a todos los demás que añadiré con el tiempo...

    MUACK!!!

    ResponderEliminar
    Respuestas
    1. ¿Entonces qué? ¿Sólo te falta lo de Instagram? Si es así ya terminaste porque, que yo sepa, no hay botones para poder compartir contenidos en Instagram.

      Tú sola te despachaste con el problema :)

      Eliminar
  48. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola Andys. El segundo código es sólo CSS, es decir, estilo o lo que le da el aspecto "bonito" a los botones-enlaces. Tienes varios sitios dónde añadirlo y para que resuelvas para siempre este tipo de dudas, por favor lee este otro tutorial.

      Sobre la "lista de direcciones directas para compartir", no te preocupes porque ya las incluí en el código. Esa explicación era para que se entendiera lo que estáis haciendo y no se trate sólo de copiar y pegar.

      Y sobre lo de Twitter te tengo que mandar a otro artículo... este.

      Eliminar
  49. De todos los post que he visto el único que me ha funcionado ha sido el suyo. Y además tuve un accidente y los volví a poner sin problemas. Muchísimas Gracias.

    ResponderEliminar