Botones compartir entradas sin plugin


Existen diversos plugins para insertar botones compartir entradas en redes sociales, sin embargo en este artículo les mostraré cómo hacerlo sin ellos.

¿Por qué hacerlo de esta forma?

Si lo hacemos “a mano”, tendremos el control completo de esta utilidad y no vamos a depender de las actualizaciones de terceros.

También podremos modificar a nuestro gusto la parte visual y agregar la cantidad de botones que queramos.

Comencemos

Debemos abrir el archivo functions.php de nuestro theme y agregar el siguiente código al final. Si tu archivo functions.php termina con ?>, entonces el código se deberá insertar antes de esa etiqueta.

//Share redes sociales
function botones_redes($content) {
   global $post;
   $permalink = get_permalink($post->ID);
   $title = get_the_title();
   $excerpt= get_the_excerpt();
   global $post;
   $thumbID = get_post_thumbnail_id( $post->ID );
   $imgDestacada = wp_get_attachment_url( $thumbID );
   if(!is_feed() && !is_home() && !is_page()) {
      $content = $content . '<br><div class="botones-redes">
      <h3>Comparte esta entrada</h3>
      <a class="icon-twitter" href="http://twitter.com/share?text='.$title.'&url='.$permalink.'"
onclick="window.open(this.href, \'twitter-share\', \'width=550,height=235\');return false;">
         <span>Twitter</span>
      </a>
      <a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
onclick="window.open(this.href, \'facebook-share\',\'width=580,height=296\');return false;">
         <span>Facebook</span>
      </a>
      <a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
onclick="window.open(this.href, \'google-plus-share\', \'width=490,height=530\');return false;">
         <span>Google+</span>
      </a>
      <a class="icon-tumblr" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title='.$title.'&name='.$title.'&caption='.$excerpt.'&content='.$imgDestacada.'&photo-clickthru='.$permalink.'&canonicalUrl='.$permalink.'&shareSource=tumblr_share_button"
onclick="window.open(this.href, \'tumblr-share\', \'width=490,height=530\');return false;">
         <span>Tumblr</span>
      </a>
      <a class="icon-linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url='.$permalink.'"
onclick="window.open(this.href, \'linkedin-share\', \'width=490,height=530\');return false;">
         <span>LinkedIn</span>
      </a>
      <a class="icon-reddit" href="http://www.reddit.com/submit?url='.$permalink.'&title='.$title.'"
onclick="window.open(this.href, \'reddit-share\', \'width=490,height=530\');return false;">
         <span>Reddit</span>
      </a>
      <a class="icon-pinterest" href="http://pinterest.com/pin/create/button/?url='.$permalink.'&media='.$imgDestacada.'&description='.$excerpt.'"
onclick="window.open(this.href, \'pinterest-share\', \'width=490,height=530\');return false;">
         <span>Pinterest</span>
      </a>
      </div>';
   }
   return $content;
}
add_filter('the_content', 'botones_redes');

El código principal no es mio y realmente desconozco de quien sea, ya que aparece en muchos lugares. Sin embargo, agregué algunos botones adicionales y un poco más de código para obtener datos necesarios.

Detallando el código

A continuación detallaré parte del código anterior.

