2 jun. 2013

Inserta botones sociales en el pié de tus entradas sin penalizar el rendimiento de tu Blog

Ya no basta sólo con escribir buenos contenidos, ahora se hace necesario saber difundirlos. Los Bloggers mantienen una estrecha relación con las redes sociales como medio para conseguir llegar a más personas.

No es suficiente con los buscadores, las suscripciones o el boca a boca que hace años mantenía vivas nuestras publicaciones. Hoy día, Google+, Twitter o Facebook son verdaderos referentes para poder llegar hasta los millones de usuarios potenciales que navegan día a día por Internet.

El problema está en cómo propagar nuestros contenidos: aquí ya hemos visto cómo enviar nuestras entradas automáticamente a Facebook, enviarlas a Twitter, utilizamos a diario Google+ como red fundamental para compartir las entradas de nuestro Blog, hemos aprendido a integrar Twitter dentro de nuestra web e incluso hemos añadido iconos de acceso para redes sociales en la cabecera del título para nuestro Blog.

Todo lo que vamos añadiendo a nuestro Blog en Diarios de la nube va orientado a obtener el mejor rendimiento posible de cara la navegación de nuestros usuarios. Busco conseguir no sólo un objetivo meramente visual o comunicativo, además trato de que la experiencia de navegación de los usuarios de tu Blog no se vea mermada por un ineficiente uso de "scripts" o "añadidos" que lastren su velocidad.

Para culminar los esfuerzos por integrar nuestros Blogs completamente en las redes sociales, me propongo ayudarte a crear un conjunto de botones "sígueme" o "me gusta" que tanto se utilizan en todos los Blogs del mundo pero con una peculiaridad que los hace "especiales": no van a restarle un ápice de velocidad al "dibujado" de tu página principal en el navegador de tus usuarios.

Así pues, realizaremos varias actividades en una, veremos cómo introducir unos botones "me gusta" y "enviar" de Facebook, otros de "sígueme" y "Twitear" de Twitter, para conseguir que nuestros usuarios puedan "difundir" u "opinar" sobre nuestros contenidos en las redes sociales. Así mismo, haremos que todos estos "scripts" o "añadidos" para "meter" esos botones en nuestro Blog, no ralenticen la carga para que de paso sean lo más eficientes posible.




Algunos conceptos iniciales, ¿Qué son los botones para las redes sociales?, ¿qué hacen?, ¿cómo funcionan?:



  • Los botones de las redes sociales exigen la utilización de unos "scripts" que permiten introducir en nuestro Blog los "mecanismos necesarios", a través de código fuente para:

- Que los usuarios puedan puntuar nuestros contenidos o sumarse a ellos.
- Que los usuarios puedan suscribirse a nuestros contenidos, hacerse seguidores nuestros.
- Que los usuarios puedan "difundir" por su red social preferida nuestra entradas para que puedan leerlas otros usuarios.

  • Estas posibilidades son revolucionarias, pues permiten a nuestros clientes interactuar, propagar, difundir nuestras creaciones más allá del círculo social en el que nosotros nos movamos para pasar a incluirlo dentro de otros que nos son ajenos.


  • Por supuesto, la adición de estos añadidos obliga o, más bien, hace imprescindible estar dado de alta en todas las redes sociales cuyos botones decidamos poner en nuestro Blog.


¿Qué inconvenientes pueden tener a nivel de rendimiento el uso de scripts?



  • El inconveniente que tiene añadir "scripts" es que requieren "incrustar" código fuente, que normalmente se conecta a servidores externos a nuestro Blog, que deben realizar operaciones de cálculo o descarga de componentes en los navegadores de nuestros usuarios, redundando en una relativa "carga" para el dibujado de nuestra web.



  • Es fácilmente mesurable, como vimos en el artículo para optimizar el rendimiento de nuestro sitio web, que con Page Speed u otros "Benchmarks" existentes en el mercado se descubre cómo estos scripts "paran" en cierta medida la finalización del dibujado de nuestro sitio. Mientras descargamos los contenidos de nuestro Blog, los scripts "postergan" de una manera u otra el avance debido a que deben conectarse al servidor del cual han sido extraídos para dibujar sus botones y realizar las operaciones para las cuales fueron creados.


