Botones de Compartir AddToAny
Proporciona botones de compartir y seguir en redes sociales mediante la integración con la plataforma AddToAny, soportando más de 100 servicios incluyendo Facebook, Mastodon, Pinterest, WhatsApp y más.
addtoany
Install
composer require 'drupal/addtoany:^2.0'
composer require 'drupal/addtoany:8.x-1.22'
Overview
AddToAny Share Buttons integra la plataforma de compartición universal AddToAny con Drupal, permitiendo a los visitantes compartir contenido a través de una completa suite de servicios de redes sociales. El módulo proporciona iconos vectoriales escalables (SVG) que se renderizan perfectamente en todas las pantallas, incluyendo pantallas Retina.
El módulo se integra perfectamente con el sistema de visualización de entidades de Drupal, permitiendo colocar botones de compartir en cualquier entidad de contenido (nodes, media, comentarios, etc.) a través de la interfaz Manage Display. También proporciona bloques dedicados tanto para la funcionalidad de compartir como de seguir, así como integración con campos de Views para mostrar botones de compartir en listados basados en Views.
Las características de AddToAny incluyen: menús de compartir universales, menús de compartir nativos, contadores de compartidos, botones de colores personalizados, iconos personalizados, integración con Google Analytics, seguimiento de eventos para software de analíticas, seguimiento de enlaces usando Bitly o acortadores de URL personalizados, parámetros UTM y localización automática en más de 50 idiomas. El módulo se carga de forma asíncrona para un rendimiento óptimo y no requiere registro ni gestión de cuentas.
Features
- Botón de compartir universal que soporta más de 100 servicios de redes sociales incluyendo Facebook, Mastodon, Pinterest, WhatsApp, Reddit, LinkedIn, correo electrónico y SMS
- Iconos de Gráficos Vectoriales Escalables (SVG) que son matemáticamente precisos, escalables a cualquier tamaño y optimizados para pantallas High-PPI/Retina
- Integración con visualización de entidades que permite botones de compartir en nodes, media, comentarios y cualquier entidad de contenido a través de la configuración de Manage Display
- Dos tipos de bloques: bloque de Botones de Compartir (para compartir la página/contenido actual) y bloque de Botones de Seguir (para enlazar a perfiles sociales)
- Integración con campos de Views para mostrar botones de compartir en listados de contenido basados en Views
- Botones de servicio personalizables con código HTML que permite la selección y ordenación de servicios sociales específicos
- Tamaños de iconos configurables de 8 a 999 píxeles
- Opciones de personalización del botón universal: icono SVG predeterminado, URL de imagen personalizada, o ninguno
- Soporte para JavaScript y CSS personalizado para configuraciones avanzadas de AddToAny
- Integración con Token para contenido dinámico en HTML/JavaScript adicional
- Carga asíncrona para un rendimiento óptimo de la página
- Localización automática en más de 50 idiomas
- Integración con Google Analytics con capacidades de seguimiento de eventos
- Compatibilidad con Display Suite para gestión avanzada de diseños
Use Cases
Compartición Básica de Contenido
Habilite los botones de compartir en publicaciones de blog y artículos marcando 'Node' en la configuración de Entidades, luego visitando Estructura > Tipos de contenido > Article > Manage display. Arrastre el componente 'AddToAny' a la posición deseada en el diseño. La configuración predeterminada incluye botones de Facebook, Mastodon y Email.
Selección Personalizada de Servicios
Personalice qué servicios sociales aparecen editando el código HTML de Botones de Servicio. Añada botones en orden de preferencia usando la convención de nomenclatura de clases de AddToAny: <a class="a2a_button_facebook"></a>, <a class="a2a_button_twitter"></a>, <a class="a2a_button_linkedin"></a>, etc. Visite https://www.addtoany.com/buttons/customize/drupal/standalone_services para la lista completa de servicios disponibles.
Barra de Seguimiento de Redes Sociales
Cree un bloque de botones de seguir para enlazar a los perfiles sociales de su organización. Coloque un bloque 'Botones de seguir AddToAny' en una región de barra lateral o pie de página. Configúrelo con HTML como: <a class="a2a_button_facebook" href="https://facebook.com/YourPage"></a><a class="a2a_button_twitter" href="https://twitter.com/YourHandle"></a>
Integración con Views para Listados de Contenido
Añada botones de compartir a listados de contenido basados en Views (índices de blog, archivos de noticias, etc.). Edite su View, añada un campo y seleccione 'Botones de compartir AddToAny' de la categoría Content. Cada elemento del listado tendrá sus propios botones de compartir con la URL y título correctos.
Seguimiento con Google Analytics
Rastree eventos de compartición social en Google Analytics añadiendo JavaScript al campo JavaScript Adicional: a2a_config.callbacks.push({share: function(data) { ga('send', 'social', data.service, 'share', data.url); }});
Estilización Personalizada de Botones
Estilice los botones de compartir para que coincidan con el diseño de su sitio usando el campo CSS Adicional. Apunte a la clase .addtoany_list para el contenedor y .a2a_kit_size_XX para estilos específicos de tamaño. Los estados hover pueden personalizarse apuntando a .addtoany_list a:hover span.
Seguimiento con Parámetros UTM
Añada parámetros de seguimiento de campaña a los enlaces compartidos usando la función de plantilla de URL de AddToAny en el campo JavaScript Adicional: a2a_config.templates = { twitter: '${title} ${link}?utm_source=twitter&utm_medium=social' };
Tips
- Use sugerencias de plantilla (addtoany-standard--node--article.html.twig) para personalizar la apariencia de botones para tipos de contenido específicos
- Limpie la caché de Drupal después de cambiar la configuración de tipos de entidad para que los cambios surtan efecto
- El botón universal puede ocultarse completamente seleccionando 'Ninguno' si solo desea botones de servicio específicos
- El reemplazo de tokens en JavaScript Adicional permite contenido dinámico por node - útil para incluir metadatos específicos del node
- Para máximo rendimiento, el script externo de AddToAny se carga con el atributo defer para no bloquear el renderizado de la página
- Los ajustes a nivel de bloque anulan los ajustes globales, permitiendo diferentes configuraciones para diferentes regiones del sitio
Technical Details
Admin Pages 1
/admin/config/services/addtoany
Configurar la apariencia de los botones de compartir de AddToAny, botones de servicio, configuración del botón universal y disponibilidad por tipo de entidad.
Permissions 1
Hooks 1
hook_addtoany_entity_types_alter
Permite a los módulos alterar los tipos de entidad disponibles para los botones de compartir de AddToAny. Use este hook para añadir tipos de entidad personalizados o eliminar los predeterminados de la configuración de AddToAny.
Security Notes 4
- El permiso 'administer addtoany' tiene acceso restringido debido a la capacidad de añadir código JavaScript personalizado
- El JavaScript personalizado en bloques requiere el permiso 'administer addtoany' para editar
- El JavaScript externo se carga desde el CDN de AddToAny (static.addtoany.com) - asegúrese de que este dominio esté permitido si usa Content Security Policy
- El módulo sanitiza URLs usando UrlHelper::stripDangerousProtocols() para prevenir XSS a través de protocolos maliciosos