Cómo crear una barra social flotante con HTML y CSS3

Hace unos meses hemos rediseñado nuestra web y uno de los temas que siempre nos traían de cabeza eran los botones de redes sociales para compartir el contenido. El debate siempre giraba en torno a dos cuestiones, por un lado la ubicación de la barra social (vertical u horizontal, flotante o estática) y por otro lado las redes sociales que incluiríamos dentro de esa barra social (twitter, facebook, pinterest…).

En cuanto a su ubicación de los iconos sociales, teníamos claro que debía pasar lo más desapercibido posible, pues lo importante es que el usuario lea el contenido y si le gusta y lo ve útil, entonces pueda compartirlo. Por ello veíamos interesante la ubicación de los botones de las redes al final del artículo, para que una vez leído el usuario pueda compartirlo. Recuerda, primero la experiencia de usuario.

Pero darle la oportunidad de usar los botones para compartirlo en cualquier momento nos parecía también una buena opción. Para ello debíamos diseñar una botonera social flotante que se mostrara fija en la parte vertical de la pantalla cuando estuviéramos en escritorio, y horizontal en la parte inferior en móvil y tablets. Hicimos varios diseños y pruebas con HTML y CSS, y aquí compartimos una de las opciones que más nos gustó.

Barra de redes sociales fija con HTML y CSS3

Para este diseño orientado a móviles y tablets optamos por una barra horizontal que se mantuviera fija en la parte interior de la pantalla, ocupando el 100% de ancho. Las redes sociales seleccionadas son Facebook, Twitter, Pinterest y Whatsapp, que son las cuatro que mejor resultados nos dan para nuestro contenido. También hemos añadido dos bloques más, uno que nos lleva al formulario de suscripción de newsletter y otro para poder pasar al siguiente artículo.

EL HTML se compone de un contenedor aside con una lista ul, donde cada uno de los iconos sociales será un elemento de la lista.

<aside class="social-sharing">
	<ul class="menu-social">
		<li class="social-item"><a href="http://twitter.com/intent/tweet?text=SiloCreativo&url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Twitter</span></a></li>
		<li class="social-item"><a href="http://www.facebook.com/sharer.php?u=https://www.silocreativo.com/en/&t=SiloCreativo" target="_blank"><span class="screen-reader-text">Facebook</span></a></li>
		<li class="social-item"><a href="https://www.pinterest.com/pin/find/?url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Pinterest</span></a></li>
		<li class="social-item"><a href="whatsapp://send?text=https://www.silocreativo.com/en/" data-action="share/whatsapp/share"><span class="screen-reader-text">Whatsapp</span></a></li>
		<li class="social-item newsletter"><span>Newsletter</span></li>     
		<li class="social-item next"><a href="#">Next</a></li>
	</ul>
</aside><!-- .social-sharing -->

El contenedor aside con la clase .social-sharing será la propia barra social e irá posicionado como fixed (aunque en el ejemplo lo veas como absolute, ya que solo está así para posicionarlo en la ventana de ejemplo creada a tal efecto).

.social-sharing {
	display: block;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
}

Para organizar los iconos sociales hemos optado por flexbox, otorgando un ancho fijo a los iconos de las cuatro redes sociales (40px) y repartiendo el espacio restante entre el bloque de newsletter y el link para ir al siguiente artículo.

.social-sharing ul.menu-social {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrapwrap;
	flex-wrap: nowrap;
}

.social-sharing ul.menu-social li {
	flex: 0 1 40px;
	height: 40px;
}
.social-sharing ul.menu-social li.newsletter {
	flex: 1 1 auto;
	line-height: 40px;
	position: relative;
	background-color: #fafafa;
	background-image: repeating-linear-gradient(135deg, #ffe4e1 0px, #ffe4e1 5px, transparent 5px, transparent 10px, #e1f3ff 10px, #e1f3ff 15px, transparent 15px, transparent 20px);
}
.social-sharing ul.menu-social li.next {
	flex: 1 1 auto;
}

En cuanto a los iconos sociales, hemos seguido los pasos y principios explicados aquí. Usar la misma fuente de iconos (FontAwesome en este caso) que ya usas en tu web en los iconos del menu hamburguesa o buscar para los iconos de twitter, facebook y demás redes es un punto positivo, pues no añadimos ni imágenes y ni carga adicional a nuestra web. El uso de pseudoelementos CSS nos permite generar estos iconos sociales sin imágenes y que se vean correctamente en pantallas retina.

ul.menu-social li a::before {
	content: "\f135";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 40px;
}
ul.menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}
ul.menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
ul.menu-social li a[href*="pinterest.com"]::before {
	content: "\f231";
}
ul.menu-social li a[href*="whatsapp://send"]::before {
	content: "\f232";
}

Este CSS se aplica de forma global a toda la web, pero si lo queréis limitar para que solo se muestre en móvil y tablets, entonces debéis usar una mediaquery y contener todas las reglas CSS dentro de ella.

Plugins de barra social flotante y otras opciones

Quizás te resulte extraño que tratándose de un proyecto realizado en WordPress se opte por diseñar la barra social con HTML y CSS y no usando un plugin de los muchos que hay para crear una botonera. Lo cierto es que en la versión 2.0 de SiloCreativo usamos el plugin Jetpack con su módulo sharing, pero tomamos la decisión de dejar de usarlo.

EL motivo es muy sencillo. La mayoría de plugins usan sus propias librerías de iconos, nuevos estilos y algún que otro archivo JS. Esto es aumentar la carga de la web para al final tener que modificar estilos para datarlos a nuestro diseño. Lo único que perdíamos era poder contabilizar el número de veces que se había compartido en redes, pero sinceramente, no nos parece razón con peso suficiente para cargar 3 o 4 archivos extras, además de las llamadas correspondientes para contabilizar el número de compartidos.

Así que optamos por algo más ligero (solo HTML y CSS) y personalizable, donde añadir como has visto una suscripción a la newsletter además de navegar al siguiente artículo. ¿Qué te parece esta decisión? ¿Cómo tienes implementados los iconos sociales en tu web?