Shortcode para añadir botones de compartir

// Función para generar botones de compartir en redes sociales
function social_share_buttons($atts) {
// Obtener la URL y el título del contenido actual
$url = get_permalink();
$title = get_the_title();<div style="text-align: center; margin: 20px 0;">
                        <a href="https://ariapsa.com/mb" target="_blank">
                            <img src="https://ariapsa.com/wp-content/uploads/2024/08/Marca-blanca-Diseno-de-paginas-web-mexico-ariapsa.jpg" alt="Banner" style="max-width: 100%; height: auto;">
                        </a>
                       </div>
// Generar los enlaces de compartir
$facebook_url = ‘https://www.facebook.com/sharer/sharer.php?u=’ . urlencode($url);
$twitter_url = ‘https://twitter.com/intent/tweet?text=’ . urlencode($title) . ‘&url=’ . urlencode($url);
$linkedin_url = ‘https://www.linkedin.com/shareArticle?mini=true&url=’ . urlencode($url) . ‘&title=’ . urlencode($title);
$whatsapp_url = ‘https://api.whatsapp.com/send?text=’ . urlencode($title . ‘ ‘ . $url);
// Generar el HTML para los botones
$output = ‘<div class=”social-share-buttons”>’;
$output .= ‘<a href=”‘ . esc_url($facebook_url) . ‘” target=”_blank” class=”social-button facebook”>Facebook</a>’;
$output .= ‘<a href=”‘ . esc_url($twitter_url) . ‘” target=”_blank” class=”social-button twitter”>Twitter</a>’;
$output .= ‘<a href=”‘ . esc_url($linkedin_url) . ‘” target=”_blank” class=”social-button linkedin”>LinkedIn</a>’;
$output .= ‘<a href=”‘ . esc_url($whatsapp_url) . ‘” target=”_blank” class=”social-button whatsapp”>WhatsApp</a>’;
$output .= ‘</div>’;
return $output;
}
add_shortcode(‘social_share’, ‘social_share_buttons’);
// Estilos CSS para los botones de compartir en redes sociales
function social_share_buttons_styles() {
echo ‘
<style>
.social-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.social-button {
display: inline-block;
padding: 6px;
border-radius: 5px;
color: #82527e;
text-decoration: none;
font-size: 13px;
background-color: #e9e1ea;
text-align: center;
flex: 1 1 calc(50% – 10px); /* 2 columnas con espacio entre ellos */
}
.social-button:hover {
background-color: #ca0771;
color: #ffffff;
}
@media (min-width: 769px) {
.social-button {
flex: 1 1 auto; /* Resetear para pantallas más grandes */
}
}
</style>
‘;
}
add_action(‘wp_head’, ‘social_share_buttons_styles’);