Cómo instalar un Widget de Redes Sociales Premium en Blogger
¿Quieres que tus lectores compartan tu contenido con solo un clic? En este tutorial te enseño paso a paso cómo instalar un widget de redes sociales profesional en tu blog de Blogger. Compatible con las plataformas más usadas: Facebook, X (Twitter), WhatsApp, Threads, Messenger, LinkedIn, correo electrónico y copia de enlace.
Este diseño no solo es moderno y atractivo, sino que también está optimizado para móviles y tablets. Además, incluye animaciones suaves que mejoran la experiencia del usuario y aumentan la probabilidad de que compartan tus artículos.
⚡ Ventaja competitiva: Este widget no es el típico gadget aburrido. Tiene iconos SVG de alta definición, efectos hover con desplazamiento suave, y un sistema de copiado con notificación flotante que hará que tu blog se vea profesional y actualizado.
📑 Lo que aprenderás hoy
- Cómo acceder al editor HTML de tu plantilla en Blogger.
- Dónde buscar y pegar el código exacto.
- Qué hacer si el widget no aparece a la primera (solución para cualquier plantilla).
- Cómo personalizar colores, textos y estilos.
- Preguntas frecuentes y solución de problemas.
Nota Importante
Este tutorial está actualizado, no tendrá ningún inconveniente al momento de su instalación.
Garantizado y completamente funcionalA continuación puede ver su demostración en el siguiente blog
Antes de Empezar: ¡Haz una Copia de Seguridad!
⚠️ Importante: Antes de realizar cualquier cambio en el código de tu plantilla, SIEMPRE haz una copia de seguridad. Es tu red de seguridad por si algo sale mal.
- Ve a Tema en el menú de tu panel de Blogger.
- Haz clic en Crear copia de seguridad (ubicado en la esquina superior derecha).
- Guarda el archivo .xml en tu computadora.
Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:
Tutorial paso a paso
🛠️ Paso 1: Accede al Editor HTML de tu Plantilla
Lo primero que debes hacer es ingresar a tu cuenta de Blogger y seleccionar el blog donde quieres implementar el widget. Una vez dentro, sigue esta ruta:
Ve al menú lateral izquierdo y haz clic en Tema.
Haz clic en el botón Editar HTML (tres puntos verticales o directamente según tu versión de Blogger).
🔍 Paso 2: Busca el Código Clave <data:post.body/>
Dentro del editor HTML, debes encontrar el lugar exacto donde se renderiza el contenido de tus entradas. Para ello:
Presiona Ctrl + F (o Cmd + F en Mac) para abrir el buscador del navegador.
Escribe exactamente: <data:post.body/> y presiona Enter.
El código se resaltará en el editor. Importante: Dependiendo de tu plantilla, puede aparecer varias veces. Deberás probar en cuál de ellos funciona mejor.
💡 Nota: Si al pegar el código en el primer <data:post.body/> no se muestra, prueba en el segundo o incluso en el tercero. Esto depende de cómo fue construida tu plantilla (puede tener varias secciones: entradas individuales, páginas, etc.).
📋 Paso 3: Inserta el código después del <data:post.body/>
Una vez localizado el <data:post.body/>, coloca el cursor justo después de la etiqueta de cierre (/>) y pega el código completo.
Te comparto el código completo a continuación. Cópialo tal cual:
<!-- ========================================== -->
<!-- WIDGET REDES SOCIALES PREMIUM V3 -->
<!-- ========================================== -->
<b:if cond='data:view.isPost'>
<div class='social-share-premium'>
<h3 class='share-title'>✨ Comparte este artículo</h3>
<div class='share-buttons' id='shareButtons'>
<!-- Facebook -->
<a class='share-btn fb' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.url' rel='noopener' target='_blank' title='Compartir en Facebook'>
<svg viewBox='0 0 24 24'><path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/></svg>
<span>Facebook</span>
</a>
<!-- X (Twitter) -->
<a class='share-btn x' expr:href='"https://x.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' rel='noopener' target='_blank' title='Compartir en X'>
<svg viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>
<span>X</span>
</a>
<!-- WhatsApp -->
<a class='share-btn wa' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + "%20-%20" + data:post.url' rel='noopener' target='_blank' title='Compartir en WhatsApp'>
<svg viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/></svg>
<span>WhatsApp</span>
</a>
<!-- Threads -->
<a class='share-btn threads' expr:href='"https://www.threads.net/intent/post?text=" + data:post.title + "%20" + data:post.url' rel='noopener' target='_blank' title='Compartir en Threads'>
<svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M340.8 238c-.6-69.6-38.3-111.5-102-111.5-42.5 0-78.3 19.2-97.1 49.9l41.2 28.7c10.7-16.8 25.4-30.8 52.4-30.8 30.5 0 46.3 17 50.8 48.5-14.7-2.3-29.5-3.5-44.6-3.5-82.4 0-121.1 37.3-121.1 86.6s38.8 79.7 95.9 79.7c62.7 0 100.1-42.2 115.4-94.5 15.9 7.2 26.9 24 26.9 49.3 0 67.6-78 104.5-144.1 104.5-97.5 0-161.3-64-161.3-168.2 0-127.6 84.3-209.4 197.6-209.4 76 0 113.6 33.4 139.2 78.1L432 115.9c-27.8-58-89.9-99.5-183.1-99.5-148.5 0-249.5 105.4-249.5 258.2 0 139.8 98.9 220.9 216.7 220.9 97.4 0 195.8-56.8 195.8-154 0-50.8-29.2-84.5-71.2-103.5zM214.4 334.9c-21.5 0-40.4-10.2-40.4-29 0-29.6 36.4-38.6 72-38.6 13.5 0 26.8 .9 38.5 3.5-8.4 38.5-33.4 64.2-70 64.2l0 0z'/>
</svg>
<span>Threads</span>
</a>
<!-- Messenger -->
<a class='share-btn messenger' expr:href='"https://www.facebook.com/dialog/send?link=" + data:post.url + "&app_id=291494419107518"' rel='noopener' target='_blank' title='Compartir en Messenger'>
<svg viewBox='0 0 24 24'><path d='M12 0C5.373 0 0 5.373 0 12c0 4.232 2.187 8.027 5.502 10.262v3.738l3.838-2.076c1.022.283 2.103.429 3.208.429 6.627 0 12-5.373 12-12S18.627 0 12 0zm1.94 16.073l-3.048-3.248-5.938 3.248 6.539-6.932 3.097 3.248 5.891-3.248-6.541 6.932z'/></svg>
<span>Messenger</span>
</a>
<!-- LinkedIn -->
<a class='share-btn linkedin' expr:href='"https://www.linkedin.com/sharing/share-offsite/?url=" + data:post.url' rel='noopener' target='_blank' title='Compartir en LinkedIn'>
<svg viewBox='0 0 24 24'><path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/></svg>
<span>LinkedIn</span>
</a>
<!-- E-Mail -->
<a class='share-btn email' expr:href='"mailto:?subject=" + data:post.title + "&body=" + data:post.url' rel='noopener' target='_blank' title='Compartir por E-mail'>
<svg viewBox='0 0 24 24'><path d='M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z'/><path d='M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z'/></svg>
<span>E-Mail</span>
</a>
<!-- Copiar Enlace -->
<button class='share-btn copy' onclick='copyToClipboard(this)' title='Copiar enlace'>
<svg viewBox='0 0 24 24'><path d='M15.5 2h-10A2.5 2.5 0 003 4.5v13A2.5 2.5 0 005.5 20h10a2.5 2.5 0 002.5-2.5v-13A2.5 2.5 0 0015.5 2zm-1 15h-8a1 1 0 010-2h8a1 1 0 010 2zm0-4h-8a1 1 0 010-2h8a1 1 0 010 2zm0-4h-8a1 1 0 010-2h8a1 1 0 010 2zm3-2h-2V4.5a1 1 0 011-1h1a1 1 0 011 1V7z'/></svg>
<span>Copiar</span>
</button>
</div>
</div>
<!-- ESTILOS CSS MEJORADOS -->
<b:if cond='data:view.isPost'>
<style>
/* Contenedor principal */
.social-share-premium {
background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 28px 24px 24px;
margin: 40px 0 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.social-share-premium::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.share-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 20px 0;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1;
}
.share-title::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), transparent);
margin-left: 12px;
}
.share-buttons {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px;
position: relative;
z-index: 1;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 8px;
border-radius: 14px;
text-decoration: none;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #1a1a2e;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(4px);
border: 1px solid rgba(0, 0, 0, 0.04);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
position: relative;
overflow: hidden;
}
.share-btn svg {
width: 18px;
height: 18px;
fill: currentColor;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.share-btn span {
line-height: 1.2;
white-space: nowrap;
}
.share-btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
border-color: rgba(0, 0, 0, 0.08);
}
.share-btn:hover svg {
transform: scale(1.1);
}
.share-btn:active {
transform: scale(0.95);
transition-duration: 0.08s;
}
.share-btn.fb { color: #1877f2; background: rgba(24, 119, 242, 0.08); }
.share-btn.fb:hover { background: #1877f2; color: white; border-color: #1877f2; }
.share-btn.x { color: #000; background: rgba(0, 0, 0, 0.05); }
.share-btn.x:hover { background: #000; color: white; border-color: #000; }
.share-btn.wa { color: #25d366; background: rgba(37, 211, 102, 0.08); }
.share-btn.wa:hover { background: #25d366; color: white; border-color: #25d366; }
.share-btn.threads { color: #000; background: rgba(0, 0, 0, 0.05); }
.share-btn.threads:hover { background: #000; color: white; border-color: #000; }
.share-btn.messenger { color: #0084ff; background: rgba(0, 132, 255, 0.08); }
.share-btn.messenger:hover { background: #0084ff; color: white; border-color: #0084ff; }
.share-btn.linkedin { color: #0a66c2; background: rgba(10, 102, 194, 0.08); }
.share-btn.linkedin:hover { background: #0a66c2; color: white; border-color: #0a66c2; }
.share-btn.email { color: #ea4335; background: rgba(234, 67, 53, 0.08); }
.share-btn.email:hover { background: #ea4335; color: white; border-color: #ea4335; }
.share-btn.copy { color: #6366f1; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.15); }
.share-btn.copy:hover { background: #6366f1; color: white; border-color: #6366f1; }
.share-btn.copied {
background: #10b981 !important;
color: white !important;
border-color: #10b981 !important;
transform: scale(0.98);
}
.share-btn.copied svg {
fill: white !important;
}
.copy-tooltip {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #1a1a2e;
color: white;
padding: 12px 28px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.08);
letter-spacing: 0.3px;
}
.copy-tooltip.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
.social-share-premium {
padding: 20px 16px 16px;
border-radius: 18px;
margin: 30px 0 20px;
}
.share-title {
font-size: 1rem;
}
.share-buttons {
grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
gap: 8px;
}
.share-btn {
padding: 10px 6px;
font-size: 0.7rem;
border-radius: 12px;
}
.share-btn svg {
width: 16px;
height: 16px;
}
.share-btn span {
font-size: 0.65rem;
}
}
@media (max-width: 420px) {
.share-buttons {
grid-template-columns: repeat(4, 1fr);
}
.share-btn span {
display: none;
}
.share-btn {
padding: 12px 4px;
}
.share-btn svg {
width: 20px;
height: 20px;
}
}
</style>
</b:if>
<!-- SCRIPT OPTIMIZADO PARA BLOGGER -->
<script>
// Función mejorada para copiar en Blogger
function copyToClipboard(btn) {
// Obtener la URL actual de la entrada
var url = window.location.href;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(function() {
showCopiedFeedback(btn);
}).catch(function() {
fallbackCopy(btn, url);
});
} else {
fallbackCopy(btn, url);
}
}
function fallbackCopy(btn, url) {
var textArea = document.createElement('textarea');
textArea.value = url;
textArea.style.position = 'fixed';
textArea.style.left = '-9999px';
textArea.style.top = '-9999px';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
showCopiedFeedback(btn);
} catch (err) {
alert('Copiar enlace: ' + url);
}
document.body.removeChild(textArea);
}
function showCopiedFeedback(btn) {
btn.classList.add('copied');
var originalText = btn.querySelector('span').textContent;
btn.querySelector('span').textContent = ' Copiado';
var tooltip = document.querySelector('.copy-tooltip');
if (!tooltip) {
tooltip = document.createElement('div');
tooltip.className = 'copy-tooltip';
tooltip.textContent = ' Enlace copiado al portapapeles';
document.body.appendChild(tooltip);
}
tooltip.classList.add('show');
setTimeout(function() {
btn.classList.remove('copied');
btn.querySelector('span').textContent = originalText;
tooltip.classList.remove('show');
}, 2500);
}
</script>
<link href='https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap' rel='stylesheet'/>
</b:if>💾 Paso 4: Guarda los Cambios
Haz clic en el botón Guardar en la esquina superior derecha del editor HTML de Blogger.
👀 Paso 5: Verifica que el Widget Funcione
Abre cualquier entrada de tu blog (puede ser una ya publicada o una nueva). El widget aparecerá justo al final del contenido de la entrada.
Prueba cada botón para asegurarte de que redirigen correctamente a las redes sociales con el enlace de tu artículo.
✅ Widgets incluidos: Facebook, X (Twitter), WhatsApp, Threads, Messenger, LinkedIn, E-Mail y Copiar enlace con notificación flotante.
🔄 ¿No aparece el widget? Solución para cualquier plantilla
Es posible que al pegar el código en el primer <data:post.body/> que encontraste, el widget no se muestre. Esto es completamente normal y depende de cómo fue construida tu plantilla.
Prueba estas opciones en orden:
Primer intento: Pega el código justo después del primer <data:post.body/>. Guarda y revisa.
Segundo intento: Si no funciona, busca el segundo <data:post.body/> y pega el código allí. Guarda y revisa.
Tercer intento: Si aún no aparece, busca el tercero y repite el proceso.
La mayoría de las plantillas modernas de Blogger tienen dos o tres instancias de <data:post.body/>. Una es para la vista de entrada individual, otra para la vista de lista de entradas y otra para páginas estáticas. La que te interesa es la que corresponde a las entradas individuales (data:view.isPost).
🎨 Cómo personalizar el widget
Puedes modificar fácilmente los colores y textos del widget para que se adapten a la identidad visual de tu blog.
Cambiar el título
Busca esta línea en el código:
<h3 class='share-title'>✨ Comparte este artículo</h3>Reemplaza "Comparte este artículo" por el texto que prefieras, por ejemplo: "Difunde este contenido" o "Compártelo en tus redes".
Cambiar colores de los botones
Dentro de la sección <style>, busca las clases de cada red social y modifica el valor de background y color:
.share-btn.fb { color: #1877f2; background: rgba(24, 119, 242, 0.08); }
.share-btn.fb:hover { background: #1877f2; color: white; }Por ejemplo, para cambiar el color de Facebook a un tono más oscuro, puedes usar #0d65d9.
❓ Preguntas Frecuentes
¿El widget afecta la velocidad de carga de mi blog?
No. Todo el código es ligero, utiliza iconos SVG vectoriales (sin imágenes externas) y estilos optimizados. No carga librerías externas pesadas como Font Awesome o jQuery. Además, el widget solo se renderiza en las entradas individuales (gracias a <b:if cond='data:view.isPost'>), por lo que no afecta al rendimiento de la portada ni de otras páginas.
¿Puedo agregar o quitar redes sociales?
Sí. Para eliminar una red social, borra el bloque completo del botón correspondiente (desde <a class='share-btn...'> hasta su cierre </a>). Para agregar una nueva, puedes duplicar un bloque existente y cambiar la URL de compartición, el icono SVG y la clase CSS.
¿El botón de copiar enlace funciona en todos los navegadores?
Sí. El script incluye un fallback para navegadores antiguos que no soportan la API moderna navigator.clipboard. En esos casos, usa document.execCommand('copy') que es compatible con todos los navegadores.
¿Puedo cambiar la posición del widget?
Sí. El widget se inserta justo después del contenido de la entrada. Si quieres moverlo, busca otra ubicación dentro de tu plantilla (por ejemplo, después de las etiquetas o antes de los comentarios) y pega allí el código.
🚀 Conclusión: El Pequeño Detalle que Marca la Diferencia
Tener un blog profesional va más allá del contenido. Es cómo presentas ese contenido y cómo facilitas que los demás lo compartan. Con este widget no solo mejoras la experiencia de usuario, sino que aumentas las posibilidades de viralización y posicionamiento en buscadores.
Un botón de compartir bien diseñado puede ser la diferencia entre que un artículo se vuelva viral o pase desapercibido. Este widget está pensado para maximizar la interacción y que tus lectores se conviertan en embajadores de tu contenido.
💬 ¿Te ha funcionado? Déjame un comentario con tu experiencia o cualquier duda. ¡Estoy aquí para ayudarte!
Si te ha gustado este tutorial, no olvides compartirlo en tus redes sociales (con tu nuevo widget, claro 😉).
📢 Déjame un comentarioTutorial actualizado para Blogger
0 comments:
Publicar un comentario