Como ya he dejado caer más de una vez, suelo hacer trabajillos de optimización para blogs que corren bajo WordPress. Todo lo que voy aplicando suelo probarlo y medirlo antes aquí y al final acabo convirtiendo las notas en un post a modo de recordatorio y por si le sirve a alguien. Esta es una de ellas.
Una de las movidas que en ocasiones lastra mucho la carga son los dichosos botones cojoneros de compartir en las redes sociales porque, o bien vienen con artificios visuales pesados, contadores y rollos desplegables, o cargan peticiones incluso donde no se están usando o todo a la vez.
Scriptless Social Sharing es un plugin ligero y gratuito para añadir los típicos botones a tus posts y/o páginas desarrollado por Robin Cornett que prescinde de todo eso.
Es tan ligero que solo añade enlaces para compartir utilizando el método más básico que permite cada red. No hay javascript, ni ninguna animación, contador ni floritura. Simplemente construye un conjunto de enlaces con su poquito de CSS. El resultado es que reduce las peticiones a cero, ninguna.
Tiene una página de configuración, también muy simple, para que puedas ajustar qué tipos de contenido deben tener botones para compartir, qué botones deben añadirse, y si se deben usar o no los estilos del plugin. Más allá de eso, también se puede usar un filtro para añadir cualquier otra red alojando su correspondiente icono en .SVG.
Todo lo que hace el plugin puede hacerse a mano registrando los iconos, pero ya que no añade ninguna petición, su peso es mínimo y su código límpio, es una de las mejores opciones para ahorrarse un poco de trabajo.
Su autora declara compatibilidad completa con WordPress 5.8 y aunque aún no anuncia compatibilidad con WordPress 5.9, funciona perfectamente en la nueva versión ya que no añade nada del otro mundo.
Ajustes
Por defecto, al activar el plugin encontrarás los iconos tal que así:
O bien así si se selecciona "mostrar nombres".
Y esta es la captura de la configuración de los iconos que están funcionando aquí con este resultado:
Pero para que los botones aparezcan redondos y para añadir el botón de Menéame (o cualquier otra red) basta tirar de sus filtros para registrar el icono y trastear un poco el CSS. Nada que suponga mucha complicación.
Pasos para añadir un nuevo botón
1- Buscamos y bajamos el icono en .SVG de la red que queramos añadir, en este caso el mejor, aunque mejorable, que he encontrado de Menéame es este.
2. Subimos el icono al directorio /assets/svg/ de nuestra plantilla (si no existe esta ruta hay que crearla) y el plugin lo reconocerá y usará automáticamente.
3. Registramos el icono con su filtro correspondiente añadiéndolo a tu plugin de funciones, usando Code Snippets o añadiéndolo a mano al functions.php de la plantilla, el método ya es cosa tuya.
add_filter( ‘scriptlesssocialsharing_register’, ‘prefix_scriptless_add_meneame_button’ );
/**
* Añade un botón personalizado a Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_meneame_button( $buttons ) {
$buttons[‘tumblr’] = array(
‘label’ => __( ‘Menéame’, ‘scriptless-social-sharing’ ),
‘url_base’ => ‘https://www.meneame.net/submit?url=’.get_permalink().’» target=»_blank’,
‘args’ => array(
‘query_args’ => array(
‘name’ => ‘%%title%%’,
‘url’ => ‘%%permalink%%’,
),
‘color’ => ‘#e35614’,
‘svg’ => ‘meneame-square’, //Subir a `assets/svg` de tu plantilla
‘icon’ => ‘f173’, // Para fuentes FontAwesome
),
);
return $buttons;
}Es necesario que llames al archivo de tu icono «loquesea-square.svg» para que funcione el filtro.
También es importante que atiendas a la estructura exacta del enlace de compartir de la red en cuestión porque hay que añadirlo en ‘url_base’. En el caso de Menéame es https://www.meneame.net/submit?url=’.get_permalink().
Por último sólo queda jugar con el CSS hasta encontrar la apariencia y posición final que se desee, para el ejemplo se ha usado este CSS:
/* CSS botones compartir del plugin */
.scriptlesssocialsharing__buttons a.button {
/* CONVERTIR A colores parar linea background*/
background-color: #7F7F7F !important; */
color: #ffffff;
border-radius: 100px;
margin-right: 1px;
margin-left: 1px;
font-size: 13px;
letter-spacing: 2px;
font-weight: 900;
}
.scriptlesssocialsharing__buttons {
justify-content: right;
}
.scriptlesssocialsharing__buttons a.button:hover {
background-color: #ff2121 !important;
color: #ffffff !important;
}Si todo ha ido bien, ahora encontrarás el icono añadido en los ajustes del plugin y podrás ordenarlo, quitarlo o ponerlo a tu rollo como el resto de iconos que trae por defecto.
Bloque para Gutenberg y shortcodes
El plugin añade también un bloque (que puedes desactivar) a Gutenberg que permite colocar tus botones entre párrafos o bajo determinados elementos del contenido.
También dispone de shortcodes para que los plantes donde te plazca y con la posibilidad de limitar las redes que se muestran en un punto concreto.
Añadir [ ]
Shortcode «genérico».
scriptlessPara quitar el encabezado o personalizarlo.
scriptless heading=""Para que sólo ciertos botones se muestren (separados por comas y sin espacios)
scriptless buttons="email,facebook"Su autora también añade en su web los filtros específicos necesarios para añadir un botón de Facebook Messenger.
Hay otros plugins, también ligeros y con más pijadas estéticas, pero este es perfecto si eres un apasionado de la velocidad de carga. Como alternativa ligera de pago con algunas opciones más de diseño, Novashare (de los creadores de Perfmatters) es también una muy buena opción.
Y si quieres lo mismo pero sin plugin y aún más ligero, (solo para GeneratePres) aquí puedes aprender a hacerlo