Entonces, ¿quitamos todos los scripts de nuestro Blog?, ¿quitamos los de redes sociales?



  • Los navegadores modernos se encargan de realizar cálculos y "balanceos" de carga que permiten "dibujar" lo fundamental de la página en primer lugar para después centrarse en aquello que pueda ir más despacio.



  • La carga asíncrona de scripts es algo con lo que también, poco a poco, los propios scripts descargados de las redes sociales trabajan. Cuando el navegador lee una página HTML descargada de un servidor, va leyendo línea a línea, cuando llega a un script si "espera" a que termine por completo, hace que la web entera  no se dibuje completamente hasta que dicho script finalice. La carga "asíncrona" impide que el navegador espere a que el "script" termine para completar el dibujado de la página.



  • Podemos utilizar "scripts" pero siempre controlando que no nos estamos "cargando" la experiencia de usuario con una velocidad inferior a la esperada, que no estamos incurriendo en un uso indiscriminado "de cosas" que añadimos a nuestro Blog para añadir una funcionalidad determinada que ni siquiera utilizan nuestros usuarios.





¿Qué vamos a hacer?, postergando la carga de los scripts dentro de las entradas



  • Vamos a configurar los botones para las redes sociales de Tweeter y Facebook como ejemplo, se podrán configurar todos los que se deseen.



  • Vamos a hacer que se dibujen sólo en el interior de las entradas, es decir, cuando el usuario accede al contenido de la entrada al pulsar "más información" desde la página principal de nuestro Blog. De esta manera impedimos que la página principal tenga que mostrar los botones sociales, precargando los scripts sin tener que dar resultados "visibles" que ataquen directamente al rendimiento de nuestro Blog.


Paso a paso:


Configura tus botones para Twitter:


1) Nos conectamos a https://twitter.com/about/resources/buttons para extraer el código fuente de los botones para esta red social que vamos a introducir en nuestro Blog.

En la página de selección de botones de Twitter elegimos los que nos interesen.
2) Selecciona por ejemplo "Compartir Enlace" que nos proporcionará el código fuente de Twitter para introducir el botón "Twitear" en nuestro Blog:

Seleccionamos el botón que deseemos añadir a nuestro Blog. Observar el recuadro azul donde se encuentra el código que debemos llevarnos a nuestro Blog.

3) Copiamos el código que se encuentra bajo la sección derecha "Previsualización y código":

Procura ir pegando el texto en un editor a parte para luego recuperar todos los botones con los que vamos a trabajar.

4) Realiza los mismos pasos del 1 al 3 pero esta vez selecciona el botón "Seguir" para poder añadir el botón que permitirá a tus usuarios seguirte en Twitter.

Configura tus botones para Facebook:

5) En la página de Facebook https://developers.facebook.com/docs/reference/plugins/like/ dispondrás de los botones que requieres para añadirlo a tu Blog.
Selección de botones de Facebook para incluir en tu navegador
6) Introduce la URL de tu Blog en "URL to like" y selecciona "Layout Style" "button_count" para que podamos tener espacio en el Blog y no ocupemos todo el espacio disponible en la botonera inferior con sólo  los botones de Facebook.



7) Pulsa el botón "Get Code" y cópiate el código en el editor donde incorporaste los de Twitter.

Introduce los cambios en tu Blog

8) Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.

9) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.

Al editar el HTML de tu plantilla aparecerá todo el código de la misma.
10) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='shareButtons' var='post'>

En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas.

11) Al final del último botón que Blogger utiliza para colocar tus botones de compartir añade el código marcado en rojo:

 <b:includable id='shareButtons' var='post'>
                                <b:if cond='data:top.showEmailButton'>
                                  <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
                                    <span class='share-button-link-text'>
                                      <data:top.emailThisMsg/>
                                    </span>
                                  </a>
                                </b:if>
                                <b:if cond='data:top.showBlogThisButton'>
                                  <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
                                    <span class='share-button-link-text'>
                                      <data:top.blogThisMsg/>
                                    </span>
                                  </a>
                                </b:if>
                                <b:if cond='data:top.showTwitterButton'>
                                  <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
                                    <span class='share-button-link-text'>
                                      <data:top.shareToTwitterMsg/>
                                    </span>
                                  </a>
                                </b:if>
                                <b:if cond='data:top.showFacebookButton'>
                                  <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
                                    <span class='share-button-link-text'>
                                      <data:top.shareToFacebookMsg/>
                                    </span>
                                  </a>
                                </b:if>
                                <b:if cond='data:top.showOrkutButton'>
                                  <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
                                    <span class='share-button-link-text'>
                                      <data:top.shareToOrkutMsg/>
                                    </span>
                                  </a>
                                </b:if>
                                <b:if cond='data:top.showDummy'>
                                  <div class='goog-inline-block dummy-container'>
                                    <data:post.dummyTag/>
                                  </div>
                                </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellspacing='0' width='100%'>
<tr>
<td align='left' halign='bottom' height='70' valign='bottom' width='100%'>
<div class='fb-like' data-href='http://diariosdelanube.blogspot.com.es/' data-layout='button_count' data-show-faces='false' data-width='450'/>
<div class='fb-send' data-href='http://diariosdelanube.blogspot.com.es/'/>
<a class='twitter-share-button' data-lang='es' data-via='Diariosdelanube' href='https://twitter.com/share'>Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
<a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://twitter.com/Diariosdelanube'>Seguir a @Diariosdelanube</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>
</tr>
                                  </table></b:if>                           
                              </b:includable>

