¿Quieres aumentar el engagement de tu sitio WordPress con botones de compartir atractivos y personalizados? En este tutorial, te enseñaré a crear un shortcode que muestra iconos de redes sociales (Facebook, Twitter, WhatsApp, etc.) con estilos CSS y Font Awesome, sin necesidad de plugins pesados.
¿Por qué usar este método?
- Rendimiento: Sin plugins externos que ralenticen tu sitio.
- Personalización total: Controla colores, tamaños y redes sociales incluidas.
- Responsive: Se adapta a cualquier dispositivo gracias a Flexbox.
Paso 1: Implementar el código
- Usando Code Snippets (recomendado):
- Ve a Snippets > Añadir nuevo.
- Título: «Shortcode para botones de compartir en redes sociales».
- Código: Pega el siguiente código:
// Shortcode para mostrar botones de compartir
function christian_share_buttons_shortcode() {
$share_buttons = '<div class="share-buttons" style="margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">';
$share_buttons .= '<span style="margin-right: 10px; font-weight: bold;">COMPARTIR <i class="fas fa-share-alt" style="margin-left: 5px;"></i></span>';
$share_buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . get_permalink() . '" target="_blank" rel="nofollow noopener" aria-label="Compartir en Facebook"><i class="fab fa-facebook" style="font-size:24px; color: #4267B2;"></i></a>';
$share_buttons .= '<a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '" target="_blank" rel="nofollow noopener" aria-label="Compartir en Twitter"><i class="fab fa-twitter" style="font-size:24px; color: #1DA1F2;"></i></a>';
$share_buttons .= '<a href="https://wa.me/?text=' . urlencode(get_the_title() . ' - ' . get_permalink()) . '" target="_blank" rel="nofollow noopener" aria-label="Compartir en WhatsApp"><i class="fab fa-whatsapp" style="font-size:24px; color: #25D366;"></i></a>';
$share_buttons .= '<a href="https://www.linkedin.com/shareArticle?mini=true&url=' . get_permalink() . '" target="_blank" rel="nofollow noopener" aria-label="Compartir en LinkedIn"><i class="fab fa-linkedin" style="font-size:24px; color: #0077B5;"></i></a>';
$share_buttons .= '<a href="mailto:?subject=' . rawurlencode(get_the_title()) . '&body=' . rawurlencode(get_permalink()) . '" aria-label="Compartir por correo"><i class="fas fa-envelope" style="font-size:24px; color: #EA4335;"></i></a>';
$share_buttons .= '</div>';
return $share_buttons;
}
add_shortcode('share_buttons', 'christian_share_buttons_shortcode');
// Cargar Font Awesome
function christian_load_fontawesome() {
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css', array(), '5.15.3');
}
add_action('wp_enqueue_scripts', 'christian_load_fontawesome');- Configuración:
- Ámbito: Ejecutar en todas partes.
- Guardar y activar el snippet.
Paso 2: Usar el shortcode
Inserta [share_buttons] en:
- Entradas/Páginas: Usa el bloque «Shortcode» de Gutenberg.
- Plantillas PHP: Con
<?php echo do_shortcode('[share_buttons]'); ?>. - Widgets de texto: En barras laterales o pies de página.
Personalización avanzada
- Cambiar redes sociales:
Añade o elimina plataformas editando el código. Ejemplo para añadir Telegram:
$share_buttons .= '<a href="https://t.me/share/url?url=' . get_permalink() . '" target="_blank" rel="nofollow noopener" aria-label="Compartir en Telegram"><i class="fab fa-telegram" style="font-size:24px; color: #0088CC;"></i></a>';- Estilos CSS personalizados:
Usa clases en lugar de estilos en línea para mayor flexibilidad:
.share-buttons a:hover {
opacity: 0.8;
transform: scale(1.1);
}- Añadir contador de shares:
Para mostrar estadísticas, considera integrar la API de ShareThis o AddThis.
