Botonera flotante para compartir entradas en redes sociales

Hace tiempo que las antiguas formas de conectar las redes sociales se han quedado desactualizadas y los enlaces de compartir han ido cambiando, por lo que muchos de ellos daban fallos o no terminaban de funcionar del todo bien al intentar llevarse los datos del artículo (básicamente la url y el título de la entrada).

Para solucionar esto, he preparado un nuevo sistema unificado que junta todos los botones en una sola columna vertical flotante muy limpia y elegante situada a la izquierda de la pantalla. Este diseño incluye tanto tus perfiles fijos (como Instagram o TikTok) como los botones inteligentes de compartir (Facebook, X, Pinterest, WhatsApp y Telegram), los cuales detectan automáticamente el título y la dirección exacta de la entrada que tus lectores estén visitando en ese momento, con un estilo visual moderno y adaptado para cualquier dispositivo.

La demo la podéis ver a la izquierda en este mismo post.

Una nota. Como habrás podido comprobar si trasteas habitualmente con tu plantilla, los botones de compartir utilizan variables internas del sistema de Blogger (data:blog.canonicalUrl y data:blog.pageTitle). Por esta razón, no se pueden añadir mediante un gadget de tipo HTML/JavaScript, ya que los gadgets están aislados y no pueden leer esas variables. La única forma de que funcionen es pegando el código directamente dentro del código HTML de tu plantilla.

Pasos a seguir:

1. Entra en tu panel de Blogger: Dirígete a blogger.com con tu cuenta.
2. Accede al editor de código:
   • En el menú de la izquierda, haz clic en Tema.
   • Haz clic en la flecha pequeña situada al lado del botón Personalizar y selecciona Editar HTML.
3. Busca la etiqueta de cierre:
   • Dentro del editor de código, haz clic en cualquier parte y pulsa las teclas Ctrl + F (en Windows) para abrir el buscador interno.
   • Escribe exactamente </body> y pulsa Enter.
4. Pega el código: Copia todo el código que aparece más abajo y pégalo justo encima de la etiqueta </body> que acabas de localizar.
5. Guarda los cambios: Haz clic en el icono del disquete (guardar) situado en la esquina superior derecha de la pantalla.

No olvides cambiar lo marcado por tu propia dirección de perfil.

<style>
.botonera-unica {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 6px;
background: rgba(255, 255, 255, 0.95);
padding: 8px 4px;
border-radius: 0 8px 8px 0;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
.botonera-unica a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0;
padding: 0;
text-decoration: none;
transition: transform 0.3s ease, background 0.3s ease;
border-radius: 4px;
}
.botonera-unica a:hover {
transform: scale(1.15);
background: rgba(0, 0, 0, 0.05);
}
.botonera-unica img {
width: 24px;
height: 24px;
object-fit: contain;
}
</style>

<div class="botonera-unica">

<!-- Compartir en Facebook -->
<a expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.canonicalUrl' target="_blank" title="Compartir en Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijx0N-gAzJUs6tu1kX-Bzq9o1osoU5KvQhTj3R1EB5ilRJPUttn3Hh938WnAlZc9S8BCFJyF7i2DUdzgdOIEqclf_cijwmwDmTMuagoNPlQemGd-oK9K8bUCL6vtSWUgAssqBunx9Ja3L-nUfkO0eb3AnSiSk52vKAGkm-0dJoxCEh6b4heTFAaNqHZrc/s40/facebook.png" alt="Facebook"/>
</a>

<!-- Compartir en X / Twitter -->
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.canonicalUrl + "&text=" + data:blog.pageTitle' target="_blank" title="Compartir en X"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKo9gSsM-zHTfB49gUJu3GtdYDwzYg9e5kuVVCPsiAgNVPZwm8RidhTDkKjxxM8p2mLDeBN3nBt_pHF-wIeuUCZCKTr4BFU2p3XFGTkTKQj4X1uMRfojoYmviw96goUvQOyEGif_JTOgAn1iVpdO7Ehysp8pow7BxPQoAamunW9G-S41gwBCJCVpz5JW4/s40/twitter.png" alt="X / Twitter"/>
</a>

<!-- Compartir en Pinterest -->
<a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:blog.canonicalUrl + "&description=" + data:blog.pageTitle' target="_blank" title="Compartir en Pinterest">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvE3u_U0BU2cbUVlkw9hX_G7RUT_Uw3k0DxTF4_W1q2AxMXYniIqxcmFkDzPw3mp9oeD8rHLWKAAucqn73mHOLldiYrobhQyG6vqJNSamQAJQcA84NlxvwtSxSN9smfD5UgVUcTc6uYV_0Fq6m1dyhuPR1Dd_jgdvOntfweeCgluc6hyZcn_a-CZfoDg/s40/pinterest.png" alt="Pinterest"/>
</a>

<!-- Compartir en WhatsApp -->
<a expr:href='"https://api.whatsapp.com/send?text=" + data:blog.pageTitle + " %20" + data:blog.canonicalUrl' target="_blank" title="Compartir en WhatsApp">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhycopWXtMxNiIhNhD24yxb2Clp37OQzfsGoNKnNDP5f4zEY3uQfMo_q-k86gYv2UsBKqfjcK2UoU5vqs6QEOyvPsdOBntyO9f9EaIv1nXvdakzhIzVhk9ReaXE50YZJlwFx0ehzv9n1N5P22qxPhX5j_f6Ox-B_53blicRGik2FYLtoxPFgpzYDN7MG24/s40/whatsapp.png" alt="WhatsApp"/>
</a>

<!-- Compartir en Telegram -->
<a expr:href='"https://t.me/share/url?url=" + data:blog.canonicalUrl + "&text=" + data:blog.pageTitle' target="_blank" title="Compartir en Telegram">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxVV7dYec8e2lXXdq05vlyLeMldxkSsTMC6L-8k1Gd5qyHSt2VmVuc1atIiGv0eheIIOefZzr6pyDKp6wXVTYgsA19VePZK-WYniJOijdJrIMPNGfsj4_I0pro0D_9e0GukcaaV-jxuIMOy1PRkb7F7Cy3CAnTu7FJp32UfiVWzUDhiMlOPw6N116918/s40/telegram.png" alt="Telegram"/>
</a>

<!-- Perfil de Instagram -->
<a href="https://www.instagram.com/oloblogger" target="_blank" title="Síguenos en Instagram">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr86b4XO8saFD446pFVfvYE4w9AsTm4VNo58p9mTG-0zKfDRtzFZTkVb1N3MffipTWgiBTvel9yU4Xs_gRJi_sBwTx45CTnM7UpbIFrEqxdykXdHvMwULEy_9DGbT_xqh5oG2kOEpZdROwqL17Hcq7CZwHJqjJqbZwK3uB06wVdqePNipY0zWzY7HX8bA/s40/instagram.png" alt="Instagram"/>
</a>

<!-- Perfil de TikTok -->
<a href="https://www.tiktok.com/@oloblogger" target="_blank" title="Síguenos en TikTok">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyphenhyphenzcKtcD-1kmr-4isQ0VpVIMOQJVw55HAg0HEJMVVya2b14BBUQYb9acKw4qevDhDQiJJ8ivGRU-yz3O5DmocCE9JRLpnPZgjtL0IxtmUX8OaexrAlphbXA__xqyzOPayUQUhXhg-Pf3pEh2Oo_GUr7k4Lq3YGAR99_pwrOwh4F0hmFgTdU4vJ9zABBk/s40/tiktok.png" alt="TikTok"/>
</a>
</div>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter