Botones para compartir redes sociales en WordPress sin Plugins ni JavaScript

Como ya lo he comentado antes, la velocidad de tu web y el SEO son como culo y calzón. Usar botones para compartir redes sociales en WordPress sin plugins ni JavaScript es la manera en la que tu web carga más rápido.

Agregar botones para compartir redes sociales es básico hoy en día, es una herramienta para que tus visitantes compartan el contenido y además al traer tráfico a tu página web puedes posicionarla mejor en la búsqueda de Google.

Vamos a ver cómo agregar los botones de compartir en WordPress, que tienen que cumplir con la siguiente consigna:

  • Sin usar un plugin de WordPress
  • No cargar JavaScript
  • La velocidad del sitio no se debe comprometer

Te voy a mostrar cómo hacerlo en sólo dos pasos y un tercer paso opcional.

Para ingresar los siguientes códigos se aconseja tener un child theme o tema hijo.

Paso 1. Agregar botones de compartir a WordPress
Paso 2. Agregar CSS a los botones de compartir
Paso 3. (opcional). Agregar íconos a los botones de compartir
Bonus
Conclusión

Paso 1. Agregar botones de compartir a WordPress

Debes agregar el siguiente código en el archivo functions.php de WordPress.

function wexfly_botones_redes_sociales_liviano($content) {
global $post;
if(is_singular()){

// Obtiene la URL de la página
$wexflyURL = urlencode(get_permalink());
 
// Obtiene el título de la página
$wexflyTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
// $wexflyTitle = str_replace( ' ', '%20', get_the_title());

// Obtiene la imágen en miniatura del post para Pinterest
$wexflyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
 
// Construcción de la URL para compartir sin usar script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$wexflyTitle.'&url='.$wexflyURL.'&via=Wexfly';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$wexflyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$wexflyURL.'&text='.$wexflyTitle;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$wexflyURL.'&title='.$wexflyTitle;
$whatsappURL = 'whatsapp://send?text='.$wexflyTitle . ' ' . $wexflyURL;
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$wexflyURL.'&media='.$wexflyThumbnail[0].'&description='.$wexflyTitle;
 
// Agregando los botones de compartir al final del contenido del post
$content .= '<!-- Tu también puedes agregar los botones más rápidos que existen para compartir en redes sociales sin cargar Plugins ni JavaScript. Por más información sobre cómo implementarlo: https://wexfly.com/?p=1065 -->';
$content .= '<div class="wexfly-social">';
$content .= '<a class="wexfly-link wexfly-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="wexfly-link wexfly-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="wexfly-link wexfly-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$content .= '<a class="wexfly-link wexfly-linkedin" href="'.$linkedInURL.'" target="_blank">LinkedIn</a>';
$content .= '<a class="wexfly-link wexfly-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';
$content .= '<a class="wexfly-link wexfly-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank">Pin It</a>';
$content .= '</div>';

return $content;
}else{
// Si no es un post entonces no agregar los botones de compartir
return $content;
}
};
add_filter( 'the_content', 'wexfly_botones_redes_sociales_liviano');

El código se verá en todos tus posts, si quieres por ejemplo que se vea también en la página principal puede sustituir is_singular() por is_singular() || is_home(), en la página oficial de WordPress puedes ver más sobre los conditional tags.

Paso 1. Resultado de los enlaces sociales luego de agregar el código en functions.php

Paso 2. Agregar CSS a los botones de compartir

Ahora a agregar los estilos CSS en el archivo style.css de tu theme WordPress:

/* Botones de compartir en redes sociales por Wexfly.com */
/* Más información en https://wexfly.com/?p=1065 */

.wexfly-link {
    padding: 2px 8px 4px 8px !important;
    color: white;
    border-radius: 2px;
    margin-right: 2px;
    cursor: pointer;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    display: inline-block;
    text-decoration: none;
    font-size: .9rem;
}

.wexfly-link:hover,.wexfly-link:active, .wexfly-link:visited{
    color: white;
	opacity: 0.8;
}

.wexfly-twitter {
    background: #00aced;
}

.wexfly-facebook {
    background: #3B5997;
}

.wexfly-buffer {
    background: #444;
}

.wexfly-linkedin{
	background: #0074A1;
}
.wexfly-whatsapp {
    background: #25D366;
}

.wexfly-pinterest {
    background: #bd081c;
}

.wexfly-social {
    margin: 1em 0;
}

Puedes jugar como quieras con estos estilos.

Paso 2. Botones sin íconos para compartir redes sociales en WordPress sin Plugins ni JavaScript

Paso 3 (opcional). Agregar íconos a los botones de compartir

Con sólo agregar algo de CSS es suficiente y los botones quedan bien ligeros de peso, sustituye el CSS anterior por este:

/* Botones de compartir en redes sociales por Wexfly.com */
/* Más información en https://wexfly.com/?p=1065 */

