Si quieres permitir que las personas puedan compartir el contenido del blog en las redes sociales, tengo los botones que buscas y que funcionan muy bien en Blogger.
¡Hola! Soy Gabriela y bienvenido a Peengler.com. Esta vez vamos agregar los botones de Facebook, Twitter, Pinterest, WhatsApp y Telegram al final de las entradas y así permitir que los visitantes/lectores puedan compartir nuestros artículos.
Por cierto, anteriormente ya he publicado sobre una plataforma de botones, por si prefieres usarlos: Botones de Compartir en Redes Sociales: Instalar y Personalizar
Sin más que decir, ¡Empecemos!
Clic en la imagen para ver el vídeo ↑ en YouTube
Instalar botones para compartir el contenido del Blog en las redes sociales
Como vez, primero debes agregar los estilos para que los botones se puedan visualizar bien, y para eso, te vas a Blogger > Tema > Editar HTML > CTRL + F para activar la casilla de búsqueda.
Busca ]]></b:skin> arriba de esta línea pegas lo siguiente:
.compartir-post{width:97%;margin:15px}
.compartir-post ul{padding:0;margin:10px auto;display:flex;max-width:100%;align-items:center;justify-content:center}
.compartir-post li{display:flex;width:100%;opacity:.8;transition:all .2s ease-out}
.compartir-post li:hover{opacity:1}
.compartir-post li a{padding:15px 5px;margin-right:4px;border-radius:5px;text-align:center;box-shadow:0 3px 4px 0 rgba(0,0,0,.08),0 2px 7px 0 rgba(0,0,0,.08),0 3px 2px -3px rgba(0,0,0,.09);color:#fff;display:flex;font-size:15px;transition:all .6s ease-out;align-items:center;flex-basis:100%;justify-content:center;text-decoration:none!important;cursor:pointer}
.compartir-post li a:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)}
.compartir-post b{font-weight:500;margin:0 15px;font-size:16px;font-family:system-ui}
.compartir-post i{display:flex;font-size:18px;margin-top:-2px}
.compartir-post li:hover{margin-top:-7px;transition:all .1s ease-out}
.compartir-post li .twitter{background-color:#1da1f2}
.compartir-post li .facebook{background-color:#4867aa}
.compartir-post li .xmail{background-color:#08c}
.compartir-post li .pinterest{background-color:#c82828}
.compartir-post li .wa{background:#0dc143}
.compartir-post li .tumblr{background-color:rgba(48,78,108,.98)}
.compartir-post li .facebook:hover,.compartir-post li .gplus:hover,.compartir-post li .pinterest:hover,.compartir-post li .tumblr:hover,.compartir-post li .twitter:hover{color:#fff}
.compartir-post li:last-child{margin-right:0}
.compartir-post li .fa:before{top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;font-size:17px;transition:all .6s ease-out}
@media (max-width:991px){.compartir-post{width:100%;margin:auto}
.compartir-post b,.compartir-post-span{display:none}}
Seguidamente, debes añadir el Font Awesome para que se puedan visualizar los iconos de las redes, busca <head> y agrega abajo de esa linea lo siguiente:
<!-- Fontawesome CDN Link -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css' rel='stylesheet'/>
Mostrar al final de la entrada los botones de compartir
Ahora nos falta es agregar los botones al final del contenido. Todavía en el código de la plantilla, busca <data:post.body/> y abajo de esta pega lo siguiente:
<div class='compartir-post'>
<ul>
<!-- facebook -->
<li>
<a class='facebook' expr:href='params("//facebook.com/sharer/sharer.php",{u: data:post.url.canonical})' rel='nofollow' target='_blank' title='Compartir por Facebook'>
<i class='fab fa-facebook-f'/><b>Facebook</b></a>
</li>
<!-- twitter -->
<li>
<a class='twitter' expr:href='params("//twitter.com/intent/tweet",{text: data:post.title, url: data:post.url.canonical})' rel='nofollow' target='_blank' title='Compartir por Twitter'>
<i class='fab fa-twitter'/><b>Twitter</b></a>
</li>
<!-- Pinterest -->
<li><a class='pinterest' expr:href='params("//pinterest.com/pin/create/button/",{url: data:post.url.canonical, media: data:post.firstImageUrl})' rel='nofollow' target='_blank' title='Compartir por Pinterest'>
<i class='fab fa-pinterest-p'/><b>Pinterest</b></a>
</li>
<!-- whatsapp -->
<li>
<a class='wa' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "-" + data:post.url' rel='nofollow' title='Compartir por Whatsapp'>
<i aria-hidden='true' class='fab fa-whatsapp'/>
<b>Whatsapp</b>
</a>
</li>
<!-- Telegram -->
<li>
<a class='xmail' expr:href='"https://telegram.me/share/url?url=" + data:post.title + "%20%2D%20" + data:post.url' rel='nofollow' target='_blank' title='Compartir por Telegram'>
<i class='fab fa-telegram-plane'/><b>Telegram</b></a>
</li>
</ul>
</div>
Guarda los cambios y listo.
Sígueme en Youtube🔥
Aprende a crear páginas web con HTML, CSS y Javascript.
☑ Puede que también te interese:
Gabriela Laya
Me gusta todo lo relacionadaoa la creación de sitios web ya sea, usando código "HTML, CSS y JS" o usando un constructor "Elementor"