Botones de compartir en redes sociales sin scripts ¿Qué clase de brujería es esta?

A la hora de optimizar el consumo de recursos y reducir los tiempos de carga de una web, y en concreto un sitio WordPress, siempre hay que utilizar aquellos que sean más óptimos.

JavaScript: ¿el problema?

Actualmente se está consolidando un exceso de uso de JavaScript para casi todo, y sí, ofrece funcionalidades avanzadas y dinámicas muy útiles y chulas, pero es un recurso que consume bastantes recursos, y ralentiza la carga de la web, al menos más que recursos estáticos como HTML y CSS.

Uno de los elementos más comunes que encuentras en toda web son los botones de compartir en redes sociales, normalmente generados por plugins WordPress, y estos botones utilizan JavaScript para mostrar dinámicamente los botones y contadores de cada red social, lo que supone un montón de:

• Código JavaScript adicional en TODOS tus contenidos.
• Scripts distintos por cada red social.
• Scripts que no se pueden normalmente servir cacheados.
• Llamadas y peticiones externas a la API de cada red social mediante los scripts para mostrar los contadores, etc.
• Consumo de recursos del servidor.

Todo esto supone un montón de tiempos de espera en la carga de cada entrada o página, además de un gran consumo de recursos del servidor, y de batería en los navegadores móviles.

¿Tiene alguna ventaja usar JavaScript?

Claro, que se visualicen los contadores sociales, algo que si tienes una cantidad muy alta anima a que más gente los comparta a su vez. Somos animales sociales.

HTML y CSS: la solución

Pues sí, sería mucho más óptimo utilizar solamente HTML y CSS para mostrar estos botones de compartir, sin scripts, por varios motivos:

• Muchas menos líneas de código generado.
• El código HTML y CSS se puede cachear, en tu servidor o tu CDN.
• Sin llamadas ni peticiones externas.
• Menor consumo de recursos del servidor al no tener que cargar el motor de JavaScript.
• Visualización más rápida en el navegador, pues nativamente renderiza HTML y CSS.

¿Tiene contraindicaciones usar solo HTML y CSS?

Pues sí, solo una, que no se mostrarán los contadores de las veces que se han compartido tus entradas, etc. Si esto es importante para ti, pasa a otro artículo, los hay y muy interesantes, puedes optimizar tu web con otras estrategias y tácticas WPO.

¡Convencido! ¿Y esto cómo lo hago?

Hay dos maneras principales de abordar esta técnica, tú eliges…

Añadir botones de compartir en redes sociales con código

Ya hace tiempo que está publicado en Ayuda WordPress este artículo, en el que se explica paso a paso como añadir botones de compartir en redes sociales manualmente, añadiendo tú el código necesario en cada archivo de la plantilla del tema WordPress que esté activo.

Básicamente, pasa por añadir en un archivo PHP enlaces en HTML como este por cada red en la que quieras ofrecer que se compartan tus contenidos:

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" class="facebook" target="_blank">
    Facebook
</a>

Luego le añades algo de CSS a tu gusto y decides dónde incluir el código creado.

Si te animas aquí te dejo el enlace de nuevo, el artículo está muy detallado, con ejemplos para las principales redes sociales, y fácil de seguir paso a paso:

• Añadir enlaces para compartir en redes sociales sin plugins

Añadir botones de compartir en redes sociales con un plugin

Ahora bien ¿se te hace bola aún lo de escribir código? Sin problema, hay un plugin que te va a enamorar.

Se llama Scriptless Social Sharing, creado por la gran Robin Cornett, y es lo mejorcito que hay para mostrar botones de compartir sin scripts, solo con HTML y CSS.

Una vez lo tengas instalado y activo pásate por su página de configuración, en «Ajustes > Scriptless Social Sharing». Ahí puedes personalizar cada aspecto del plugin y su visualización.

Podría entrar en detalle de cada ajuste pero el plugin viene configurado casi perfecto nada más instalarlo. Solo te doy algunos apuntes que considero importante destacar:

• No cambies de SVG a fuente web o iconos personalizados si no es imprescindible, la fuente web es un recurso externo, y tendrás que activar Font Awesome; y tus iconos personalizados, salvo que también sean SVG, pesarán normalmente más que los SVG incluidos en el plugin.
• En los ajustes de CSS deja «Flexbox» no cambies a tabla, ni por probar. Además de verse peor los botones de compartir no se adaptarán tan bien a los distintos dispositivos las tablas como sí lo hace flexbox.
• Se ven y adaptan siempre mejor los botones sociales en ancho completo.
• Cambia el relleno de los botones (espacio adicional aplicado mediante CSS) de 12 (por defecto) a un valor mucho menor, sino los botones serán demasiado grandotes … salvo que los quieras muy grandes claro. Enreda un poco con esto.
• Acuérdate de añadir los botones de las redes sociales favoritas de tus lectores. Justo debajo puedes recolocar los botones.
• Recuerda añadir ubicaciones de los botones a todos los tipos de contenido que utilices y que quieras que se puedan compartir. Puedes mostrarlos antes y después del contenido de la entrada, página, lo que sea. El plugin te mostrará todos los tipos de contenido registrados en tu sitio.
• Si eliges la ubicación manual tendrás que añadir el filtro que ofrece el plugin para que se muestren en los distintos archivos del tema donde quieras que se vean:

  if ( function_exists( 'scriptlesssocialsharing_do_buttons' ) ) {
  	echo scriptlesssocialsharing_do_buttons();
  }

• Si prefieres añadirlos manualmente en tus contenidos tendrás que usar el shortcode:
  Compartir en Twitter Compartir en Facebook Compartir en Pocket Compartir en LinkedIn Compartir en WhatsApp Compartir en Telegram
  .
• No te olvides de poner tu perfil de Twitter que quieras que aparezca en los tuits (sin la @). Tienes un ajuste para eso.
• Si usas el editor de bloques el plugin añade un bloque que te permite añadir botones sociales donde quieras dentro de tu contenido, además de con el shortcode.

Además de todos estos ajustes en la página del plugin también verás que en el editor hay una nueva caja meta.

Desde ella puedes hacer 2 cosas:

• Marcar si no quieres que en esa entrada/página concreta se muestren los botones sociales de compartir.
• Subir una imagen personalizada para Pinterest.

Esto de la imagen de Pinterest es por cosas de esta red social, que si el contenido no tiene ninguna imagen no funciona.

Para solucionarlo, el plugin ofrece 4 estrategias:

1. Si has configurado una imagen personalizada para Pinterest es la que usará como primera opción.
2. Si no la has establecido, y  la entrada tiene imagen destacada, usa esta.
3. Si no tienes nada de lo anterior coge la primera imagen que encuentre en el contenido.
4. Y si no tienes nada de nada simplemente no muestra el botón de compartir en Pinterest en esa entrada concreta.

Esto, que te parecerá una demasía si Pinterest no es lo tuyo, es vital para webs muy visuales, para las que una buena presencia y SEO en Pinterest es vital.

Dicho esto, si no sabes por dónde empezar, o te agobian tantas configuraciones, aquí te dejo capturas de cómo lo tengo yo, para que tengas un buen punto de partida:

Verás que yo no he puesto ningún texto antes de los botones para animar a compartir, eso ya lo decides tú si lo quieres poner o no.

Igualmente, revisa los apuntes que te he dejado arriba sobre posibles ajustes que  podrías querer cambiar.

Muy majo pero ¿funciona?

Pues claro, solo tienes que mirar la consola del navegador o el código fuente generado de tus entradas y páginas para comprobar que hay al menos un script menos que ya no se carga.

Pero sobre todo, que el código que genera el plugin es mero HTML y CSS, que se puede cachear, servir desde una CDN, como tengas definidas tus estrategias de optimización web.

No solo tus contenidos se cargarán más rápido, también liberarás consumo de recursos del servidor.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!