.wexfly-link {
    padding: 2px 8px 4px 30px !important;
    color: white;
    border-radius: 2px;
    margin-right: 2px;
    cursor: pointer;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    display: inline-block;
    text-decoration: none;
    font-size: .9rem;
}

.wexfly-link:hover,.wexfly-link:active, .wexfly-link:visited{
    color: white;
    opacity: 0.8;
}

.wexfly-twitter {
    background: #00aced url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABH0lEQVQ4jc3TsWpTYRjG8ee0TqWFoIOdHAQrpSjSbraCjsW5N1Do0EV6A516D16COOni4tKpS6Y4uHRp0yUkoGAIbpKfQ3IgkHOSFDr0D9/yfS//933g/ZJ7CRoL1BzgJ/poYR8FdrEVPEYbz2ZIjk0zRA8XeBTsjR86eF8hWcWgQlTKWjgKnowvSj7j9YRop0ZScjLZ9UtFwSU+4eMc0fMkeYAXSTpJBknWJlJtjM88uuU0Dfyd07WO69K2VBTFnySnC3Su4vvUDQ5xc4tphnhVJfp2y1hfK2c0WswfC0p6WK8NjGWjr9CdIenjzSzJU3zA1QxJG9t1grdozonyC2dYqRukmBC+TPIuyWaSh0l+Z7SozSTnRVH8q41zl/wHSbZfiHFEmNkAAAAASUVORK5CYII=)
    8px center/18px 18px
    no-repeat;
}

.wexfly-facebook {
    background: #3B5997 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAArElEQVQ4je2UMQ4BURRFzxNRqBSiVU2htgFrsAON2nYUKrEa9iCjVlFIhBzNV8hMzIwoFE7z/k/ev+/kFR++RNRpUnvAEDgDeUTcG01RO+rGV7LGuurCIqVB7YqsSao5MANOwOETo22yWFX1FozUPjBN10GqmTpP53VEXOpYjEv28uSqlq6jVZn8yj4ibg3fgLpLJsuq3qZG/6BfCHr7jagjoAscIyL/1tC3PAB10H3uBVYBiwAAAABJRU5ErkJggg==)
    8px center/18px 18px
    no-repeat;
}

.wexfly-buffer {
    background: #444 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABD0lEQVQ4jdXTL0vDURSH8eMsGvw3cJgUBEEQhSEGQZvFYPQd+B4EWRCT1Wg1m7QYDb4EDfMVWGTCRGTlYznC+HE3hgbxwimX5/ucc7jciH93MIvZ3wiWcI43vOMSK4P4WkGwgauIeI6ItYjYj4jdiJiMiEfcYmvYBDsJfeIKqwVmGRf4wAMOqsB8hnu4x/aQhtvJ9DIzX4IWcIpOdjzEOMawlxN3c6rFkqCBO7QwjTmc4AVPWS95N5dMKzONqmwTN3jtE07gKGuiT/Ca7GZpqtoQYVHwnamu1sY11ivCTla/YD3Zdmm1Os4y1C9solkRdJKtD3rdknAjazRBQTiF4wx387uMLigIZzDzY8GfnS9LGsHH4kL3swAAAABJRU5ErkJggg==)
	8px center/18px 18px
	no-repeat;
}

.wexfly-linkedin {
    background: #0074A1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAAx0lEQVQ4jd2OMWoCQRiFv1lDUoiB2NiYKtpKGhFyisU+ra2lZwmYQ+QawRwgYGNnJ7EJSNjPZsWBGNlBAuJXvXn8782D/0Btq81TS3L1R12r3dR8FuknoAY0gMdTFt2rb+pUvUnNh8TP6kAH2ACfIYTi0NGLe0alNyvf3+qz+hXdzNXeLp/9ajzMNfAK3EbeAzBNLcqADyAHJoCl31fvAK4qFgGMQwjvAOoQGJR+C1hVXQSwiPQy0vXd5KoUf2hSi45yfkUXzBa+3WpCv5AzwwAAAABJRU5ErkJggg==)
    8px center/18px 18px
    no-repeat;
}

.wexfly-whatsapp {
    background: #25D366 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABKUlEQVQ4ja3UPy+sQRTH8fPYXeFKdKKRm2i8Df8a7iuQ3Fq8C4lGd0UEr4BKo7M2UUi8BY3u6nQ3JNgt7kexzzIY+1jxayYz8zvfM+dMZiK+SUW/TfyIiJ/l9G9RFA8D0bGIFjpe1MEpFj4DqGNftXZR7wfa+wSkp51+5aRq4l8FbC4HaiWGw3JtvQLU7MUPlQFjEZHSL8vxrKKt87o32wVFxFRENBLDUjn+rgANl7HPZU1njr2GSVyV81vcZ3wzKaiG9hvDI5Yxjj+YxwQOEk8bo6/OiONMtg42MZ74tpL9k3fF4tcHN9PLfIZz/E/WZ3Og1T6gnLaz7cfRIBDUcpAabnCBDazo9ix9tG2cZMuJ8htBIyJGiqK4e5OgHt1vpBER1wN/I1/RE0MsYzjUSgIRAAAAAElFTkSuQmCC)
    8px center/18px 18px
    no-repeat;
}

