¿cómo modifico el siguiente codigo con un icono de enlace que cuando haga click se copie el link y aparezca un mensaje "Copia este link y compártelo en Instagram" con dos botones, cancelar, copiar.?
<li class="rz-mt-2">
<a href="
https://www.instagram.com/?url=<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-instagram rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Instagram', 'routiz' ); ?></span>
</a>
</li>
Para modificar el código de modo que cuando se haga clic en el icono de enlace, se copie y se muestre un mensaje con dos botones, "cancelar" y "copiar", puedes usar el siguiente código:
<li class="rz-mt-2">
<span class="rz-button rz--gg rz-link-copy">
<span class="fab fa-instagram rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Instagram', 'routiz' ); ?></span>
</span>
<textarea class="rz-link-textarea" style="position:absolute;left:-9999px;" readonly></textarea>
<div class="rz-notification">
<p><?php esc_html_e( 'Copia este link y compártelo en Instagram', 'routiz' ); ?></p>
<div class="rz-buttons">
<span class="rz-button rz--gg rz-copy-btn"><?php esc_html_e( 'Copiar', 'routiz' ); ?></span>
<span class="rz-button rz--gg rz-cancel-btn"><?php esc_html_e( 'Cancelar', 'routiz' ); ?></span>
</div>
</div>
</li>
Luego, puedes utilizar este script de JavaScript para agregar la funcionalidad de copiar el enlace al botón "copiar" y mostrar/ocultar el mensaje con los botones "copiar" y "cancelar" al hacer clic en el icono de enlace:
jQuery(document).ready(function($) {
// Seleccione el botón de copiar y el área de texto que contiene el enlace
var $copyButton = $('.rz-copy-btn');
var $linkTextArea = $('.rz-link-textarea');
// Seleccione el botón de cancelar y la notificación que se muestra cuando se copia el enlace
var $cancelButton = $('.rz-cancel-btn');
var $notification = $('.rz-notification');
// Agregar evento de clic al icono de enlace
$('.rz-link-copy').on('click', function() {
// Obtener el enlace y colocarlo en el área de texto
var link = '
https://www.instagram.com/?url=' + encodeURIComponent('<?php echo get_permalink(); ?>');
$linkTextArea.val(link);
// Mostrar la notificación
$notification.fadeIn(300);
});
// Agregar evento de clic al botón de cancelar y la notificación
$cancelButton.on('click', function() {
$notification.fadeOut(300);
});
// Agregar evento de clic al botón de copiar
$copyButton.on('click', function() {
// Seleccionar y copiar el enlace en el área de texto
$linkTextArea.select();
document.execCommand('copy');
// Ocultar la notificación y reiniciar el contenido del área de texto
$notification.fadeOut(300);
$linkTextArea.val('');
});
});
Espero que esto pueda ayudarte a personalizar tu código para agregar esta funcionalidad.