Añadir botones de redes sociales a tu página web

Las redes sociales son imprescindibles para tu presencia online. Si colocas botones y feeds de redes sociales en tu página web, facilitas que los visitantes te sigan y compartan contenido. Así aumentas tu alcance y creas una comunidad en torno a tu marca.

Por qué integrar las redes sociales

Las ventajas de las redes sociales en tu página web:

  • Los visitantes pueden seguirte con un clic
  • El contenido se comparte con más facilidad
  • Prueba social al mostrar tus seguidores
  • Contenido nuevo a través de los feeds sociales
  • Mejor reconocimiento de marca
  • Más tráfico desde las plataformas sociales

Añadir iconos de redes sociales

Paso 1: Colocar el bloque de iconos

  1. Abre tu página en el creador de páginas web
  2. Haz clic en el icono más para añadir un elemento
  3. Busca Iconos sociales o Redes sociales
  4. Arrastra el bloque hasta la posición que quieras

Paso 2: Seleccionar las plataformas

Elige qué plataformas quieres mostrar:

  1. Haz clic en el bloque de iconos sociales
  2. Ve a Ajustes
  3. Marca las plataformas que usas:
    • Facebook
    • Instagram
    • LinkedIn
    • X (antes Twitter)
    • YouTube
    • TikTok
    • Pinterest
    • WhatsApp Business

Paso 3: Añadir los enlaces

  1. Haz clic en cada icono
  2. Pega la URL de tu perfil
  3. Por ejemplo: https://www.facebook.com/jouwpagina
  4. Repite el proceso con todas las plataformas

Estilo de los iconos

Ajusta el aspecto para que encaje con tu página web.

Estilos de icono

Elige un estilo para tus iconos:

  • Relleno: icono con fondo de color
  • Contorno: solo el borde del icono
  • Minimalista: iconos sencillos de línea
  • Cuadrado: con esquinas redondeadas
  • Redondo: iconos circulares

Ajustar los colores

  1. Selecciona el bloque de iconos
  2. Ve a Diseño
  3. Elige:
    • Colores originales: azul de Facebook, degradado de Instagram, etc.
    • Un color: todos del mismo color (acorde con tu imagen corporativa)
    • Colores personalizados: se configuran por icono

Tamaño y espaciado

Ajusta el tamaño:

  1. Arrastra el control de tamaño
  2. Define el espacio entre iconos
  3. Elige la alineación horizontal o vertical

Añadir botones para compartir

Permite que los visitantes compartan tu contenido en redes sociales.

Colocar el bloque para compartir

  1. Ve a la página que quieres que se pueda compartir
  2. Añade un elemento Botones para compartir
  3. Colócalo junto a tu artículo o producto

Plataformas para compartir

Elige qué plataformas estarán disponibles:

  • Compartir en Facebook
  • Compartir en LinkedIn
  • Publicar en X (Twitter)
  • Enviar por WhatsApp
  • Reenviar por correo electrónico
  • Copiar el enlace

Configurar el contenido que se comparte

  1. Abre los ajustes del bloque para compartir
  2. Configura:
    • URL: la página actual o un enlace concreto
    • Título: lo que se comparte
    • Imagen: a través de los ajustes de Open Graph

Mostrar feeds de redes sociales

Muestra tus últimas publicaciones directamente en tu página web.

Feed de Instagram

  1. Añade un elemento Feed de Instagram
  2. Conecta tu cuenta de Instagram
  3. Configura:
    • Número de publicaciones (4, 6, 8, 12)
    • Distribución en columnas
    • Mostrar u ocultar los me gusta y los comentarios

Feed de Facebook

  1. Añade un elemento Feed de Facebook
  2. Vincula tu página de Facebook
  3. Elige qué publicaciones se muestran
  4. Ajusta el estilo del feed a tu gusto

Actualizaciones automáticas

Los feeds se actualizan automáticamente cuando publicas contenido nuevo en redes sociales. No tienes que hacer nada a mano.

Sugerencias de colocación

¿Dónde es mejor colocar los elementos de redes sociales?

Cabecera o pie de página

La ubicación más habitual:

  1. Ve a la plantilla de cabecera o de pie de página
  2. Añade los iconos sociales
  3. Ahora aparecen en todas las páginas

Barra lateral

Para blogs y páginas web de contenido:

  1. Crea una sección de barra lateral
  2. Añade botones para seguirte
  3. Muestra tu feed de Instagram

Página de contacto

Un lugar lógico para los enlaces sociales:

  1. Coloca los iconos junto a tus datos de contacto
  2. Añade un mensaje personal
  3. Combínalo con un mapa

Artículos del blog

Junto a tus artículos o debajo de ellos:

  1. Añade botones para compartir encima o debajo del contenido
  2. Muestra al autor con sus enlaces sociales
  3. Anima a compartir con una llamada a la acción

Buenas prácticas

Mantén la relevancia

  • Muestra solo las plataformas que uses de forma activa
  • Elimina los perfiles inactivos
  • Calidad antes que cantidad

Imagen de marca coherente

  • Usa la misma foto de perfil en todas las plataformas
  • Mantén coherente el nombre de tu empresa
  • Enlaza a perfiles profesionales

Optimización para móviles

  • Comprueba que los iconos sean lo bastante grandes para tocarlos
  • Comprueba que los enlaces se abran correctamente en el móvil
  • Plantéate usar botones sociales fijos

Opciones avanzadas

Botón de chat de WhatsApp

Añade un botón de WhatsApp para el contacto directo:

  1. Añade un elemento Botón de WhatsApp
  2. Escribe tu número de teléfono de empresa
  3. Define un mensaje predeterminado
  4. Elige la posición (a menudo abajo a la derecha)

Mostrar prueba social

Muestra tu número de seguidores:

  1. Algunos widgets muestran los seguidores automáticamente
  2. Usa las insignias de las plataformas
  3. Ten cuidado con las cifras bajas

Optimización de Open Graph

Determina el aspecto de tus páginas cuando se comparten:

  1. Ve a Ajustes de la página y selecciona SEO
  2. Desplázate hasta Redes sociales
  3. Sube una imagen OG (1200x630 píxeles)
  4. Escribe un título y una descripción atractivos

Preguntas frecuentes

Los iconos no se muestran

Comprueba:

  • ¿Se ha añadido bien el elemento?
  • ¿Son válidas las URL?
  • ¿Hay algún conflicto con tu tema?

Los enlaces no se abren bien

Asegúrate de que:

  • Las URL empiecen por https://
  • Uses la URL completa
  • Los enlaces se abran en una pestaña nueva

El feed no se carga

Prueba a:

  • Volver a conectar la cuenta
  • Comprobar los permisos en la plataforma
  • Vaciar la caché