.wexfly-pinterest {
    background: #bd081c url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABm0lEQVQ4ja2US0uVURSGn216QopSvEyUUoIunoGjCLqROGsUITgwkJrV1Gm/Q01p0si/YNQPiHDQlSDoKDoqAgsVPXB8GrQObb7zqUG9o7XX+653r7W+C/wnpIMItRsYB84AAuvAi5TS5l85q/3qglq3FXV1Xu07yqSqrpUYFLGqVktHU/uB1zEKwAbwDHgD7AIjwH3gfPBrwOWU0rdiNwvZjUtqpzqg3lPvqD1qh/ok0821LDbbyXu1ok6p21nRd/Wm2qa+ityeejo3msgKHqmD6o46p46pP4P7FPoHmf4uQHt4nc0afAfcAI4DMymlHfULMApcUE8BnzP9EEBbHI5lRDewFfG+egK4FOc6sA10UUDTqJblJoFl4CtwErgFVIJ7nlJqAGOZ/k+t2heLU91XH6srwV1Rd9UP6rl4kpuly46Cp4WXbjHy19RKxBfVt5lmtjhis6v1TDQdtzeieCXiJmpqb4tRmFXVjRBeVx9ajpo6UmqSmfWqi+pV9WPBYE+dLevksN9IJ3AbGAYa/P62XqaUfhzayb/iF3U6DFu/CgOSAAAAAElFTkSuQmCC)
    8px center/18px 18px
    no-repeat;
}

.wexfly-social {
    margin: 20px 0;
}
Botones con íconos para compartir redes sociales en WordPress sin Plugins ni JavaScript
Paso 3. Botones con íconos para compartir redes sociales en WordPress sin Plugins ni JavaScript

Bonus

Si quieres quitar botones que no necesitas puedes editar el código arriba eliminando la línea según la red social, te dejo un ejemplo quitando WhatsApp.

Elimina las siguientes líneas del archivo functions.php:

$whatsappURL = 'whatsapp://send?text='.$wexflyTitle . ' ' . $wexflyURL;
$content .= '<a class="wexfly-link wexfly-whatsapp" href="'.$whatsappURL.'" target="_blank">WhatsApp</a>';

Elimina las siguientes líneas del archivo style.css:

.wexfly-whatsapp {
    background: #25D366;
}

Ó en caso de tener imágenes en los botones elimina la siguiente línea:

.wexfly-whatsapp {
    background: #25D366 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAABKUlEQVQ4ja3UPy+sQRTH8fPYXeFKdKKRm2i8Df8a7iuQ3Fq8C4lGd0UEr4BKo7M2UUi8BY3u6nQ3JNgt7kexzzIY+1jxayYz8zvfM+dMZiK+SUW/TfyIiJ/l9G9RFA8D0bGIFjpe1MEpFj4DqGNftXZR7wfa+wSkp51+5aRq4l8FbC4HaiWGw3JtvQLU7MUPlQFjEZHSL8vxrKKt87o32wVFxFRENBLDUjn+rgANl7HPZU1njr2GSVyV81vcZ3wzKaiG9hvDI5Yxjj+YxwQOEk8bo6/OiONMtg42MZ74tpL9k3fF4tcHN9PLfIZz/E/WZ3Og1T6gnLaz7cfRIBDUcpAabnCBDazo9ix9tG2cZMuJ8htBIyJGiqK4e5OgHt1vpBER1wN/I1/RE0MsYzjUSgIRAAAAAElFTkSuQmCC)
    8px center/18px 18px
    no-repeat;
}

Conclusión

Con éste método de agregar botones para compartir redes sociales en WordPress sin Plugins y sin JavaScript se está priorizando la velocidad de tu sitio web, es cierto que es más «manual» y que no puedes ver estadísticas sobre los artículos compartidos.

Tampoco puedes cambiar la posición donde se verá en el sitio, o los colores si no lo haces a «mano» directamente en el archivo functions.php o style.css, pero al final lo que importa aquí es la velocidad de carga de tu sitio web.

El uso de plugins o usar JavaScript va a ralentizar tu web.

Al final es un balance entre velocidad y prestaciones.

Comparte: Te gusto o te ha parecido útil este artículo? Considera compartirlo con tus amigos, me será de gran ayuda para seguir creciendo.

TwitterFacebookBufferLinkedInWhatsAppPin It

Deja un comentario