Botones para compartir en redes sociales personalizados
En esta ocasión he desarrollado botones personalizados para compartir en blogger. Los botones personalizados siempre tendrán mejor rendimiento que los botones oficiales proporcionados por las redes sociales, ya que los oficiales cargan recursos externos.

See the Pen Simple Share Buttons by Daniel (@zkreations) on CodePen.


Contenido


Instalar

Primero vamos a agregar los estilos correspondientes, para ello ve Temas  Personalizar  Opciones avanzadas  Agregar CSS y pega el siguiente código:

/*!
 * Simple Social Buttons v2.0
 * Copyright 2020 zkreations
 * Daniel Abel M. (fb.com/danieI.abel)
 * Licensed under MIT (github.com/zkreations/plugins/blob/master/LICENSE)
 */
 /*! Core (No modificar) {{*/
.nshare {
  box-sizing: border-box;
  margin-top: calc(var(--nshare-spacing) * -1);
  margin-right: calc(var(--nshare-spacing) * -1);
}
.nshare-item {
  margin-right: var(--nshare-spacing);
  margin-top: var(--nshare-spacing);
}
.nshare-item,
.nshare-item:hover,
.nshare-item:active {
  text-decoration: none;
  color: inherit;
}
.nshare-item {transition: background .3s, color .3s;}
.nshare-item i {
  transition: transform .3s;
  margin: 0;
}
.nshare, .nshare-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.nshare-fb {background-color: var(--nshare-facebook);}
.nshare-tt {background-color: var(--nshare-twitter);}
.nshare-pt {background-color: var(--nshare-pinterest);}
.nshare-tb {background-color: var(--nshare-tumblr);}
.nshare-rd {background-color: var(--nshare-reddit);}
.nshare-vk {background-color: var(--nshare-vk);}
.nshare-ws {background-color: var(--nshare-whatsapp);}
.nshare-tlg {background-color: var(--nshare-telegram);}
.nshare-msj {background-color: var(--nshare-email);}

.nshare-fb:hover {color: var(--nshare-facebook);}
.nshare-tt:hover {color: var(--nshare-twitter);}
.nshare-pt:hover {color: var(--nshare-pinterest);}
.nshare-tb:hover {color: var(--nshare-tumblr);}
.nshare-rd:hover {color: var(--nshare-reddit);}
.nshare-vk:hover {color: var(--nshare-vk);}
.nshare-ws:hover {color: var(--nshare-whatsapp);}
.nshare-tlg:hover {color: var(--nshare-telegram);}
.nshare-msj:hover {color: var(--nshare-email);}

.nshare-item:hover i {transform: rotate(360deg);}
/*}} Fin del core {{*/

/*! Personalización */
/* Contenedor
-----------------------------------------*/
.nshare {
  --nshare-spacing: .5rem; /* separacion interna */
  padding-top:0; /* separacion superior */
  padding-bottom:0; /* separacion inferior */
}
/* Redes sociales
-----------------------------------------*/
.nshare {
  --nshare-facebook: #1778F2;
  --nshare-twitter: #55ACEE;
  --nshare-pinterest: #F0002A;
  --nshare-tumblr: #35465C;
  --nshare-reddit: #FF4500;
  --nshare-vk: #4376A6;
  --nshare-whatsapp: #4FCE5D;
  --nshare-telegram: #0088CC;
  --nshare-email: #464EB8;
}
/* Botones
-----------------------------------------*/
.nshare-item {
  font-size: 22px; /* tamaño de iconos */
  width: 48px; /* ancho */
  height: 48px; /* alto */
  border-radius: .5rem; /* bordes redondeados */
  color: #fff; /* color */
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1),
              0 2px 5px -1px rgba(0,0,0,.05); /* sombra */
}
.nshare-item:hover {
  background-color: #fff; /* fondo (hover) */
}

No olvides guardar los cambios. Ahora ve a Temas  Editar html, busca <b:includable id='status-message'> y justo arriba de eso pega lo siguiente:

