En este tutorial, aprenderás a agregar botones de compartir en redes sociales a tu sitio de WordPress utilizando un shortcode. Este código permitirá que los visitantes compartan tus publicaciones en WhatsApp, Facebook, Twitter/X y LinkedIn.
Paso 1: Agregar el Código en functions.php
Para implementar esta funcionalidad, debes agregar el siguiente código en el archivo functions.php de tu tema o en un plugin de funciones personalizadas.
function enqueue_social_share_styles() {
if (!wp_style_is('font-awesome', 'enqueued')) {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', [], '6.4.0');
}
}
add_action('wp_enqueue_scripts', 'enqueue_social_share_styles');
function custom_social_share_buttons_shortcode() {
$current_url = urlencode(get_permalink());
$current_title = urlencode(get_the_title());
ob_start();
?>
<style>
.custom-social-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.custom-social-buttons a {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #184e4f;
color: white !important;
text-decoration: none;
transition: all 0.3s ease;
}
.custom-social-buttons a:hover {
opacity: 0.8;
transform: translateY(-2px);
}
.custom-social-buttons i {
font-size: 12px;
}
.share-icon {
font-size: 22px;
color: #1f9489;
margin-right: 5px;
}
</style>
<div class="custom-social-buttons">
<span class="share-icon"><i class="fas fa-share-alt"></i></span>
<a href="https://api.whatsapp.com/send?text=<?php echo $current_title . '%20' . $current_url; ?>" target="_blank" rel="nofollow" aria-label="Compartir en WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $current_url; ?>" target="_blank" rel="nofollow" aria-label="Compartir en Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/intent/tweet?url=<?php echo $current_url; ?>&text=<?php echo $current_title; ?>" target="_blank" rel="nofollow" aria-label="Compartir en Twitter/X">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $current_url; ?>&title=<?php echo $current_title; ?>" target="_blank" rel="nofollow" aria-label="Compartir en LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<?php
return ob_get_clean();
}
add_shortcode('social_share_buttons', 'custom_social_share_buttons_shortcode');
Paso 2: Insertar los Botones en una Publicación o Página
Una vez que hayas agregado el código, puedes usar el siguiente shortcode en cualquier página, publicación o widget para mostrar los botones de compartir:
[social_share_buttons]
Explicación del Código
1. Carga de FontAwesome
El código incluye la biblioteca de iconos FontAwesome para mostrar los iconos de las redes sociales.
2. Estilos Personalizados
Se agregan estilos CSS para dar forma a los botones de compartir y al icono de "Share".
3. Generación de Enlaces Compartibles
El código obtiene la URL y el título de la página y los convierte en un formato compatible con cada red social.
4. Shortcode para Mayor Flexibilidad
El uso de un shortcode permite insertar los botones fácilmente en cualquier parte del sitio sin necesidad de editar archivos de plantilla.
Con este sencillo snippet, puedes agregar botones de compartir en redes sociales a tu sitio de WordPress de manera fácil y rápida. Esto ayudará a aumentar la interacción y visibilidad de tu contenido en distintas plataformas.