Botones de Compartir en Redes Sociales Ridículamente Responsivos
Proporciona botones responsivos para compartir en redes sociales y seguir perfiles con iconos SVG que pueden añadirse a nodos o colocarse como bloques.
rrssb
Install
composer require 'drupal/rrssb:8.x-2.7'
composer require 'drupal/rrssb:8.x-2.5'
composer require 'drupal/rrssb:8.x-2.4'
Overview
El módulo Ridiculously Responsive Social Sharing Buttons (RRSSB) integra la librería RRSSB+ en Drupal, proporcionando botones atractivos y responsivos para compartir en redes sociales con iconos basados en SVG. El módulo no requiere scripts de terceros, lo que resulta en tamaños de descarga pequeños y excelente compatibilidad con navegadores.
Puedes elegir entre botones de Compartir (que animan a los visitantes a compartir tu contenido en sus redes sociales) o botones de Seguir (que dirigen a los visitantes a tus perfiles en redes sociales). Se pueden configurar múltiples conjuntos de botones con diferentes combinaciones, permitiendo configuraciones distintas para diferentes partes de tu sitio.
Los botones pueden mostrarse como un campo adicional en tipos de nodo específicos o mediante bloques que pueden colocarse en cualquier lugar del diseño de tu tema. El módulo también proporciona un manejador de campo para Views que permite mostrar botones en vistas.
El módulo soporta 19 redes sociales y acciones diferentes incluyendo Facebook, Twitter/X, LinkedIn, Pinterest, Instagram, YouTube, GitHub, Reddit, WhatsApp, correo electrónico y más. Cada botón genera automáticamente las URLs apropiadas para compartir/seguir usando tokens para la URL, título e imágenes de la página actual.
Features
- Botones responsivos para compartir en redes sociales que se adaptan a cualquier tamaño de pantalla con atractivos iconos basados en SVG
- Soporte tanto para botones de Compartir (compartir contenido en redes sociales) como de Seguir (enlazar a tus perfiles sociales)
- Múltiples configuraciones de conjuntos de botones permitiendo diferentes combinaciones para distintos contextos
- 19 integraciones de redes sociales incluidas: Facebook, Twitter, X, LinkedIn, Pinterest, Instagram, YouTube, GitHub, Reddit, Tumblr, WhatsApp, correo electrónico, VK, Pocket, Hacker News, Delicious, Imprimir, Teléfono y Unirse (registro de usuario)
- Integración con tipos de nodo mediante campo adicional - adjunta botones a tipos de contenido específicos
- Colocación mediante bloques para posicionamiento flexible en cualquier lugar del diseño de la página
- Integración con Views mediante un manejador de campo personalizado para mostrar botones en vistas
- Configuraciones de apariencia personalizables: tamaño, tamaño mínimo (reducción), tamaño de fila extra (crecimiento), filas mín/máx, texto de prefijo y alineación de botones
- Generación de URLs basada en tokens con configuración de imágenes alternativas
- Manejo automático de ventanas emergentes para diálogos de compartir
- CSS auto-generado solo para los botones habilitados, optimizando la carga de página
- Extensible mediante hooks - añade botones personalizados o modifica los existentes
- Bloque de demostración para probar configuraciones de apariencia en tiempo real
- Comando Drush para regenerar el CSS de botones
- No requiere scripts de terceros - toda la funcionalidad está autocontenida
Use Cases
Añadir botones de compartir a publicaciones de blog
Configura un conjunto de botones de Compartir con botones de Facebook, Twitter/X, LinkedIn y correo electrónico. Ve a Administración > Estructura > Tipos de contenido > Artículo, selecciona el conjunto de botones en la pestaña RRSSB y guarda. Luego configura la visualización en Administración > Estructura > Tipos de contenido > Artículo > Gestionar presentación para posicionar el pseudo-campo RRSSB donde quieras que aparezcan los botones.
Crear un bloque de seguimiento social para el pie de página
Crea un nuevo conjunto de botones de Seguir en Administración > Configuración > Contenido > RRSSB > Añadir. Selecciona Seguir como tipo de botón, habilita los botones para tus redes sociales (Facebook, Instagram, YouTube, etc.) e ingresa tus nombres de usuario para cada una. Añade texto de prefijo como 'Síguenos en'. Luego coloca el Bloque RRSSB en la región del pie de página en Administración > Estructura > Diseño de bloques.
Mostrar botones de compartir en Views
Crea o edita una Vista que muestre nodos. Añade un nuevo campo y selecciona 'Botones RRSSB' de la lista. Configura qué conjunto de botones mostrar. Los botones de compartir usarán automáticamente la URL y título de cada nodo para los enlaces de compartir.
Estilo personalizado con diseño vertical de botones
Edita las configuraciones de apariencia de tu conjunto de botones. Establece 'Filas mínimas' en un valor alto (ej. 10) para forzar los botones en una pila vertical. Ajusta 'Tamaño' y 'Tamaño mínimo' para controlar las dimensiones de los botones. Habilita 'Alinear botones a la derecha' si es necesario para tu diseño.
Añadir un botón de red social personalizado
Implementa hook_rrssb_buttons() en un módulo personalizado para definir nuevos botones. Proporciona share_url y/o follow_url con los tokens apropiados, colores de fondo y ya sea una cadena SVG o ruta a un archivo SVG. El botón aparecerá automáticamente en los formularios de configuración del conjunto de botones.
Probar apariencia de botones en tiempo real
Coloca el Bloque de Demostración RRSSB en una página. Este bloque muestra el formulario de configuración de apariencia y te permite ajustar tamaño, reducción, crecimiento y configuraciones de filas mientras ves los cambios inmediatamente sin guardar. Una vez que encuentres configuraciones que te gusten, aplícalas a tu configuración real del conjunto de botones.
Tips
- Usa múltiples conjuntos de botones para diferentes contextos - un conjunto compacto para barras laterales y uno completo para pies de artículo
- Para botones de Seguir, recuerda ingresar tu nombre de usuario/identificador para cada red social habilitada
- El botón 'Imprimir' usa JavaScript para activar el diálogo de impresión del navegador - útil para artículos
- El botón 'Unirse' enlaza a /user/register - útil para promover la membresía del sitio
- Establece 'Filas mínimas' en un valor alto para crear un diseño vertical de botones
- Usa el bloque de Demostración durante el desarrollo para experimentar con configuraciones de apariencia antes de confirmarlas
- El módulo excluye automáticamente los enlaces RRSSB de las adiciones de iconos del módulo External Link
- El CSS de botones se auto-genera y se almacena en caché - los cambios en la configuración de botones regenerarán el CSS automáticamente
- Para compartir en Pinterest, asegúrate de que tu contenido tenga imágenes y configura apropiadamente el ajuste image_tokens
Technical Details
Admin Pages 4
/admin/config/content/rrssb
Lista todos los conjuntos de botones configurados con su tipo (Compartir o Seguir). Desde aquí puedes añadir nuevos conjuntos de botones, editar los existentes o eliminarlos. Cada fila muestra la etiqueta del conjunto de botones y su tipo.
/admin/config/content/rrssb/add
Crea un nuevo conjunto de botones con selección personalizada de botones sociales y configuraciones de apariencia.
/admin/config/content/rrssb/{rrssb_button_set}
Modifica una configuración de conjunto de botones existente. Los mismos campos que el formulario de Añadir, pero con los valores existentes precargados.
/admin/config/content/rrssb/{rrssb_button_set}/delete
Formulario de confirmación para eliminar un conjunto de botones. Advierte que la acción no se puede deshacer.
Permissions 1
Hooks 2
hook_rrssb_buttons
Proporciona configuración para botones de compartir en redes sociales. Permite a los módulos definir nuevos botones de redes sociales con sus URLs de compartir/seguir, colores e iconos SVG.
hook_rrssb_buttons_alter
Altera la configuración de botones de compartir en redes sociales proporcionada por otros módulos. Útil para modificar URLs, colores o añadir/eliminar botones.
Drush Commands 1
drush rrssb:gen-css
Regenera el archivo rrssb.buttons.css en la librería RRSSB+. Esto es útil para uso independiente de la librería fuera de Drupal, o cuando el CSS de la librería necesita regenerarse con todos los estilos de botones disponibles.
Troubleshooting 5
Asegúrate de haber: 1) Creado un conjunto de botones en /admin/config/content/rrssb, 2) Seleccionado el conjunto de botones en la configuración del tipo de nodo, 3) Habilitado el pseudo-campo RRSSB en la configuración de Gestionar presentación para ese tipo de contenido, 4) Limpiado todas las cachés.
La librería RRSSB+ no está instalada. Si usas Composer, ejecuta 'composer require drupal/rrssb' que instalará la librería automáticamente. De lo contrario, descárgala manualmente desde https://github.com/AdamPS/rrssb-plus y extráela en libraries/rrssb-plus.
El módulo genera CSS dinámicamente. Limpia todas las cachés para regenerar el archivo CSS. Si el problema persiste, verifica que el directorio de iconos de la librería exista en libraries/rrssb-plus/icons con archivos .min.svg.
El campo de nombre de usuario solo aparece cuando se selecciona 'Seguir' como tipo de botón. Algunos botones (como correo electrónico para compartir) no requieren nombres de usuario y no mostrarán el campo incluso en modo Seguir.
Configura el campo 'Tokens a usar para encontrar imágenes' en tu conjunto de botones. El valor predeterminado intenta [node:field_image:entity:url] y luego recurre al logo del sitio. Personaliza esto para que coincida con el campo de imagen de tu tipo de contenido.
Security Notes 3
- El permiso 'administer rrssb' está marcado como acceso restringido porque permite la configuración de URLs externas
- Los nombres de usuario ingresados para botones de Seguir se escapan en HTML antes de renderizarse para prevenir ataques XSS
- Las URLs de compartir usan rawurlencode() en los valores de token para asegurar una construcción segura de URLs