12) El código en rojo lleva todos mis botones metidos en una tabla. el código <b:if cond='data:blog.pageType == &quot;item&quot;'> que al final de todo el añadido con mi tabla se cierra con un </b:if>  es el encargado de conseguir que SÓLO se dibujen los botones de las redes sociales cuando el usuario acceda a leer la entrada. Es decir, impedirás que se dibujen en la página principal haciendo que sólo se vean cuando tus visitantes hagan "clic" en más información.

Explicación detallada del código:



  • <b:if cond='data:blog.pageType == &quot;item&quot;'>: Hace condicional el dibujado de los botones, a que sólo se realice cuando el usuario haga "clic" en "más información" para ver el detalle de tu entrada. De esta manera no penalizarás la carga de la página principal.



  • <table cellspacing='0' width='100%'>: Se crea una tabla donde habrá un sólo registro en el que se meterán todos los botones sociales.


  • <tr>:  Indica que se abre un registro de la tabla. El único que vamos a utilizar.



  • <td align='left' halign='bottom' height='70' valign='bottom' width='100%'>: Establece el tamaño que ocupará dentro del registro de la tabla cada dato que vamos a insertar.


  • <div class='fb-like' data-href='http://diariosdelanube.blogspot.com.es/' data-layout='button_count' data-show-faces='false' data-width='450'/>: Código fuente extraído de la web de facebook buttons para añadir "me gusta". NOTA IMPORTANTE: es necesario para que funcione el código que después de "<body>" introduzcas el Javascript que se te indica en la web de Facebook, de lo contrario los botones no se pintarán ni funcionarán.Aquí pondrás tu equivalente sacado de Facebook buttons.


  • <div class='fb-send' data-href='http://diariosdelanube.blogspot.com.es/'/>: Código fuente extraído de la web de facebook buttons para añadir "enviar". NOTA IMPORTANTE: es necesario para que funcione el código que después de "<body>" introduzcas el Javascript que se te indica en la web de Facebook, de lo contrario los botones no se pintarán ni funcionarán. Aquí pondrás tu equivalente sacado de Facebook buttons.



  • <a class='twitter-share-button' data-lang='es' data-via='Diariosdelanube' href='https://twitter.com/share'>Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>: Código fuente extraído de la web de Twitter buttons para añadir "Twittear" con script asíncrono. NOTA: Aquí deberás poner el código que Twitter te proporcionó en la web de Twitter buttons.



  • <a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://twitter.com/Diariosdelanube'>Seguir a @Diariosdelanube</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>: Código fuente extraído de la web de Twitter buttons para añadir "Sígueme" con script asíncrono.NOTA: Aquí deberás poner el código que Twitter te proporcionó en la web de Twitter buttons.



  • Aquí podrás añadir los botones de otras redes sociales que prefieras. No te recomiendo añadir el +1 de G+ si ya lo tienes en la parte superior.



  • </td>: Se cierra el dato de la tabla.
  • </tr>: Se cierra el registro de la tabla.
  •  </table></b:if>: Se cierra el condicional de que se dibujen o no los botones.    


¡Eso es todo!, disfruta de unos botones para redes sociales con el mejor rendimiento para la página principal de tu Blog.    

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

