Añádelo a tu code snippets
Código
/**
* Shortcode para Botón de Compartir (Optimizado)
*
* Añade [share_button] en cualquier página o entrada para mostrar el botón de compartir
* Opciones:
* [share_button
* texto="COMPARTIR"
* color_principal="#5d5fef"
* color_fondo="#ffffff"
* color_texto="#5d5fef"
* color_bisel_claro="rgba(255, 255, 255, 0.8)"
* color_bisel_oscuro="rgba(0, 0, 0, 0.15)"
* ancho="240"
* alto="50"
* radio="25"
* firma="😊 Ariapsa México"
* ]
*/
function custom_share_button_shortcode($atts) {
$attributes = shortcode_atts(array(
'texto' => 'COMPARTIR',
'color_principal' => '#5d5fef',
'color_fondo' => '#ffffff',
'color_texto' => '#5d5fef',
'color_bisel_claro' => 'rgba(255, 255, 255, 0.8)',
'color_bisel_oscuro' => 'rgba(0, 0, 0, 0.15)',
'ancho' => '240',
'alto' => '50',
'radio' => '25',
'firma' => '😊 Ariapsa México',
), $atts);
static $button_count = 0;
$button_count++;
$unique_id = 'share_button_' . $button_count;
add_action('wp_footer', 'share_button_register_scripts', 5);
ob_start();
?>
<div class="share-button-wrapper" id="<?php echo esc_attr($unique_id); ?>"
data-color-principal="<?php echo esc_attr($attributes['color_principal']); ?>"
data-color-fondo="<?php echo esc_attr($attributes['color_fondo']); ?>"
data-color-texto="<?php echo esc_attr($attributes['color_texto']); ?>"
data-color-bisel-claro="<?php echo esc_attr($attributes['color_bisel_claro']); ?>"
data-color-bisel-oscuro="<?php echo esc_attr($attributes['color_bisel_oscuro']); ?>"
data-ancho="<?php echo esc_attr($attributes['ancho']); ?>"
data-alto="<?php echo esc_attr($attributes['alto']); ?>"
data-radio="<?php echo esc_attr($attributes['radio']); ?>"
data-texto="<?php echo esc_attr($attributes['texto']); ?>"
data-firma="<?php echo esc_attr($attributes['firma']); ?>"
style="width: <?php echo esc_attr($attributes['ancho']); ?>px; height: <?php echo esc_attr($attributes['alto']); ?>px; margin: 20px 0;">
<!-- El contenido del botón se generará mediante JS -->
</div>
<?php
return ob_get_clean();
}
/**
* Registrar scripts y estilos en el footer
*/
function share_button_register_scripts() {
static $scripts_registered = false;
if ($scripts_registered) return;
$scripts_registered = true;
?>
<style>
@keyframes bounceSlideOut {
0% { transform: translateX(0); }
80% { transform: translateX(-88%); }
90% { transform: translateX(-82%); }
100% { transform: translateX(-85%); }
}
@keyframes bounceSlideIn {
0% { transform: translateX(-85%); }
20% { transform: translateX(-10%); }
60% { transform: translateX(-5%); }
100% { transform: translateX(0); }
}
@keyframes iconBounce {
0% { transform: scale(0.8); opacity: 0.7; }
40% { transform: scale(1.1); }
70% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
.share-button-wrapper {
position: relative;
}
.share-container {
position: absolute;
border-radius: var(--radio);
background-color: var(--color-principal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
border-right: 2px solid rgba(0, 0, 0, 0.2);
transition: box-shadow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 100%;
height: 100%;
}
.share-slide {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-fondo);
border: 2px solid var(--color-principal);
border-radius: var(--radio);
font-weight: bold;
color: var(--color-texto);
box-sizing: border-box;
cursor: pointer;
z-index: 10;
transition: transform 0s;
border-top: 2px solid var(--color-bisel-claro);
border-left: 2px solid var(--color-bisel-claro);
border-bottom: 2px solid var(--color-bisel-oscuro);
border-right: 2px solid var(--color-bisel-oscuro);
}
.share-button-wrapper:hover .share-slide,
.share-button-wrapper.active .share-slide {
animation: bounceSlideOut 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
box-shadow: 0 6px 8px -2px rgba(0, 0, 0, 0.25);
}
.share-button-wrapper:not(:hover) .share-slide:not(.static) {
animation: bounceSlideIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.social-icons {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 15px;
gap: 18px;
box-sizing: border-box;
filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));
}
.share-button-wrapper:hover .social-icon,
.share-button-wrapper.active .social-icon {
animation: iconBounce 0.4s forwards;
animation-delay: calc(var(--icon-index) * 0.05s);
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: var(--color-fondo);
color: var(--color-principal) !important;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0.7;
transform: scale(0.8);
border-top: 1px solid var(--color-bisel-claro);
border-left: 1px solid var(--color-bisel-claro);
border-bottom: 1px solid var(--color-bisel-oscuro);
border-right: 1px solid var(--color-bisel-oscuro);
}
.social-icon:nth-child(1) { --icon-index: 1; }
.social-icon:nth-child(2) { --icon-index: 2; }
.social-icon:nth-child(3) { --icon-index: 3; }
.social-icon:nth-child(4) { --icon-index: 4; }
.social-icon:nth-child(5) { --icon-index: 5; }
.social-icon:hover {
transform: scale(1.15);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.social-icon.copied {
background-color: #4CAF50;
border: 1px solid rgba(255, 255, 255, 0.5);
animation: none !important;
transform: scale(1.1);
opacity: 1;
}
.social-icon.copied svg {
fill: white;
}
.share-button-wrapper:hover .share-container {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
</style>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
const shareButtons = document.querySelectorAll('.share-button-wrapper');
if (shareButtons.length === 0) return;
initIntersectionObserver(shareButtons);
});
function initIntersectionObserver(buttons) {
const options = {
root: null,
rootMargin: '200px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
initializeShareButton(entry.target);
observer.unobserve(entry.target);
}
});
}, options);
buttons.forEach(button => observer.observe(button));
}
function initializeShareButton(buttonElement) {
const data = buttonElement.dataset;
buttonElement.style.setProperty('--color-principal', data.colorPrincipal);
buttonElement.style.setProperty('--color-fondo', data.colorFondo);
buttonElement.style.setProperty('--color-texto', data.colorTexto);
buttonElement.style.setProperty('--color-bisel-claro', data.colorBiselClaro);
buttonElement.style.setProperty('--color-bisel-oscuro', data.colorBiselOscuro);
buttonElement.style.setProperty('--radio', data.radio + 'px');
const containerHTML = `
<div class="share-container">
<div class="social-icons">
<div class="social-icon" title="WhatsApp" data-action="whatsapp">
<svg width="16" height="16" fill="${data.colorPrincipal}" viewBox="0 0 24 24">
<path d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411" />
</svg>
</div>
<div class="social-icon" title="Twitter/X" data-action="twitter">
<svg width="16" height="16" fill="${data.colorPrincipal}" viewBox="0 0 24 24">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
</svg>
</div>
<div class="social-icon" title="Facebook" data-action="facebook">
<svg width="16" height="16" fill="${data.colorPrincipal}" viewBox="0 0 24 24">
<path d="M9.198 21.5h4v-8.01h3.604l.396-3.98h-4V7.5a1 1 0 011-1h3v-4h-3a5 5 0 00-5 5v2.01h-2l-.396 3.98h2.396v8.01z" />
</svg>
</div>
<div class="social-icon" title="LinkedIn" data-action="linkedin">
<svg width="16" height="16" fill="${data.colorPrincipal}" viewBox="0 0 24 24">
<path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19a.66.66 0 000 .14V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"></path>
</svg>
</div>
<div class="social-icon" title="Copiar enlace" data-action="copy">
<svg class="link-icon" width="16" height="16" fill="${data.colorPrincipal}" viewBox="0 0 24 24">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
<svg class="check-icon" width="16" height="16" fill="#ffffff" viewBox="0 0 24 24" style="display:none">
<path d="M20 6L9 17l-5-5"></path>
</svg>
</div>
</div>
<div class="share-slide">${data.texto}</div>
</div>
`;
buttonElement.innerHTML = containerHTML;
const socialIcons = buttonElement.querySelectorAll('.social-icon');
socialIcons.forEach(icon => {
icon.addEventListener('click', function() {
const action = this.getAttribute('data-action');
const pageInfo = {
title: cleanTitle(document.title),
url: window.location.href,
firma: data.firma || ''
};
switch(action) {
case 'whatsapp': shareToWhatsApp(pageInfo); break;
case 'twitter': shareToTwitter(pageInfo); break;
case 'facebook': shareToFacebook(pageInfo); break;
case 'linkedin': shareToLinkedIn(pageInfo); break;
case 'copy': copyPageLink(this, pageInfo); break;
}
});
});
}
/**
* Limpia el título eliminando el nombre del sitio que WordPress agrega.
* Soporta separadores: " - ", " | ", " » ", " · "
*/
function cleanTitle(fullTitle) {
return fullTitle.split(/\s[-|»·]\s/)[0].trim();
}
function getPostContent() {
let content = '';
const contentSelectors = [
'.entry-content',
'.post-content',
'.content',
'article',
'.single-content',
'main',
'#content'
];
for (let selector of contentSelectors) {
const element = document.querySelector(selector);
if (element) {
content = element.innerText || element.textContent || '';
break;
}
}
if (!content.trim()) {
const bodyClone = document.body.cloneNode(true);
const unwanted = bodyClone.querySelectorAll('nav, header, footer, .menu, .navigation, .sidebar, .widget, script, style');
unwanted.forEach(el => el.remove());
content = bodyClone.innerText || bodyClone.textContent || '';
}
content = content.replace(/\s+/g, ' ').trim();
if (content.length > 150) {
content = content.substring(0, 150) + '...';
}
return content;
}
function shareToWhatsApp(pageInfo) {
const text = encodeURIComponent(pageInfo.title + '\n' + pageInfo.url);
window.open('https://api.whatsapp.com/send?text=' + text, '_blank');
}
function shareToTwitter(pageInfo) {
// Twitter permite ~280 chars. La URL ocupa ~23 fijos.
// Dejamos el título limpio + URL, sin descripción para no truncar.
const maxTitle = 250;
let title = pageInfo.title;
if (title.length > maxTitle) {
title = title.substring(0, maxTitle - 3) + '...';
}
const text = encodeURIComponent(title);
const url = encodeURIComponent(pageInfo.url);
window.open('https://twitter.com/intent/tweet?text=' + text + '&url=' + url, '_blank');
}
function shareToFacebook(pageInfo) {
const url = encodeURIComponent(pageInfo.url);
window.open('https://www.facebook.com/sharer/sharer.php?u=' + url, '_blank');
}
function shareToLinkedIn(pageInfo) {
const url = encodeURIComponent(pageInfo.url);
const title = encodeURIComponent(pageInfo.title);
window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + url + '&title=' + title, '_blank');
}
function copyPageLink(button, pageInfo) {
const postContent = getPostContent();
// Estructura limpia, amigable y sin spam
const textToCopy =
pageInfo.title + '\n\n' +
postContent + '\n\n' +
'👉 ¿Quieres saber más?: ' + pageInfo.url + '\n\n' +
pageInfo.firma;
const linkIcon = button.querySelector('.link-icon');
const checkIcon = button.querySelector('.check-icon');
if (navigator.clipboard) {
navigator.clipboard.writeText(textToCopy)
.then(() => showCopySuccess(button, linkIcon, checkIcon))
.catch(() => fallbackCopyText(textToCopy, button, linkIcon, checkIcon));
} else {
fallbackCopyText(textToCopy, button, linkIcon, checkIcon);
}
}
function fallbackCopyText(text, button, linkIcon, checkIcon) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
if (document.execCommand('copy')) {
showCopySuccess(button, linkIcon, checkIcon);
}
} catch (err) {
console.error('Error al copiar:', err);
}
document.body.removeChild(textarea);
}
function showCopySuccess(button, linkIcon, checkIcon) {
button.classList.add('copied');
linkIcon.style.display = 'none';
checkIcon.style.display = 'block';
setTimeout(() => {
button.classList.remove('copied');
linkIcon.style.display = 'block';
checkIcon.style.display = 'none';
}, 2000);
}
})();
</script>
<?php
}
add_shortcode('share_button', 'custom_share_button_shortcode');