Botones para compartir en Blogger con AddThis
Por qué añadir botones para compartir
Escribir entradas ya no basta: el alcance depende de que los lectores compartan tu contenido en redes sociales. Blogger incluye una opción básica de “Mostrar botones para compartir”, pero esos botones son limitados: no siempre permiten elegir las redes y muchas veces no incluyen los botones de “Like” de Facebook o “Tweet” de Twitter.
A continuación te explico paso a paso cómo integrar botones más completos usando AddThis, cómo personalizarlos y buenas prácticas para su colocación y pruebas.
Importante: las capturas muestran la interfaz en inglés antigua; los controles a buscar en tu panel son equivalentes a Diseño > Editar (o Edit HTML) según el idioma de tu cuenta.
Paso 1 — activar la opción nativa de Blogger (rápido)
- Entra al panel de tu blog en Blogger.
- Ve a Diseño.
- En el recuadro “Entradas del blog” selecciona Editar.
- Marca “Mostrar botones para compartir” y guarda los cambios.
Esto muestra botones básicos junto a cada entrada, pero si quieres control total (orden, redes, Tweet con autor), sigue con AddThis.
Paso 2 — configurar AddThis
- Regístrate en AddThis y accede al panel.
- Haz clic en “Get AddThis” o el equivalente para empezar a crear herramientas.
- Elige un set de botones y, en Platform, selecciona “Website” en lugar de “Blogger”. Así obtendrás el HTML completo que podrás editar.
Cuando elijas “Customize” verás opciones de estilo y plataformas disponibles.
Selecciona el estilo visual más cercano a lo que quieres y haz clic en “Grab It” para copiar el código.
Paso 3 — pegar el código en Blogger
- En Blogger ve a Diseño y selecciona Editar HTML (o Expandir plantillas de widget si tu plantilla lo requiere).
- Decide dónde aparecerán los botones. Una buena ubicación es justo debajo del contenido del post.
- Pega el fragmento HTML provisto por AddThis en la posición elegida.
- Guarda la plantilla y revisa una entrada.
En mi plantilla prefiero pegar el código justo después del bloque principal del post (por ejemplo, después del tag o la etiqueta que delimite el contenido). Si usas plantillas diferentes, busca el cierre del contenedor del contenido.
Una vez guardado, los botones aparecerán donde los colocaste.
Personalizar los botones de AddThis (qué cambia y por qué)
AddThis te entrega un bloque de HTML/JS que controla tanto la apariencia como los servicios incluidos. El código puede verse complejo, pero las modificaciones comunes son simples.
Ejemplo de bloque base suministrado por AddThis:
Nota: el ejemplo anterior muestra la estructura general; el HTML real contiene elementos y atributos que AddThis usa para renderizar botones.
Funciones generales
La etiqueta que controla opciones generales suele incluir atributos como expr:addthis:title y expr:addthis:url. Añade o confirma estos atributos para que el título y la URL de la entrada se inserten automáticamente en los enlaces compartidos:
- expr:addthis:title=’data:post.title’ — inserta el título de la entrada en el contenido compartido.
- expr:addthis:url=’data:post.url’ — usa la URL permanente (permalink) de la entrada.
Así, cuando alguien pulsa el botón de Twitter, el tweet incluirá el título y la URL de la entrada.
Ejemplo de cómo quedaría un Tweet generado:
Make Tech Easier http://t.co/nCLRCEE via @AddThis
Primero aparece el título, luego la URL y finalmente el origen.
Botones adicionales (seleccionar servicios)
Para elegir qué botones mostrar, dentro del HTML verás elementos con clases como addthisbutton[servicio]. Modifica esas clases para incluir los servicios que quieras.
Ejemplo: para mostrar Tweet y Like (además de otros) y atribuir el tweet a tu usuario:
- Reemplaza tu_usuario_twitter por tu handle sin @.
- Consulta la lista de servicios de AddThis si necesitas botones específicos.
Código final de ejemplo
Mi configuración final (simplificada) puede verse así en el HTML:
En el blog se renderiza como una barra de botones con Tweet, Like, compartir por correo, etc.
Buenas prácticas y pruebas
- Prueba en varias entradas con títulos largos, cortos y con caracteres especiales.
- Revisa en móviles: la posición y el espaciado suelen requerir ajustes CSS.
- Si usas cache o CDN, limpia cache al actualizar la plantilla.
- Mide: incorpora parámetros UTM en las URLs compartidas si quieres seguimiento en Google Analytics.
Contraejemplos y cuándo evitar AddThis
- Si necesitas control total sobre privacidad (no enviar datos a terceros), evita servicios de terceros y crea botones nativos que sólo abran URLs de compartición.
- Si tu política GDPR/privacidad prohíbe llamadas a terceros sin consentimiento, implementa un mecanismo de consentimiento antes de cargar AddThis.
Alternativas y compatibilidad
- ShareThis: similar a AddThis, con opciones de personalización.
- Botones oficiales: Facebook y Twitter ofrecen plugins oficiales (mayor control, puede requerir más código).
- Implementación nativa: enlaces simples con parámetros intent=share y URL funcionan sin servicios externos.
Compatibilidad: la mayoría de soluciones funcionan en navegadores modernos. Los fallos más comunes vienen por plantillas con JavaScript que bloquea la ejecución o por políticas de contenido (CSP).
Checklist por rol
- Propietario del blog:
- Decidir redes prioritarias y política de privacidad.
- Probar en móvil antes de publicar cambios.
- Editor de contenido:
- Comprobar títulos y meta para que se vean bien al compartir.
- Desarrollador/maquetador:
- Insertar el HTML en la ubicación correcta.
- Añadir CSS para espaciado y responsividad.
- Implementar consentimiento si es necesario.
Mini-metodología de despliegue (rápida)
- Hacer backup de la plantilla actual.
- Añadir el código de AddThis en un entorno de prueba o una entrada de borrador.
- Validar renderizado y comportamiento (compartir con cuentas de prueba).
- Ajustar CSS y atributos (expr:addthis:title, tw:via, etc.).
- Publicar y monitorizar enlaces compartidos y tráfico.
Criterios de aceptación
- Los botones aparecen en la ubicación acordada en escritorio y móvil.
- Compartir en Facebook publica título + URL correctamente.
- Compartir en Twitter incluye tw:via con el handle configurado.
- No hay errores JavaScript en la consola al cargar una entrada.
Pequeño glosario (1 línea cada término)
- AddThis: servicio que genera botones sociales y scripts para compartir contenido.
- expr:addthis:title: atributo que inserta dinámicamente el título de la entrada.
- tw:via: atributo que añade el autor/handle en tweets generados.
Notas de privacidad (GDPR)
AddThis es un servicio externo: recopila datos de interacción. Si operas en la UE, informa en tu política de privacidad y solicita consentimiento si es necesario antes de cargar scripts de terceros.
Resumen
AddThis ofrece una forma rápida y configurable de añadir botones sociales a Blogger con control sobre qué servicios aparecen y atributos como título y autor en Twitter. Prueba siempre en móvil, respeta la privacidad y ajusta el CSS para que los botones integren bien con tu diseño.
Notas importantes:
- Haz copia de seguridad de la plantilla antes de editar el HTML.
- Considera alternativas nativas si la privacidad es una prioridad estricta.
Materiales similares
Comprar criptomonedas con Apple Pay en iPhone
Crear y gestionar un perfil público en Snapchat
Alternativas Open Source a tus apps en Linux
Instalar CyanogenMod en Lenovo P780
Instalador USB de Snow Leopard: guía rápida