16comentarios:

  1. Exelente trabajo un saludo ! pasate por mi blog ! http://somoscreceblog.blogspot.mx/

    ResponderEliminar
  2. Excelente articulo, aunque creo que hay formas un poco mas versátiles y rápidas para colocar los botones, saludos, y pasate por mi blog, http://angelratzielx.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Está curioso tu Blog!, además tiene un rendimiento excelente. Hay formas más fáciles, esto es sólo para intentar ayudar a la gente a hacer más rápida la carga de su página principal, normalmente están saturadas de scripts.

      Saludos amigo!

      Eliminar
  3. Enhorabuena por el premio!! Me gusta tu blog,y sino te importa, te pediré algún consejo para mi blog, es muy sencillo pero me gustaria mejorarlo y ponerle algunas cositas más. Felicidades.

    ResponderEliminar
  4. Por supuesto Mayte cuenta conmigo. Aquí tengo muchas guías con las que poder ayudar, tu pregunta sin temor, yo busco las respuestas. Aquí estoy para lo que necesites. Un saludo!

    ResponderEliminar
  5. Hola está muy currada esta entrada. ¿Hay alguna forma de que los botones sociales incrustados debajo de cada entrada puedan hacer asíncronos? He intentado modificar la plantilla, buscar el código que usted nombra en la plantilla con todo desplegado y no lo encuentro.
    Gracias de antemano.
    Saludos.

    ResponderEliminar
  6. Hola Toni!,
    El javascript asíncrono con los botones oficiales no se gestiona adecuadamente. Yo he hecho pruebas de toda clase y a pesar de que las marcas afirman que el javascript con el que componen sus botones es asíncrono, lo cierto es que luego pagespeed y otros controladores de rendimiento no lis reconocen como tal.

    Busca esta guía en mi Blog o con Google (perdona que estoy con móvil y no te puedo copiar y pegar el enlace):

    "La guía para añadir botones sociales a tu Blog - Preparada para usuarios noveles, usuarios intermedios y usuarios avanzados"

    A mi con esos botones es con los que mejor me ha resuelto el problema del anacronismo.

    Prueba y me dices si necesitas algo, Haz esa guía y seguro que te sorprenden. Un saludo!.

    ResponderEliminar
  7. Hola Miguel te respondí por el foro de google también. Como bien dices es el pagespeed el que detecta ese fallo. Yo estoy por no fiarme ya de esos informes hasta que esté el cuadro de evaluación más depurado. Por ejemplo me da el error de que no tengo el botón +1 lo pongo y al día siguiente salen los 5 puntos y a los dos días vuelve a darme el error y sale 1 punto nada más.

    Probé lo del Addthis después del footer y no salían. Lo dejaré así. Supongo que ya lo arreglarán o dejará de salir el error en el cuadro de evaluación.
    Gracias por todo.

    ResponderEliminar
  8. Lo que me vino a mi bien fue:

    Sólo utilizar el plusone de blogger por defecto, el que blogger maneja en el footer.

    Luego añadir botones con if cond como pongo en la guía, te va a ayudar a mejorar la puntuación. Ten en cuenta que pagespeed hay cambios que no pilla al momento, sino pasados unos minutos.

    Prueba los AddThis que van muy bien. Si no te salieron después del sharebuttons, fíjate que lo pongas después de cerrar bien las etiquetas Div de los sharebuttons.

    Si haces el if cond, no tendrás problemas, yo me he "pegado" muchísimo con esto y al final conseguí la mejor puntuación tal y cono te he contado.

    Hay muchos tutoriales y guías aquí que quizás te sirvan, además puedes contar conmigo para cualquier duda.

    Un placer. Saludos!.

    ResponderEliminar
  9. A la hora de editar la plantilla uso el buscador y no me aparece este codigo en la plantilla

    tengo marcada la casilla mostras botones para compartir
    gracias.

    ResponderEliminar
  10. Hola, mándame el código de tu plantilla a miguelcolomer@gmail.com y te lo trato de localizar. Si has activado los Sharebuttons, debería estar el código (salvo que exista algún problema en la plantilla). Mándamelo y tratamos de resolverlo.

    Un saludo!

    ResponderEliminar
  11. saludos, me gustaría colocar los botones aso como los tienes acá a la izquierda, Facebook, tweet, etc, lo que me interesa mas que todo es que la gente que de click al botón de Facebook y se comparta mi entrada en sus perfiles de fb pero no lo logro. dejo mi blog, saludos!! http://www.rayscr.com

    ResponderEliminar
    Respuestas
    1. Hoal Ronny,
      para hacerlo usa esta guía: http://www.diariosdelanube.com/2013/09/introduce-una-barra-lateral-deslizante.html te vendrá genial para lo que necesitas.

      Así mismo, esta también puede ayudarte y es muy sencilla: http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html

      Un saludo!!!, cualquier duda por aquí estoy.

      Eliminar
  12. Hola tengo una pregunta quizá un poco rara:

    lo que sucede es que quiero poner el boton de twitter en las entradas y en pagina de inicio ( y pues solo quitas el y listo) pero tengo un problema, el actual tema de blogger ya me proporciona el boton "like" y se muestra en inicio con los like de los post, pero al poner el de twitter se muestra en inicio pero con los like de la pagina de inicio

    ejemplo:

    entrada X
    Imagen destacada
    like en facebook: 2 twittear: 492

    y pues quisiera que mostrara los tweets unicamente del post, no de la página home, y no sé que propiedad establecerle para que me indique el contador los tweets del puro post.

    ¿me podrías ayudar?

    saludos y muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, prueba con esto: http://www.diariosdelanube.com/2013/10/integra-twitter-con-tu-blog-seleccion.html

      Un saludo y gracias a ti. Cualquier duda me dices.

      Eliminar
    2. Hola!,
      prueba con esto: http://www.diariosdelanube.com/2013/10/integra-twitter-con-tu-blog-seleccion.html

      Cualquier duda me dices.

      Miguel.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.