17 noviembre 2024

Cómo Personalizar botones de compartir en blogger

¿Quieres que tus lectores compartan tus publicaciones fácilmente en sus redes sociales? Personalizar los botones de compartir en Blogger es una excelente manera de fomentar la interacción y aumentar tu visibilidad. En esta guía, te mostraremos cómo hacerlo paso a paso.



Paso 1: Accede a tu cuenta de Blogger

Inicia sesión en tu cuenta de Blogger y selecciona el blog donde deseas personalizar los botones de compartir.


Paso 2: Desactivar botones de compartir

  1. Ve a Diseño > Principal > Entradas del blog > Editar.
  2. Desmarcar la opción Mostrar los botones para compartir y guardamos.

Paso 3: Colocar los botones nuevo

  1. Ve a Tema y donde pone Personalizar pulsar en el desplegable y elegir Editar HTML
  2. Buscamos el código:
  3. <div class='post-footer'>
  4. Nos quedamos con el segundo.
  5. Pegamos este texto debajo:
  6. <!-- AddThis Button BEGIN -->
          <div class='addthis_toolbox' style='text-align: center;'>
          <div class='share-box'>
          <a class='addthis_button_facebook'><img alt='Compartir en facebook' height='60' src='#' width='60'/></a>
          <a class='addthis_button_twitter'><img alt='Compartir en twitter' height='60' src='#' width='60'/></a>
          <a expr:class='data:shareCss + "pinterest"' 
                expr:href='params("//pinterest.com/pin/create/button/",
                {url: data:post.url.canonical, media: data:post.firstImageUrl})'>
          	<img alt='Compartir en pinterest' height='60' src='#' width='60'/></a>  
          <a data-action='share/whatsapp/share' 
                expr:href='"whatsapp://send?text=" + data:post.title + "-" + data:post.url'><img alt='Compartir en whatsapp' 
                height='60' src='#' width='60'/></a> 
          <a class='addthis_button_email'><img alt='Compartir en correo' height='60' src='#' width='60'/></a>
          <a expr:class='data:shareCss + "telegram"' 
                expr:href='params("//telegram.me/share/url",{url: data:post.url.canonical, text: data:post.title})'>
          	<img alt='Compartir en telegram' height='60' src='#' width='60'/></a> 
          <a expr:class='data:shareCss + "googleplus"' 
                expr:href='params("//plus.google.com/share",{url: data:post.url.canonical})'>
                	<img alt='Compartir en googleplus' height='60' src='#' width='60'/></a>  
          <a expr:class='data:shareCss + "tumblr"' 
                expr:href='params("https://www.tumblr.com/widgets/share/tool/preview",{canonicalUrl: data:post.url.canonical, 
                caption: data:post.snippet, posttype: "link", title: data:post.title})'>
                	<img alt='Compartir en tumblr' height='60' src='#' width='60'/></a> 
          <a expr:class='data:shareCss + "linkedin"' 
    	expr:href='params("//www.linkedin.com/shareArticle",{mini: true, url: data:post.url.canonical, 
                title: data:post.title})'>
                	<img alt='Compartir en linkedin' height='60' src='#' width='60'/></a> 
          </div>
          </div>
          <script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script>
          <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
          <!-- AddThis Button END -->
    	
  7. Ahora ya solo queda cambiar la dirección '#' por la imagen de la red social que desees y poner el tamaño que quieras

Paso 4: Prueba los Botones

Haz una prueba para asegurarte de que los botones funcionan correctamente y redirigen a las redes sociales deseadas.

¡Listo!

Ahora tus publicaciones en Blogger cuentan con botones de compartir personalizados que invitan a tus lectores a interactuar y difundir tu contenido. ¡Optimiza tu blog y aumenta tu visibilidad en las redes sociales hoy mismo!


Si quieres leer más tips

No hay comentarios:

Publicar un comentario