<b:includable id='postNewShare'>
   <div class='nshare'>
   <b:with value='data:post.shareUrl ?: data:post.sharePostUrl' var='share'>
      <b:with value='data:view.url.canonical' var='url'>
         <b:loop index='i' values='{"facebook","twitter","pinterest"}' var='target'>
            <a class='nshare-item' expr:href='params(data:share,{target: data:target})' target='_blank'>
               <b:class expr:name='"nshare-" + (data:i == 0 ? "fb" : (data:i == 1 ? "tt" : "pt"))'/>
               <i expr:class='"fab fa-" + data:target'></i>
            </a>
         </b:loop>
         <b:with value='"nshare-item nshare-"' var='class'>
            <!-- tumblr -->
            <a expr:href='params("https://tumblr.com/share",{canonicalUrl: data:url})' target='_blank'>
               <b:class expr:name='data:class + "tb"'/><i class="fab fa-tumblr"></i>
            </a>
            <!-- reddit -->
            <a expr:href='params("https://reddit.com/submit",{url: data:url, title: data:post.title})' target='_blank'>
               <b:class expr:name='data:class + "rd"'/><i class="fab fa-reddit-alien"></i>
            </a>
            <!-- vk -->
            <a expr:href='params("https://vk.com/share.php",{url: data:url})' target='_blank'>
               <b:class expr:name='data:class + "vk"'/><i class="fab fa-vk"></i>
            </a>
            <!-- whatsapp -->
            <a expr:href='params("https://api.whatsapp.com/send",{text: data:url})' target='_blank'>
               <b:class expr:name='data:class + "ws"'/><i class="fab fa-whatsapp"></i>
            </a>
            <!-- telegram -->
            <a expr:href='params("https://t.me/share/url",{url: data:url})' target='_blank'>
               <b:class expr:name='data:class + "tlg"'/><i class="fab fa-telegram-plane"></i>
            </a>
            <!-- email -->
            <a expr:href='params(data:share,{target: "email"})' target='_blank'>
               <b:class expr:name='data:class + "msj"'/><i class="fas fa-envelope"></i>
            </a>
         </b:with><!--/ data:class -->
      </b:with><!--/ data:url -->
   </b:with><!--/ data:share -->
   </div><!--/ .nshare -->
</b:includable>

Como último paso vamos a especificar el sitio en donde deseamos mostrar los botones, el lugar más común suele ser debajo de <data:post.body/>, asi que busca eso y debajo pega el siguiente código:

<b:include cond='data:post.sharePostUrl or data:post.shareUrl' name='postNewShare'/>

Si quieres ubicar los botones en otro lugar solo debes tener en cuenta que sea dentro de un bucle <b:loop> con la tabla posts, perteneciente al widget con datos data:Blog.

Observaciones

Los iconos no cargan

Estos botones utilizan la librería de iconos Font Awesome, por lo tanto, si no puedes ver los iconos quiere decir que no tienes los iconos instalados, para resolverlo busca </body> y arriba de eso agrega el siguiente código:

<link href='//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css' rel='stylesheet'/>

Remover botones antiguos

Probablemente al instalar estos botones notarás que tienes 2, en donde uno de ellos son los que vienen por defecto en tu plantilla. Para removerlos, busca el siguiente código:

<b:include name='postShare'/>

Y elimínalo. En caso de no encontrar el código anterior, puede que estés usando un tema basado en Layout 2 de Blogger, en ese caso, el código que debes buscar y eliminar es el siguiente:

<b:include name='shareButtons'/>

Si aun no logras eliminar tus botones anteriores, házmelo saber en los comentarios, intentaré ayudarte.

Conclusión

Eso ha sido todo por ahora, no olvides compartir estos botones de compartir (valga la redundancia). Si tienes alguna duda déjala en los comentarios, respondo a todos siempre que puedo. Gracias por pasar.