Personalización de Componente redesSociales

Introducción #

El componente redesSociales permite a los usuarios compartir fácilmente un inmueble en diversas plataformas de comunicación y redes, como:

• Facebook
• X
• WhatsApp
• LinkedIn
• Correo electrónico

Este bloque se muestra en la página de detalle del inmueble y es clave para facilitar la difusión de la propiedad en canales externos. A continuación, puedes ver un ejemplo visual del componente:

Cada ícono actúa como un botón de acción que genera automáticamente un enlace con la URL del inmueble.

---

Código del Componente #

A continuación se muestra el código fuente de este componente, el cual puedes modificar para añadir, eliminar o personalizar las redes y servicios disponibles:

<?php
    if(isset($inmueble)) {
        $texto = visualinmu_text_shared($inmueble);
    }else {
        $texto = "Hola, mira este inmueble " . $nombre . " - código: " . $codigo;
    }
    
?>
<ul class="socio-links">
    <li>Compartir en:</li>
    <li>
        <a 
        onclick="gtag('event', 'facebook_open', {
    'origin': 'property_shared',
    'label': 'facebook_open',
    'value': '<?php echo  $nombre; ?>' // Este valor puede ser un número
  });" target="_blank"
        href="<?php echo visualinmu_redsocial_url(["nombre" => "facebook", "texto" => $texto ], $route); ?>"
           title="Facebook" target="_blank"><i class="fa-brands fa-square-facebook"></i></a></li>
    <li>
        <a 
        onclick="gtag('event', 'twitter_open', {
    'origin': 'property_shared',
    'label': 'twitter_open',
    'value': '<?php echo  $nombre; ?>' // Este valor puede ser un número
  });" target="_blank"
        href="<?php echo visualinmu_redsocial_url(["nombre" => "x", "texto" => $texto], $route); ?>"
           title="X" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a></li>
    <li>
        <a 
        onclick="gtag('event', 'wp_o_shared_prop', {
    'origin': 'property_shared',
    'label': 'Whatsapp compartir propiedad',
    'value': '<?php echo  $nombre; ?>' // Este valor puede ser un número
  });" target="_blank"
        href="<?php echo visualinmu_redsocial_url(["nombre" => "whatsapp", "texto" => $texto], $route); ?>"
           title="Whatsapp" target="_blank"><i class="fa-brands fa-square-whatsapp"></i></a></li>
    <li>
        <a 
        onclick="gtag('event', 'linkedin_open', {
    'origin': 'property_shared',
    'label': 'linkedin_open',
    'value': '<?php echo  $nombre; ?>' // Este valor puede ser un número
  });" target="_blank"
        href="<?php echo visualinmu_redsocial_url(["nombre" => "linkedin", "texto" => $texto], $route); ?>"
           title="Linkedin" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
    <li>
        <a 
    onclick="gtag('event', 'email_open', {
    'origin': 'email_open',
    'label': 'linkedin_open',
    'value': '<?php echo  $nombre; ?>' // Este valor puede ser un número
  });" target="_blank"
        href="<?php echo visualinmu_redsocial_url(["nombre" => "email", "texto" => $texto . " descripción: ".$descripcion,"asunto" => $nombre], $route);?>"
           title="Correo" target="_blank"><i class="fas fa-envelope"></i></a></li>
</ul>

---

Conclusión #

Este componente se encuentra en la ruta:
componentes/detalleinmueble/redesSociales.php

Para personalizarlo sin perder tus cambios tras futuras actualizaciones del plugin, copia el archivo a tu tema siguiendo esta estructura:

visualinmueble/
├── templates/
│ └── inmuebles/
│ └── componentes/
│ └── detalleInmueble/
│ └── redesSociales.php


Desde allí puedes:

• Cambiar el orden de los íconos
• Agregar nuevas redes sociales (por ejemplo, Instagram, Telegram)
• Usar diferentes librerías de íconos
• Estilizar los botones con clases CSS personalizadas
• Modificar el texto de llamada (“Compartir en:”)