✅Agregar un Botón de Telegram Fijo con Invitación a Grupo (Sin Plugins)

En la era digital actual, la interacción con los lectores es clave para el éxito de cualquier sitio web. La inclusión de elementos interactivos, como botones de redes sociales, puede marcar la diferencia en la participación de la audiencia. En este artículo, exploraremos un código simple pero efectivo que permite agregar un botón de Telegram a tu sitio WordPress. Este pequeño toque puede facilitar que tus lectores se conecten contigo a través de esta popular plataforma de mensajería.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

function agregar_boton_telegram() {
    ?>
    <style>
.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    z-index:999;
}

.join-text {
    display: none;
    color: #ffffff;
    font-size: 14px;
	background-color: #3498db;
    padding: 5px; 
    margin-right: 10px; 
	
}

.floating-button:hover .join-text {
    display: inline;
}

.telegram-image {
    width: 40px;
    height: auto;
    margin-left: 10px;
}

    </style>

    <a class="floating-button" href="invitacion-grupo-telegram" target="_blank">
        <img class="telegram-image" src="url-imagen" alt="Únete a nuestro grupo de Telegram">
        <span class="join-text">Únete al grupo</span>
    </a>
    <?php
}

add_action('wp_footer', 'agregar_boton_telegram');
Lenguaje del código: JavaScript (javascript)

El código proporcionado es una función de WordPress que agrega un botón de Telegram al pie de cada página de tu sitio. El botón flotante se sitúa en la esquina inferior izquierda de la pantalla, siendo fácilmente visible para los visitantes. Además, cuenta con un efecto visual: al pasar el ratón sobre el botón, aparece un texto invitando a unirse al grupo de Telegram.

Estilo del Botón:

El estilo CSS define la apariencia del botón flotante, estableciendo su posición, animaciones y colores. El botón incluye una imagen del logotipo de Telegram y un texto descriptivo.

Enlace y Contenido del Botón:

El botón en sí es un enlace (<a>) que redirige a un grupo de Telegram específico. Contiene una imagen del logotipo de Telegram y un texto visible al pasar el ratón sobre el botón, animando a los visitantes a unirse al grupo.

Ubicación en el Sitio:

La función add_action asegura que este botón se agregue al pie de cada página de WordPress. Esto garantiza una presencia consistente en todo el sitio, maximizando la visibilidad del botón.

Conclusión:

La incorporación de un botón de Telegram mediante este código no solo mejora la estética de tu sitio, sino que también brinda a tus lectores una forma directa de conectarse contigo. Fomenta la participación y la comunicación, elementos esenciales para construir una comunidad en línea activa. ¡Implementa este código hoy y lleva la interacción con tus lectores al siguiente nivel!

Nos vemos en el siguiente tutorial.

Un saludo.