Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado.

Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.

¿Qué son los botones para las redes sociales en un Blog?: 

• Los componentes oficiales o no oficiales de las distintas marcas de redes sociales que permiten difundir nuestros contenidos por las mismas gracias a la interacción con ellos de nuestros usuarios.

• Los botones de distintas 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 nuestros usuarios puedan compartir el contenido de la entrada que visualizan o incluso para que nuevos visitantes se hagan seguidores nuestros.

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

¿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. La descarga de dichos componentes en los navegadores de nuestros usuarios y la toma de datos por parte de sus marcas redunda en una relativa "carga" para el dibujado de nuestra web.

• Mientras descargamos los contenidos de nuestro Blog, los scripts para botones de redes sociales "postergan" de una manera u otra el avance en el dibujado de la página. Esto es 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.

¿Cómo conseguir un buen rendimiento al utilizar botones para 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.

¿Cómo y dónde se crean los botones para redes sociales de Facebook, Twitter y Google+?

Si eres de los que les gusta hacerse él mismo las cosas y ver de dónde provienen, te dejo las principales guías de Diarios de la nube para crearte y ponerte los botones para las principales redes sociales del mundo.

• Conecta tu Blog con Google+
• Integra Twitter con tu Blog
• Conecta tu Blog con Facebook
• Conecta tu Blog con Pinterest
• Conecta tu Blog con Linkedin
• La guía para añadirte botones para redes sociales a tu Blog

¿Qué aspecto tendrá la botonera?

Será una botonera sencilla y funcional donde tendrás todo lo que necesitas para que tus usuarios puedan seguirte o compartir tu contenido en Facebook, Twitter y Google+.

Introduce los botones para redes sociales en tu Blog

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

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

3) Como vamos a poner el botón de redes sociales de facebook, entre otros, será necesario que justo después del <body> añadas este código (para encontrar el comienzo del body pulsa CONTROL + F dentro del recuadro de código y busca: body. Asegúrate que no tenga / delante de body).

 <div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&amp;version=v2.0";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

4) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='shareButtons' var='post'>

Si encuentras shareButtons dos veces, es porque una de ellas pertenece al móvil. Haz los cambios sobre la zona donde encuentres <b:includable id='shareButtons' var='post'> por segunda vez.

En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.

Cambia el código que se encuentra bajo el <b:includable id='shareButtons' var='post'> por este otro. Así sustituirás uno por otro:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellspacing='0' width='100%'>
<tr>

<td align='left'>
<div class='fb-like' data-href='http://DIRECCIÓN_DE_TU_BLOG/' data-layout='button_count' data-show-faces='false' data-width='450'/>
<div class='fb-send' data-href='http://DIRECCIÓN_DE_TU_BLOG'/>
</td>

<td>
<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'es'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>

<td align='left'>

<a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://DIRECCIÓN_TWITTER'>Seguir a @NOMBRE_EN_TWITTER</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>

<td align='left'>
<a class='twitter-share-button' data-lang='es' data-via='NOMBRE_EN_TWITTER' 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>
</td>

</tr>
</table>
</b:if>    
</b:includable>

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. Simplemente rellena los textos en azul con los datos de tus redes sociales y ¡ya lo tienes!.

¿Problemas, alguna duda?

Te añado un enlace para que te descargues un ejemplo de plantilla simple con todo el código que va bajo los <b:includable id='shareButtons' var='post'> preparado y funcionando para que te pueda servir de referencia. Pulsa "Save to Drive" y se almacenará automáticamente en tu propio Google Drive para que lo descargues donde necesites (en tu casa, en tu móvil, etc...).

Verás que el código va marcado con el texto <!--AQUÍ EL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> hasta <!--FIN DEL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> como puedes ver en la pantalla inferior.