function botones_redes($content) {

Este es el inicio de la función el que incluye su nombre.

global $post;
$permalink = get_permalink($post->ID);
$title = get_the_title();
$excerpt= get_the_excerpt();
$thumbID = get_post_thumbnail_id( $post->ID );
$imgDestacada = wp_get_attachment_url( $thumbID );

En esta parte del código genero las variables a utilizar dentro del mismo. El enlace del artículo, el titulo, la breve descripción, el thumbnail y la imagen destacada.

if(!is_feed() && !is_home() && !is_page()) {

Acá le decimos que ejecute lo que sigue sólo si no es el feed, la página de inicio o una página.

$content = $content . '<br><div class="botones-redes">

Y desde este código en adelante van los botones con sus respectivos atributos.

El resultado es el siguiente:

No se ve muy bien que digamos. Así que le aplicaremos CSS.

Aplicando estilos

Tenemos 2 opciones de aplicar estilos. Una es directamente al archivo style.css o si el theme lo permite, desde la personalización CSS adicional.

Antes de ir al código CSS, necesitaremos incluir a nuestro theme una fuente llamada Genericons. Pueden ver como incluir esta fuente en ESTE ARTICULO.

El código a aplicar lo pondré en partes e intentaré detallar lo que hace.

.botones-redes {
   border: 2px solid #000;
   text-align: center;
   background: #0001;
   border-radius: 15px;
   padding: 5px;
}

Este es el estilo principal del DIV en el cual se realizan las siguientes configuraciones:

  • Le daremos un borde de 2 pixeles y de color negro.
  • El texto en general (incluyendo iconos) estará alineado al centro.
  • El fondo sera de un color plomizo.
  • Las 4 esquinas estaran redondeadas 15 pixeles.
  • Tendrá una separación interior de 5 pixeles dando un poco de espacio interno.
.botones-redes h3:before {
   font-family: Genericons;
   content: '\f415';
   color: #000;
   margin-right: 20px;
   vertical-align: middle;
}

Acá configuramos la etiqueta H3:

  • Llamamos a la fuente Genericons.
  • Le decimos que el icono SHARE cuyo código es el \f415 se muestre.
  • Será de color negro.
  • Tendrá una separación de 20 pixeles del texto a la derecha.
  • La alineación vertical estará al medio.
.botones-redes a {
   background: #ccc;
   border-radius: 50%;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   margin: 2px 4px;
   overflow: hidden;
   width: 30px;
   text-decoration: none;
}

Esto es para todas las etiquetas A (que contendrán los iconos):

  • Fondo plomo oscuro.
  • Circular (esquinas redondeadas hasta hacer un círculo).
  • Mostrará los iconos en la misma linea.
  • Tendrán una altura de 30 pixeles.
  • Alineación vertical.
  • Margen vertical de 2px y horizontal de 4px.
  • Ajustará el contenido y el que no alcance, no lo mostrará.
  • Ancho de 30 pixeles.
  • No mostrará el subrayado de hipervinculo (link, url, enlace).
.botones-redes a:hover {
   background: #ddd;
   text-decoration: none;
}

Cuando se pose el mouse encima de un icono de redes sociales:

  • Cambiará el fondo a un plomo más claro.
  • No mostrará el subrayado de hipervinculo (link, url, enlace).
.botones-redes a:before {
   color: #00ABEC;
   font-family: Genericons;
   content: '\f202';
   padding: 10px 7px;
}

Muestra el primer icono (twitter):

  • Color del icono celeste o similar.
  • Llama a la fuente Genericons.
  • Muestra el icono de twitter.
  • Espacios internos vertical y horizontal.
.botones-redes a:hover:before {
   color: #000;
}

Cuando se pone el mouse encima del icono este cambia de color a negro.

El código completo es el siguiente:

.botones-redes h3:before {
   font-family: Genericons;
   content: '\f415';
   color: #000;
   margin-right: 20px;
   vertical-align: middle;
}
.botones-redes {
   border: 2px solid #000;
   text-align: center;
   background: #0001;
   border-radius: 15px;
   padding: 5px;
}
.botones-redes a {
   background: #ccc;
   border-radius: 50%;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   margin: 2px 4px;
   overflow: hidden;
   width: 30px;
   text-decoration: none;
}
.botones-redes a:hover {
   background: #ddd;
   text-decoration: none;
}
.botones-redes a:before {
   color: #00ABEC;
   font-family: Genericons;
   content: '\f202';
   padding: 10px 7px;
}
.botones-redes .icon-fb:before {
   content: '\f204';
   color: #3F5C9A;
}
.botones-redes .icon-gplus:before {
   content: '\f218';
   color: #D5482D;
}
.botones-redes .icon-tumblr:before {
   content: '\f214';
   color: #36465d;
}
.botones-redes .icon-linkedin:before {
   content: '\f207';
   color: #36465d;
}
.botones-redes .icon-reddit:before {
   content: '\f222';
   color: #36465d;
}
.botones-redes .icon-pinterest:before {
   content: '\f209';
   color: #36465d;
}
.botones-redes a:hover:before {
   color: #000;
}

Y el resultado sería el siguiente:

NOTA: Es posible que el código genere algún problema si no se incluye un extracto en las entradas. Para evitar el error, debemos quitar estas tres lineas:

$excerpt= get_the_excerpt();
&caption='.$excerpt.'
&description='.$excerpt.'