¿Cómo utilizar Redes sociales en el Editor de bloques de Waclis?
La sección Redes sociales del Editor de bloques de Waclis permite incorporar accesos y contenidos relacionados con las plataformas sociales utilizadas por tu empresa, marca u organización.
Puedes utilizarla para:
dirigir visitantes hacia tus perfiles oficiales;
mostrar iconos de redes sociales;
invitar a seguir una cuenta;
complementar una página institucional;
incorporar determinados contenidos externos;
presentar diferentes canales sociales de la empresa.
Dentro del Editor de bloques encontrarás diseños prediseñados en:
Secciones → Redes sociales
Además, dentro de:
Componentes → Elementos
encontrarás:
Social icons
Y dentro de los componentes de contenido incrustado existen diferentes alternativas relacionadas con plataformas externas, como por ejemplo:
Twitter;
TikTok;
Pinterest;
otros servicios disponibles en la biblioteca.
Esto permite trabajar de diferentes maneras según el objetivo.
Antes de comenzar: existen tres usos diferentes
Cuando hablamos de Redes sociales dentro de una Página web podemos referirnos a tres cosas distintas.
1. Enlaces hacia tus perfiles
Por ejemplo:
[ Instagram ] [ Facebook ] [ LinkedIn ]
Cada icono funciona como un Link.
El visitante hace clic y accede al perfil correspondiente.
2. Una sección que invita a seguir tus redes
Por ejemplo:
SÍGUENOS
Conoce nuestras novedades y contenidos en redes sociales.
[ Instagram ] [ LinkedIn ] [ YouTube ]
Aquí existe:
Heading;
texto;
Social icons.
3. Contenido social incrustado
Por ejemplo:
[ PUBLICACIÓN / CONTENIDO EXTERNO ]
En este caso no estás mostrando solamente un Link.
Estás incorporando contenido procedente de una plataforma externa dentro de tu Página web.
Estos tres conceptos no son equivalentes
Puedes pensar:
SOCIAL ICON
→ lleva al perfil
SECCIÓN REDES SOCIALES
→ presenta e invita a seguir
CONTENIDO INCRUSTADO
→ muestra contenido de una plataforma externa
¿Cuál debería utilizar?
Depende de tu objetivo.
Si quieres simplemente que el visitante conozca tus perfiles:
utiliza iconos con Links.
Si quieres darle mayor protagonismo:
utiliza una sección Redes sociales.
Si necesitas mostrar una publicación o contenido específico:
utiliza el componente de contenido incrustado adecuado cuando corresponda.
No necesitas embeber contenido para tener redes sociales en tu Página web
Una composición sencilla como:
SÍGUENOS
[ Instagram ]
[ Facebook ]
[ LinkedIn ]
puede ser suficiente.
¿Cuándo conviene utilizar Redes sociales?
Puede resultar útil cuando las redes forman parte real de la comunicación de tu empresa.
Por ejemplo:
publicas nuevos productos;
compartes proyectos;
muestras contenido audiovisual;
comunicas novedades;
publicas eventos;
mantienes una comunidad;
compartes material técnico;
utilizas una red como canal institucional.
No agregues una red solamente porque existe el icono
Este es uno de los errores más comunes.
Por ejemplo:
YouTube
TikTok
X
puede verse completo, pero si solo utilizas activamente:
es preferible mostrar esas dos.
Cada icono genera una expectativa
Si el visitante abre:
YouTube
y encuentra:
un canal vacío;
contenido de hace años;
una cuenta inexistente;
la sección pierde valor.
Prioriza perfiles reales y mantenidos
Pregunta:
¿Esta red representa actualmente a nuestra empresa?
Si la respuesta es no:
considera eliminarla.
Redes sociales vs Contacto
Un perfil social puede funcionar como canal de comunicación, pero no necesariamente sustituye:
email;
teléfono;
formulario;
canales comerciales.
Por ejemplo
CONTACTO
Formulario
Teléfono
↓
REDES SOCIALES
puede ser una estructura clara.
Redes sociales vs Newsletter
Ambas permiten mantener contacto con la audiencia.
Pero:
Newsletter
→ suscripción para recibir comunicaciones.
Redes sociales
→ acceso a perfiles o contenido publicado en plataformas externas.
Redes sociales vs Contenidos destacados
Una sección de Contenidos destacados puede enlazar:
artículos;
campañas;
productos;
páginas.
Redes sociales se centra específicamente en los canales sociales.
¿Cómo agregar una sección Redes sociales?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.
Después abre:
Secciones
y selecciona:
Redes sociales
Paso 1: elige una composición
Waclis mostrará los diseños disponibles.
Puedes encontrar alternativas con:
Heading;
descripción;
Social icons;
fondos;
Cards;
diferentes alineaciones;
imágenes;
distintas distribuciones.
Elige según:
cantidad de redes;
importancia de la sección;
ubicación;
estilo general de tu Página web.
No necesitas conservar todas las redes del ejemplo
Si el diseño contiene:
pero tu empresa utiliza solamente:
elimina las demás.
No dejes Links de ejemplo
Antes de terminar, revisa cada icono.
Paso 2: agrega la sección
Selecciona la composición deseada.
Después podrás modificar:
Heading;
Paragraph;
iconos;
Links;
fondo;
espacios;
comportamiento responsive.
Paso 3: utiliza Navigator
Una sección puede tener conceptualmente una estructura como:
Section
└── Container
├── Heading
├── Paragraph
└── Social Icons
├── Link
│ └── Icon
├── Link
│ └── Icon
└── Link
└── Icon
La estructura exacta dependerá del diseño utilizado.
¿Por qué Navigator es importante?
Porque visualmente puedes hacer clic sobre:
icono de Instagram
y seleccionar únicamente el icono.
Pero la URL puede encontrarse en un:
Link
que lo contiene.
Ejemplo conceptual
Link
└── Instagram Icon
El Icon controla principalmente la representación visual.
El Link controla el destino.
Cambiar el icono no cambia automáticamente la URL
Este punto debe quedar muy claro.
Supongamos que clonas:
→ https://facebook...
y cambias el dibujo por:
El resultado podría ser:
Icono visual:
URL:
si no modificaste también el Link.
Por eso después de cada modificación comprueba
ICONO
↕
URL
Deben corresponder.
Paso 4: modifica el Heading
Puedes utilizar:
Síguenos
Encuéntranos en redes
Conecta con nosotros
Síguenos en redes sociales
Más novedades en nuestras redes
Utiliza un mensaje sencillo
No necesitas un título muy creativo.
Síguenos en redes sociales
es claro y directo.
Paso 5: agrega una descripción si aporta valor
Por ejemplo:
Conoce nuestras novedades, proyectos y nuevos lanzamientos.
Otro ejemplo
Síguenos para conocer nuevos contenidos y novedades de la empresa.
No prometas contenido que no publicas
Por ejemplo:
Nuevas promociones todos los días
si esa actividad no existe realmente.
Una descripción breve suele ser suficiente
Paso 6: utiliza Social icons
Dentro de:
Componentes → Elementos
encontrarás:
Social icons
Este componente puede ayudarte a incorporar una estructura de iconos sociales dentro de una sección personalizada.
Puedes utilizarlo dentro de una composición creada desde cero
Por ejemplo:
Section
└── Container
├── Heading
├── Paragraph
└── Social icons
El objetivo de los iconos
es permitir que el visitante identifique rápidamente cada plataforma.
Los iconos deben ser reconocibles
Por ejemplo:
Instagram → icono de Instagram
LinkedIn → icono de LinkedIn
No utilices un icono incorrecto
Por ejemplo:
icono de YouTube
→ perfil de TikTok
aunque la URL funcione.
Esto genera confusión.
Paso 7: configura cada Link
Selecciona mediante Navigator el Link asociado al icono.
En su configuración puedes trabajar con propiedades como:
Url;
Rel;
Target.
URL
Debe contener el destino correcto.
Por ejemplo:
https://...
correspondiente al perfil oficial.
No utilices la URL de inicio de la plataforma
Por ejemplo:
instagram.com
si quieres enviar al visitante directamente al perfil de la empresa.
Utiliza la URL específica del perfil.
Ejemplo conceptual
Incorrecto:
→ página general de Instagram
Correcto:
→ perfil oficial de la empresa
Copia la URL del perfil real
Evita escribirla de memoria si existe riesgo de error.
Paso 8: decide cómo abrir el enlace
Dentro del Link encontrarás la propiedad:
Target
Puedes utilizarla para configurar cómo se abre el destino según la experiencia que quieras crear.
Enlaces sociales son externos
Por eso, en muchos diseños puede resultar conveniente que el visitante pueda acceder al perfil sin perder completamente el contexto de la Página web.
Configura el comportamiento conscientemente y mantenlo consistente.
No mezcles sin motivo
Por ejemplo:
Instagram → nueva pestaña
LinkedIn → misma pestaña
YouTube → nueva pestaña
Facebook → misma pestaña
puede generar una experiencia irregular.
Mantén un criterio
especialmente si todos son Links externos de redes sociales.
Rel
El componente Link también permite configurar:
Rel
Esta propiedad puede utilizarse en determinadas configuraciones de enlaces.
Si no necesitas modificarla:
no agregues valores arbitrariamente.
No necesitas editar HTML para configurar una URL habitual
Utiliza primero las opciones de:
Contenido → Link
Paso 9: prueba cada perfil
No basta con comprobar visualmente el icono.
Después de guardar:
utiliza Ver página;
selecciona Instagram;
comprueba el perfil;
vuelve;
selecciona LinkedIn;
comprueba el perfil;
repite con todas las redes.
Revisa también si la cuenta es realmente la oficial
No solamente si la URL abre.
Ejemplo de error
Icono:
URL:
perfil antiguo de la empresa
La URL puede funcionar técnicamente, pero no ser el perfil actual.
Mantén los Links actualizados
Especialmente si:
cambió el nombre de usuario;
cambió la cuenta;
se cerró un perfil;
se migró a otro canal.
Paso 10: cantidad de redes
No existe un número obligatorio.
Puedes mostrar:
2 redes
si esas son las relevantes.
Por ejemplo
puede ser suficiente.
No necesitas completar una fila de cinco iconos
Más iconos no significa mayor presencia digital
La calidad de los canales es más importante.
Orden de los iconos
Puedes priorizar:
red principal;
red más activa;
canal más relevante para el visitante.
Ejemplo
Si Instagram es el principal:
YouTube
puede tener más sentido que un orden arbitrario.
Mantén el mismo orden en diferentes áreas
Si también tienes iconos sociales en otro punto de la Página web, puede resultar conveniente utilizar una secuencia consistente.
No es obligatorio
pero ayuda a mantener coherencia.
Iconos + nombre de red
Puedes utilizar solamente:
[ icono ]
cuando el símbolo sea suficientemente reconocible.
También puedes utilizar
[ icono ] Instagram
Esto puede ser especialmente útil
si:
el público no reconoce todos los iconos;
utilizas varias plataformas;
quieres hacer el enlace más explícito.
No dependas exclusivamente de iconos ambiguos
Tamaño de iconos
Deben ser suficientemente visibles y fáciles de utilizar.
Evita iconos extremadamente pequeños
Por ejemplo:
8 px
podrían resultar difíciles de seleccionar.
También evita iconos enormes
que compitan con el contenido principal de la Página web.
Mantén una jerarquía adecuada
Espacio entre iconos
Debe existir suficiente separación.
Por ejemplo:
[ IG ] [ LI ] [ YT ]
Evita
[IG][LI][YT]
si los controles quedan pegados.
Pero tampoco
[IG] [LI] [YT]
si parecen elementos sin relación.
Alineación
Puedes utilizar:
izquierda;
centro;
derecha.
Centrado
funciona muy bien en una sección dedicada:
SÍGUENOS
[ IG ] [ LI ] [ YT ]
Izquierda
puede funcionar dentro de una composición institucional:
SÍGUENOS
Novedades...
[ IG ] [ LI ]
Mantén una lógica con el resto del contenido
Colores oficiales o identidad de la Página web
Puedes elegir entre:
mantener los iconos dentro de la paleta visual del sitio;
utilizar colores que ayuden a identificar cada plataforma;
según el diseño.
No es obligatorio reproducir exactamente el color de cada red
si el diseño de la Página web utiliza una estética monocromática.
Pero el icono debe seguir siendo reconocible
Ejemplo monocromático
[ Instagram ]
[ LinkedIn ]
[ YouTube ]
todos en el mismo color
puede resultar elegante.
Hover puede recuperar protagonismo
por ejemplo mediante:
cambio de color;
fondo;
escala sutil.
No necesitas convertir cada icono en un arcoíris
Border o círculo
Una presentación frecuente:
( IG ) ( LI ) ( YT )
mediante:
Background;
Border;
Border radius.
Mantén dimensiones consistentes
Por ejemplo:
todos los iconos dentro de círculos iguales
No dejes
Instagram grande
LinkedIn pequeño
YouTube rectangular
sin una intención.
Hover
Puede resultar muy útil porque los iconos son interactivos.
Por ejemplo:
estado normal
→ fondo neutro
hover
→ color destacado
También puede utilizarse una escala sutil
Por ejemplo:
.redes-section .social-link {
transition: transform .2s ease;
}
.redes-section .social-link:hover {
transform: translateY(-2px);
}
Evita Hover excesivo
No necesitas:
rotar;
rebotar;
aumentar 50 %;
el icono.
En móvil no existe el mismo Hover
El icono debe verse claramente interactivo también en su estado normal.
Estado Active
Puedes personalizarlo si corresponde, pero no es obligatorio.
Estado de foco
Si realizas CSS avanzado, evita eliminar indiscriminadamente los indicadores que ayudan a navegar mediante teclado.
Redes sociales y Background
Puedes utilizar:
fondo blanco;
gris;
color institucional;
imagen.
Un fondo simple suele funcionar muy bien
porque los iconos ya aportan identidad visual.
Ejemplo
████████████████████████████████
SÍGUENOS
[ IG ] [ LI ] [ YT ]
████████████████████████████████
Padding
La sección necesita suficiente espacio para diferenciarse.
No necesita ser enorme
Si únicamente tiene:
Heading
+
3 iconos
puede mantenerse compacta.
No conviertas cinco iconos en una Section de pantalla completa
salvo que exista una decisión de diseño concreta.
Redes sociales dentro de Quiénes somos
Puede utilizarse, por ejemplo:
QUIÉNES SOMOS
Texto...
Síguenos:
[ Instagram ] [ LinkedIn ]
Pero también puede ser una sección separada
si quieres darle mayor protagonismo.
Redes sociales en Contacto
Puede ser una ubicación natural.
Por ejemplo:
CONTACTO
Formulario
↓
También puedes encontrarnos en:
[ Instagram ] [ LinkedIn ]
Redes sociales al final de Home
También puede funcionar:
Newsletter
↓
Redes sociales
↓
área inferior
No confundas el área editable cercana al Footer con editar el Footer
Recuerda que los bloques pueden colocarse en áreas próximas al menú inferior, pero eso no significa que estés modificando el Footer de la plantilla.
Redes sociales y Header/Footer
Si necesitas modificar iconos que forman parte del Header o Footer de la plantilla, esa personalización no corresponde necesariamente a una sección del Editor de bloques.
La sección Redes sociales permite incorporar contenido dentro de las áreas editables disponibles.
Contenido incrustado de redes sociales
Además de Social icons, la biblioteca incluye componentes para incrustar determinados contenidos externos.
Esto puede utilizarse cuando quieres mostrar una pieza específica.
Por ejemplo
conceptualmente:
PUBLICACIÓN SOCIAL
↓
contenido incorporado en la página
Esto es diferente a un icono
Un icono:
[ Instagram ]
solo dirige al perfil.
Un contenido incrustado:
[ publicación ]
muestra contenido de la plataforma.
¿Cuándo conviene incrustar contenido?
Puede resultar útil cuando una publicación:
complementa el contenido;
aporta una demostración;
forma parte de una campaña;
es relevante para esa página.
No incrustes publicaciones solamente para llenar espacio
Un feed social completo tampoco es obligatorio
Muchas Páginas web funcionan mejor con:
Síguenos en Instagram
[ icono ]
que con una gran cantidad de publicaciones externas.
Contenido externo puede aumentar complejidad
Los elementos incrustados pueden depender de:
plataformas externas;
conexión;
disponibilidad del contenido;
cambios realizados por el proveedor.
Si la publicación se elimina
el contenido de tu Página web puede dejar de mostrarse como esperabas.
Por eso revisa periódicamente
las piezas sociales incrustadas.
No utilices un contenido temporal como pieza permanente sin mantenimiento
Por ejemplo:
Promoción de Navidad 2025
incrustada años después.
Contenido de terceros
Si incorporas contenido de otra persona o cuenta:
asegúrate de que sea apropiado hacerlo y de que el contenido siga disponible.
No presentes contenido ajeno como propio
Twitter, TikTok, Pinterest y otros componentes
La biblioteca del editor incluye diferentes opciones de contenido incrustado.
Utiliza únicamente el componente que corresponda al servicio y al contenido real.
No asumas que todos funcionan de la misma manera
Cada plataforma puede requerir:
una URL;
un identificador;
otra configuración específica.
Selecciona el componente y revisa sus opciones en:
Contenido
antes de realizar modificaciones avanzadas.
No edites HTML primero
si la configuración puede realizarse desde las opciones disponibles.
Contenido incrustado vs captura de pantalla
Puedes mostrar una publicación mediante un embed cuando necesitas que conserve su naturaleza interactiva.
Una captura
puede ser suficiente cuando solo quieres ilustrar algo, siempre que:
tengas derecho a utilizarla;
no exponga datos innecesarios;
quede claro qué representa.
No conviertas una captura de una red social en un supuesto componente interactivo
Componentes externos y privacidad
Los contenidos incrustados pueden establecer comunicación con servicios de terceros.
Si tu Página web tiene requisitos específicos de privacidad o consentimiento para recursos externos, deberás considerarlos según el contexto aplicable.
No inventes un consentimiento genérico
Las necesidades exactas dependen de:
plataforma;
implementación;
jurisdicción;
configuración.
Performance
Cada contenido externo puede agregar recursos.
Por eso:
10 publicaciones incrustadas
pueden ser considerablemente más pesadas que:
3 iconos sociales
Utiliza embeds solamente cuando aporten valor
Sección de Instagram visual
Si quieres mostrar:
SÍGUENOS EN INSTAGRAM
[ foto ] [ foto ] [ foto ]
pregúntate si esas imágenes son:
contenido estático administrado manualmente;
contenido realmente conectado a Instagram.
No presentes una Galería manual como si se actualizara automáticamente
si no existe esa funcionalidad.
Puedes crear una Galería manual
por ejemplo:
ÚLTIMAS NOVEDADES
[ imagen ]
[ imagen ]
[ imagen ]
[ SEGUIR EN INSTAGRAM ]
pero deberás mantenerla manualmente.
Esto puede ser perfectamente válido
si queda claro que se trata de una composición propia.
No prometas actualización automática
si no existe.
Clonar un icono social
Procedimiento recomendado:
1. Abrir Navigator.
2. Localizar Link + Icon.
3. Seleccionar la unidad completa.
4. Clonar.
5. Cambiar icono.
6. Cambiar URL.
7. Revisar Target.
8. Revisar ID si existe.
9. Guardar.
10. Probar el enlace.
No clones solamente el icono
si necesitas crear una nueva red enlazada.
Ejemplo de error
Original:
→ facebook.com/empresa
Clonas solo el icono y lo conviertes en Instagram.
Puedes terminar:
Facebook Link
├── Facebook Icon
└── Instagram Icon
en lugar de dos Links independientes.
Utiliza Navigator
para entender la jerarquía.
Unidad adecuada
Conceptualmente:
Link
└── Icon
Esta suele ser la unidad que debes duplicar.
Después modifica ambos elementos
Eliminar una red
Si ya no utilizas una plataforma:
selecciona el:
Link + Icon
completo.
No elimines solamente el Icon
Podrías dejar:
Link vacío
dentro de la estructura.
Recuerda
Waclis no solicita confirmación antes de eliminar.
Si seleccionas el elemento incorrecto:
Deshacer
Eliminar una cuenta antigua
También revisa si existen Links hacia ella en otras áreas de la Página web.
La sección del Editor de bloques no necesariamente controla iconos que pertenezcan a otras partes de la plantilla.
Mover iconos
Puedes modificar el orden.
Por ejemplo:
Antes:
YouTube
Después:
YouTube
Mueve cada unidad Link + Icon
No intercambies solamente los iconos
sin revisar los Links.
Classes compartidas
Puede ser útil utilizar:
social-link
social-icon
como Classes comunes.
Linked styles
Puede hacer que todos los iconos compartan:
tamaño;
color;
Border radius;
Padding;
Hover.
Esto suele ser deseable.
Ejemplo
Instagram → social-link
LinkedIn → social-link
YouTube → social-link
Si cambias el tamaño
puede cambiar en todos.
Eso mantiene consistencia.
No agregues un ID único a cada icono solamente para evitarlo
Excepciones
Si quieres personalizar uno:
class="social-link youtube"
puede mantener el estilo base.
IDs
Si utilizas IDs personalizados:
id="social-instagram"
deben ser únicos.
Después de clonar
revisa si el ID se duplicó.
CSS personalizado
Puedes utilizar una estructura conceptual como:
redes-section
redes-links
social-link
social-icon
Ejemplo
.redes-section .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
}
Separación
.redes-section .redes-links {
display: flex;
gap: 12px;
}
Hover
.redes-section .social-link {
transition: transform .2s ease;
}
.redes-section .social-link:hover {
transform: translateY(-2px);
}
Estas Classes son ejemplos
No representan necesariamente las Classes originales de todos los diseños prediseñados.
Utiliza primero las herramientas visuales
Para:
color;
Padding;
Border;
Border radius;
tamaño;
puedes utilizar Estilo cuando la estructura lo permita.
Evita CSS global
No utilices:
a {
border-radius: 50%;
}
para cambiar iconos sociales.
Afectaría muchos Links
Tampoco
svg {
width: 32px;
}
puede afectar:
otros iconos;
mapas;
componentes;
controles.
Utiliza scope
Por ejemplo:
.redes-section svg {
}
si corresponde realmente a tu estructura.
Font Icon
Si los Social icons utilizan iconos de fuente, un selector global sobre:
i
también puede afectar muchos elementos.
Limita siempre el alcance
Responsive
Una sección con pocas redes suele adaptarse fácilmente.
Desktop
[ IG ] [ LI ] [ YT ] [ FB ]
Mobile
Puede mantener:
[ IG ] [ LI ] [ YT ] [ FB ]
si existe espacio suficiente.
O reorganizarse
[ IG ] [ LI ]
[ YT ] [ FB ]
si los controles son grandes.
No reduzcas excesivamente los iconos para mantener una sola fila
Mejor permitir Wrap
si la estructura lo necesita.
Grid Row
Si cada red se presenta como una Card con:
Icon
Nombre
Descripción
entonces puede necesitar una grilla responsive.
Por ejemplo
Desktop:
[ Instagram ] [ LinkedIn ] [ YouTube ]
Mobile:
[ Instagram ]
[ LinkedIn ]
[ YouTube ]
Utiliza Grid Row para esa estructura
Si son solamente pequeños iconos
Flex o la estructura interna del componente puede ser suficiente.
No fuerces Grid para tres pequeños iconos si no es necesario
Texto y responsive
Una frase como:
Síguenos para descubrir nuestros últimos lanzamientos y proyectos.
puede ocupar más líneas en móvil.
Ajusta:
Font size;
Line height;
Padding.
Iconos táctiles
En celular deben tener un área cómoda de interacción.
No reduzcas el área clicable únicamente para ahorrar espacio.
Icono visible vs área clicable
El icono puede ser:
24 px
pero el contenedor interactivo puede tener más espacio.
Esto ayuda a utilizarlo con el dedo
No pegues los enlaces entre sí
Redes sociales con imágenes
Algunas composiciones pueden incluir:
imagen principal;
mockup;
fotografía.
Utilízalas si aportan
Por ejemplo:
[ teléfono mostrando red ]
SÍGUENOS
No necesitas una captura completa de un feed
si el objetivo es solamente enlazar perfiles.
Mantén las imágenes actualizadas
Una captura con:
publicaciones viejas;
antiguo logo;
antiguo nombre;
puede desactualizarse rápidamente.
Frase “Síguenos” + número de seguidores
Evita mostrar:
Más de 50.000 seguidores
si el dato no está actualizado o no puede verificarse.
Los números sociales cambian
Si decides publicar una cifra:
mantén un proceso para revisarla.
En muchos casos es mejor no mostrarla
Redes sociales inactivas
Si una cuenta lleva mucho tiempo sin actividad, evalúa si sigue teniendo sentido dirigir tráfico hacia ella.
No existe obligación de mostrar todas las cuentas corporativas
Cuenta nueva
Puede mostrarse aunque tenga poco contenido si realmente es el canal oficial que quieres desarrollar.
Mantén la decisión estratégica
no basada únicamente en número de seguidores.
Plataformas que cambian de nombre o identidad
Si una plataforma modifica su:
nombre;
icono;
URL;
revisa periódicamente la sección para que siga representándola correctamente.
No mantengas iconografía antigua indefinidamente
si genera confusión.
Redes sociales de diferentes marcas
Si la Página web representa una empresa con varias marcas, no mezcles perfiles sin explicar.
Por ejemplo:
Marca A → Instagram A
Marca B → Instagram B
puede requerir separación.
No presentes todos bajo un único “Síguenos”
si el visitante no puede saber qué perfil representa a qué marca.
Perfiles regionales
También puede existir:
Instagram Argentina
Instagram Chile
Si muestras ambos:
identifícalos claramente.
No utilices dos iconos idénticos sin contexto
Enlaces rotos
Revisa periódicamente.
Un perfil puede:
cambiar de usuario;
ser eliminado;
migrar.
Una revisión sencilla
puede consistir en abrir todos los enlaces una vez cada cierto tiempo.
Redes sociales y campañas temporales
Puedes crear una sección:
SÍGUENOS DURANTE EL EVENTO
[ Instagram ]
Después del evento
evalúa si la sección sigue siendo necesaria.
No dejes textos temporales permanentemente
Social icons vs Button
Un icono es ideal cuando la plataforma es reconocible.
Pero si existe una acción específica:
VER NUESTRO CANAL DE YOUTUBE
puede ser mejor un Button.
Puedes combinar
[ YouTube Icon ]
Ver nuestro canal
No conviertas todos los Links sociales en grandes CTA
si no tienen esa importancia.
Redes sociales dentro de Equipo
Una futura sección de Equipo o colaboradores puede incluir Links sociales o profesionales de cada integrante cuando corresponda.
En ese caso, los enlaces pertenecen a cada persona y no necesariamente a la empresa.
No confundas
LinkedIn corporativo
con:
LinkedIn personal de un integrante
Privacidad del equipo
No publiques perfiles personales sin una razón y autorización apropiada.
Redes sociales en Portafolio
Puedes utilizar una red para ampliar un proyecto.
Por ejemplo:
Ver proyecto en Instagram
cuando el contenido realmente aporte algo.
Pero una publicación social no debería ser el único registro de un proyecto importante
si necesitas mantener un Portafolio estable.
Las publicaciones pueden eliminarse
Contenido social temporal
Recuerda que dependes de una plataforma externa.
Por eso, para información fundamental de tu empresa:
mantén también contenido propio dentro de la Página web.
No utilices Instagram como sustituto de toda la información institucional
Accesibilidad
Los iconos deberían tener suficiente contexto para poder identificar su destino.
Si el componente permite texto o información asociada
utiliza nombres claros.
No dependas únicamente del color
para identificar cada plataforma.
Ejemplo
Instagram y YouTube no deberían distinguirse solamente porque:
uno es rosa
otro rojo
El icono debe ser reconocible.
Links y foco
Si personalizas CSS avanzado:
no elimines todos los estilos de foco.
Los enlaces deben seguir siendo utilizables mediante diferentes formas de navegación.
Contenido incrustado y accesibilidad
La accesibilidad interna puede depender también de la plataforma externa.
No reemplaces información esencial de la Página web por un embed que podría no cargar.
Ejemplo
No publiques:
Nuestros horarios están únicamente en una publicación de Instagram incrustada.
Los horarios deberían estar en texto propio
si son información necesaria.
Performance y contenido incrustado
Utiliza con moderación:
1 publicación relevante
puede ser útil.
Mientras que
15 publicaciones
puede añadir mucha complejidad sin mejorar la experiencia.
Ejemplo práctico: sección sencilla
Queremos:
SÍGUENOS EN REDES SOCIALES
Conoce nuestros últimos proyectos y novedades.
[ Instagram ] [ LinkedIn ] [ YouTube ]
Paso 1
Abre:
Secciones → Redes sociales
Paso 2
Selecciona una composición.
Paso 3
Utiliza Navigator.
Paso 4
Modifica Heading.
Paso 5
Modifica Paragraph.
Paso 6
Identifica cada:
Link
└── Icon
Paso 7
Elimina las redes que no utilizas.
Paso 8
Configura el icono correcto.
Paso 9
Configura la URL correcta.
Paso 10
Revisa Target.
Paso 11
Personaliza:
tamaño;
color;
Background;
separación;
Hover.
Paso 12
Revisa desktop.
Paso 13
Revisa tablet.
Paso 14
Revisa celular.
Paso 15
Guarda.
Paso 16
Utiliza:
Ver página
Paso 17
Abre uno por uno todos los perfiles.
Ejemplo práctico: sección compacta
ENCUÉNTRANOS EN:
[ IG ] [ LI ]
Puede resultar suficiente dentro de Contacto.
Ejemplo práctico: Instagram principal
SÍGUENOS EN INSTAGRAM
Conoce nuevos proyectos y lanzamientos.
[ Instagram ]
@nombredeusuario
Si publicas el nombre de usuario
comprueba que coincida con la URL.
Error posible
Texto:
@empresa_nueva
URL:
instagram.com/empresa_antigua
Revisa ambos
Ejemplo práctico: red profesional
SÍGUENOS EN LINKEDIN
Conoce novedades de la empresa y nuevos proyectos.
[ LinkedIn ]
Ejemplo práctico: canal audiovisual
MIRA NUESTROS VIDEOS
Tutoriales, proyectos y novedades.
[ IR A YOUTUBE ]
En este caso puede tener más sentido utilizar un Button que únicamente un pequeño icono.
¿Qué hacer si no sé qué redes mostrar?
Haz una lista de todos tus perfiles y pregunta:
¿Es oficial?
¿Está activo?
¿Tiene contenido relevante?
¿Queremos que nuestros clientes lo visiten?
¿Se mantendrá actualizado?
Muestra los que cumplan esas condiciones.
¿Qué hacer si una red está temporalmente sin contenido?
Puedes:
mantenerla si existe una estrategia para retomarla;
retirarla temporalmente;
priorizar otras.
¿Qué hacer si el perfil es privado?
Evalúa si tiene sentido dirigir visitantes desde una Página web pública hacia él.
¿Qué hacer si una cuenta pertenece a un empleado?
No la presentes como cuenta oficial de la empresa.
¿Qué hacer si tengo un solo perfil?
Puedes utilizar perfectamente:
SÍGUENOS EN INSTAGRAM
[ Instagram ]
No necesitas inventar otras redes.
¿Qué hacer si tengo seis?
Puedes mostrarlas si las seis son realmente relevantes.
Pero mantén:
tamaño;
separación;
responsive.
¿Qué hacer si los iconos no entran en móvil?
Permite:
Wrap;
varias filas;
o reduce moderadamente espacios.
No conviertas los iconos en elementos diminutos.
¿Qué hacer si un icono se ve diferente?
Revisa:
componente;
Class;
tamaño;
Font Icon/SVG;
Estilo.
Puede que un icono tenga proporciones internas diferentes
Por eso el contenedor común ayuda a mantener consistencia.
¿Qué hacer si Instagram parece más grande que LinkedIn?
Puedes mantener un mismo contenedor:
48 × 48
y ajustar el icono visual internamente cuando sea necesario.
¿Qué hacer si cambio el color de uno y cambian todos?
Comprueba:
Linked styles
Probablemente comparten una Class.
Si quieres todos iguales
es correcto.
¿Qué hacer si quiero cada red con un color?
Puedes utilizar Classes adicionales.
Por ejemplo:
social-link instagram
social-link linkedin
Mantén la Class base
¿Qué hacer si clono Facebook para crear Instagram?
Revisa obligatoriamente:
Icon;
Url;
Target;
Id.
¿Qué hacer si Instagram sigue llevando a Facebook?
Seleccionaste o editaste solo el Icon.
Utiliza Navigator para localizar el Link y modificar:
Url
¿Qué hacer si el Link funciona pero va al perfil incorrecto?
Actualiza la URL.
¿Qué hacer si el perfil abre la plataforma pero no la cuenta?
Utiliza la URL específica del perfil.
¿Qué hacer si el usuario cambió?
Actualiza:
Link;
nombre visible;
cualquier texto asociado.
¿Qué hacer si quiero abrir en otra pestaña?
Selecciona el Link y revisa:
Target
Configúralo según el comportamiento que hayas elegido para los enlaces externos.
¿Qué hacer si todos abren de manera diferente?
Unifica el criterio.
¿Qué hacer si eliminé el icono pero sigue existiendo un espacio clicable?
Probablemente quedó el Link o wrapper.
Utiliza Navigator y elimina la unidad completa.
¿Qué hacer si eliminé el Link pero quedó el icono?
El icono ya no tendrá la acción esperada.
Revisa la jerarquía y reconstruye:
Link
└── Icon
cuando corresponda.
¿Qué hacer si quiero que todo el Card sea clicable?
Puede utilizarse un Link envolvente en una composición avanzada.
Pero evita Links anidados.
Si ya existe:
Link
└── Card
no agregues otro Link dentro sin comprender la estructura.
¿Qué hacer si quiero mostrar publicaciones automáticamente?
No asumas que Social icons realiza esa función.
Necesitarás un componente o integración que realmente obtenga o incruste contenido.
¿Qué hacer si agregué tres imágenes manualmente?
Eso es contenido estático.
No se actualizará por sí solo salvo que exista una funcionalidad específica.
Puedes mantenerlo manualmente
si prefieres ese control.
¿Qué hacer si una publicación incrustada desaparece?
Comprueba primero si:
la publicación continúa disponible;
la URL es correcta;
la plataforma permite mostrarla;
el componente sigue configurado.
¿Qué hacer si un embed no carga?
Prueba mediante:
Ver página
y revisa:
configuración;
URL;
estructura;
cambios avanzados.
No asumas inmediatamente que es un problema de CSS
¿Qué hacer si el contenido incrustado desborda en móvil?
Revisa:
Width;
contenedor;
Grid;
reglas CSS aplicadas.
No utilices un Width fijo mayor que la pantalla
¿Qué hacer si el contenido externo hace lenta la sección?
Considera si realmente necesitas el embed.
Puede ser mejor:
[ Instagram icon ]
Ver nuestras publicaciones
¿Qué hacer si quiero mostrar una publicación puntual?
Utiliza el componente de contenido externo correspondiente cuando esté disponible y configúralo según sus opciones.
¿Qué hacer si quiero mostrar TikTok?
No utilices un icono de TikTok esperando que muestre videos.
El icono funciona como acceso.
Para contenido incrustado necesitas el componente correspondiente cuando sea adecuado.
¿Qué hacer si quiero mostrar Pinterest?
Mismo principio:
Social icon
≠
contenido incrustado
¿Qué hacer si necesito una red no incluida en Social icons?
Puedes construir una composición personalizada mediante:
Link;
Font Icon;
Svg Icon;
si dispones del recurso adecuado y comprendes la estructura.
Conceptualmente
Link
└── Svg Icon
Configura después
URL;
tamaño;
estilo;
Target.
No utilices una imagen de un logo social sin Link
si la intención es que funcione como acceso.
¿Qué hacer si el SVG tiene un tamaño extraño?
Revisa:
Width;
Height;
contenedor.
No apliques un selector global a todos los SVG
Utilizar IA para organizar Redes sociales
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Nuestra empresa tiene estos perfiles:
Instagram:
[descripción de actividad]
LinkedIn:
[descripción]
YouTube:
[descripción]
Facebook:
[descripción]
Quiero seleccionar cuáles deberían aparecer en la Página web.
El objetivo es dirigir a los visitantes hacia canales realmente útiles.
Analiza cada uno según:
- actividad;
- tipo de contenido;
- relevancia para clientes.
No inventes métricas ni seguidores.
IA para redactar la sección
Necesito una sección Redes sociales para una Página web de [sector].
Las redes que realmente utilizamos son:
- Instagram.
- LinkedIn.
- YouTube.
En Instagram publicamos:
[contenido]
En LinkedIn:
[contenido]
En YouTube:
[contenido]
Redacta:
- Heading de máximo 6 palabras.
- Descripción de máximo 22 palabras.
Utiliza español neutro.
No inventes frecuencia, seguidores ni promociones.
IA para revisar URLs
Puedes utilizar una IA para ayudarte a organizar una lista, pero la validación final debe realizarse abriendo cada perfil.
Por ejemplo:
Tengo esta lista:
Instagram → [URL]
LinkedIn → [URL]
YouTube → [URL]
Organízala en una checklist para revisar:
- icono correcto;
- URL;
- nombre visible;
- Target;
- perfil oficial.
No alteres las URLs.
IA para CSS
Por ejemplo:
Estoy personalizando una sección Redes sociales en Waclis.
La sección utiliza:
.redes-section
El contenedor:
.redes-links
Cada enlace:
.social-link
Los iconos:
.social-icon
Necesito:
- iconos centrados;
- contenedor de 48 × 48 px;
- formato circular;
- separación de 12 px;
- Hover con desplazamiento vertical de 2 px;
- permitir Wrap en celular;
- no modificar otros Links, SVG o iconos de la Página web.
No cambies HTML.
No agregues JavaScript.
Devuélveme solamente CSS limitado a .redes-section.
IA para diagnosticar un icono incorrecto
Tengo esta estructura de un icono social en Waclis:
[pegar únicamente Link + Icon]
Visualmente muestra Instagram, pero al hacer clic abre Facebook.
Identifica:
- qué elemento controla el icono;
- qué elemento controla la URL.
No elimines Classes.
No agregues JavaScript.
IA para un embed
Estoy utilizando un componente de contenido incrustado dentro de Waclis.
El contenido corresponde a [plataforma].
Este es únicamente el HTML del componente:
[pegar estructura]
Quiero adaptar su ancho a celular.
No modifiques la URL del contenido.
No cambies la lógica externa.
No agregues otra biblioteca.
Analiza primero qué contenedor debería recibir los estilos responsive.
Buenas prácticas para Redes sociales
Recomendamos:
mostrar únicamente perfiles reales y relevantes;
eliminar redes que no utilizas;
utilizar iconos reconocibles;
verificar que Icon y URL correspondan;
utilizar URLs específicas de cada perfil;
mantener un criterio consistente de Target;
probar todos los Links;
utilizar Navigator;
clonar Link + Icon como una unidad;
revisar URL después de clonar;
mantener IDs únicos;
aprovechar Linked styles;
utilizar Hover moderado;
mantener suficiente área clicable;
adaptar responsive;
utilizar embeds solamente cuando aporten valor;
diferenciar contenido estático de contenido conectado;
revisar periódicamente publicaciones incrustadas;
limitar CSS a la sección.
Errores frecuentes
Mostrar todas las redes disponibles aunque no se utilicen
Publica solamente canales relevantes.
Dejar perfiles de ejemplo
Actualiza todas las URLs.
Cambiar el icono pero no la URL
Revisa Link + Icon.
Clonar Facebook para crear Instagram y mantener Facebook como destino
Modifica Url.
Utilizar la página principal de la red en lugar del perfil
Enlaza al perfil correspondiente.
Utilizar un icono equivocado
Mantén coherencia visual.
Mostrar un perfil antiguo
Revisa los Links periódicamente.
Mostrar una cuenta que no representa a la empresa
Confirma que sea oficial.
Utilizar iconos excesivamente pequeños
Mantén una interacción cómoda.
Pegar demasiado los iconos
Agrega separación.
Hacer cada icono de un tamaño diferente
Utiliza un contenedor común.
Utilizar demasiados colores sin criterio
Mantén coherencia.
Hacer Hover excesivo
La interacción debe ser sutil.
Depender únicamente del Hover
Comprueba móvil.
Eliminar el icono pero dejar Link vacío
Elimina la unidad completa.
Eliminar Link pero dejar un icono que parece clicable
Revisa la estructura.
Duplicar IDs al clonar
Mantén IDs únicos.
Crear un Link dentro de otro Link
Evita enlaces anidados.
Confundir Social icons con un feed automático
Los iconos solo sirven como accesos cuando están configurados de esa forma.
Mostrar imágenes manuales y hacer creer que se actualizan desde una red
Aclara el funcionamiento real.
Crear falsos filtros o controles sociales
No simules funcionalidades que no existen.
Incrustar demasiadas publicaciones
Evalúa rendimiento y utilidad.
Depender de un embed para información esencial
Mantén información importante como contenido propio.
Aplicar CSS global sobre a
Puede afectar todos los Links.
Aplicar CSS global sobre svg
Puede afectar múltiples componentes.
Aplicar CSS global sobre iconos
Limita el scope.
Mantener enlaces sociales rotos
Revísalos periódicamente.
No probar mediante Ver página
Comprueba todos los destinos en el frontend.
Flujo recomendado
1. DEFINIR QUÉ REDES SON RELEVANTES
↓
2. CONFIRMAR PERFILES OFICIALES
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR REDES SOCIALES
↓
5. REVISAR NAVIGATOR
↓
6. MODIFICAR HEADING / TEXTO
↓
7. ELIMINAR REDES INNECESARIAS
↓
8. CONFIGURAR CADA ICONO
↓
9. CONFIGURAR CADA URL
↓
10. REVISAR TARGET
↓
11. PERSONALIZAR ESTILO
↓
12. REVISAR HOVER
↓
13. ADAPTAR RESPONSIVE
↓
14. CONFIGURAR EMBEDS SOLO SI CORRESPONDE
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA
↓
17. ABRIR CADA RED
↓
18. CONFIRMAR QUE CADA PERFIL ES CORRECTO
Checklist antes de publicar Redes sociales
Todas las redes mostradas corresponden a perfiles reales.
Todas son relevantes para la empresa.
Eliminé redes que no utilizamos.
No quedan iconos de ejemplo.
No quedan URLs de ejemplo.
Cada icono corresponde a la plataforma correcta.
Cada URL corresponde al icono correcto.
Las URLs llevan directamente al perfil adecuado.
Los nombres de usuario visibles son correctos.
Las cuentas son oficiales.
Los perfiles continúan activos.
El criterio de Target es consistente.
Probé todos los Links.
Utilicé Navigator.
Al clonar seleccioné Link + Icon.
Revisé URL después de clonar.
Los IDs personalizados son únicos.
Linked styles tiene el alcance esperado.
Los iconos mantienen un tamaño coherente.
Existe suficiente separación.
El área clicable es cómoda.
Los iconos siguen siendo reconocibles.
El Hover es moderado.
La interacción es comprensible sin Hover.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
Los iconos se reorganizan cuando es necesario.
No existe scroll horizontal inesperado.
Los contenidos incrustados aportan valor si existen.
Los contenidos incrustados siguen disponibles.
No confundimos imágenes estáticas con feeds automáticos.
No dependemos de contenido externo para información esencial.
El CSS personalizado está limitado a esta sección.
No utilicé selectores globales que afecten Links, SVG o iconos.
No agregué JavaScript innecesario.
Guardé los cambios.
Revisé el resultado mediante Ver página.
En resumen
La sección Redes sociales permite conectar tu Página web con los canales sociales reales de tu empresa.
Dentro del Editor de bloques puedes utilizar:
Secciones → Redes sociales
y también:
Componentes → Elementos → Social icons
Además existen componentes para determinados contenidos sociales incrustados.
La primera diferencia que debes recordar es:
SOCIAL ICON
→ enlace hacia un perfil
CONTENIDO INCRUSTADO
→ contenido externo mostrado dentro de la Página web
No son lo mismo.
Una estructura habitual de iconos puede ser:
Social Links
├── Link
│ └── Instagram Icon
├── Link
│ └── LinkedIn Icon
└── Link
└── YouTube Icon
Por eso:
cambiar el Icon no cambia necesariamente el Link.
Si clonas Facebook y lo conviertes visualmente en Instagram, debes revisar también:
Contenido → Url
del Link correspondiente.
Después de cualquier modificación:
ICONO
↓
URL
↓
PERFIL REAL
deben coincidir.
También evita agregar redes únicamente porque aparecen en el diseño predeterminado.
Es preferible:
[ Instagram ] [ LinkedIn ]
con dos cuentas relevantes y actualizadas,
que:
[ Instagram ] [ Facebook ] [ X ] [ TikTok ] [ Pinterest ] [ YouTube ]
con varios perfiles sin actividad.
Si utilizas contenido incrustado, recuerda que depende de una plataforma externa y puede:
cambiar;
dejar de estar disponible;
requerir mayor mantenimiento.
Utilízalo cuando realmente aporte valor.
En responsive, una fila de iconos puede mantenerse o reorganizarse:
Desktop
[ IG ] [ LI ] [ YT ] [ FB ]
Mobile
[ IG ] [ LI ]
[ YT ] [ FB ]
cuando el espacio lo necesite.
No hagas los controles diminutos únicamente para conservar una sola fila.
Finalmente:
Guardar Cambios → Ver página → hacer clic en cada icono → confirmar cada perfil.
Una buena sección Redes sociales debe ser:
simple;
reconocible;
actualizada;
responsive;
coherente con los canales que la empresa realmente utiliza.
El objetivo no es demostrar que tu empresa tiene muchas redes.
El objetivo es facilitar que el visitante encuentre los canales sociales que realmente vale la pena seguir.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp