Cómo agregar íconos de redes sociales en la barra lateral de tu WordPress

Cada vez que creamos un nuevo sitio web en WordPress, una cosa que nunca olvidamos hacer es agregar íconos de redes sociales. Es una forma sencilla pero poderosa de conectar con nuestra audiencia más allá del sitio web en sí.

Agregar íconos sociales a tu sitio es como dejar un rastro de migas de pan para tus visitantes. Les informa sobre tu presencia en redes sociales y les da una forma fácil de seguirte en diferentes plataformas.

En este artículo, te mostraremos cómo agregar íconos de redes sociales a la barra lateral de tu WordPress.

¿Por qué agregar íconos de redes sociales a tu barra lateral de WordPress?

Una barra lateral de WordPress es un área en tu sitio web que no forma parte de tu contenido principal. Es donde puedes mostrar información adicional que podría interesar a los lectores, como tus publicaciones de blog más recientes y enlaces a tus perfiles sociales.

Agregar enlaces sociales a tu barra lateral de WordPress es una buena idea porque informa a los usuarios sobre tus cuentas de redes sociales. Como resultado, pueden revisarlas, seguirte y ayudarte a aumentar tus seguidores en redes sociales.

Además, mostrar tus cuentas de redes sociales puede generar una sensación de credibilidad y servir como prueba social. Cuando los visitantes ven que tienes una presencia activa en redes sociales, esto demuestra que tu sitio de comercio electrónico o de negocios es confiable.

Muchos blogs de WordPress populares muestran íconos de redes sociales en sus barras laterales, como WPBeginner:

Dicho esto, veamos cómo agregar íconos de seguimiento de redes sociales a la barra lateral de tu sitio web de WordPress.

El método que debes usar depende del tema y editor de WordPress que estés utilizando. Si deseas saltar a una sección específica, puedes usar estos enlaces rápidos:

• Método 1: Agregar íconos sociales con el Editor de Sitio Completo (Temas de Bloques)
• Método 2: Agregar íconos de redes sociales con Widgets de WordPress (Temas Clásicos)
• Método 3: Agregar íconos de redes sociales personalizados con SeedProd (Temas Personalizados)
• Consejo Adicional: Incrusta tus perfiles de redes sociales en tu sitio de WordPress

Método 1: Agregar íconos sociales con el Editor de Sitio Completo (Temas de Bloques)

Si eres usuario de un tema de bloques, puedes agregar botones de redes sociales a la barra lateral de tu WordPress usando el bloque de Íconos Sociales.

Ten en cuenta que el proceso varía según el tema que uses. Algunos temas de bloques pueden incluir una barra lateral por defecto, a la cual puedes agregar el bloque de Íconos Sociales. Algunos también podrían tener un patrón de encabezado que funcione como una barra lateral, y otros podrían no tener barra lateral en absoluto.

En este ejemplo, usaremos un tema de bloques de WordPress predeterminado que ya incluye una parte de plantilla de Barra Lateral por defecto.

Primero, ve a Apariencia » Editor en tu panel de administración de WordPress.

A continuación, deberás seleccionar 'Patrones'.

Esto te llevará a una página donde podrás editar las partes de la plantilla de tu tema, como encabezados, pies de página y barras laterales.

Aquí, selecciona 'Todas las partes de la plantilla'.

Busca la parte de la plantilla de Barra lateral, haz clic en el botón de tres puntos y elige 'Editar'. Esto abrirá el editor de WordPress.

Ahora verás la parte de la plantilla de Barra lateral predeterminada de tu tema. Aquí, las diferentes partes de la barra lateral suelen estar separadas por un divisor de forma, como una línea recta.

Digamos que quieres agregar los íconos de redes sociales debajo de la biografía del autor. En este caso, haz clic en el botón 'Vista de lista' en el lado izquierdo de la página y selecciona el bloque 'Separador' que está justo debajo del grupo de elementos de la biografía del autor.

Haz clic en el menú de tres puntos y selecciona 'Agregar después'.

Ahora, haz clic en el botón ‘+’ en cualquier parte de la página.

Luego, elige el bloque ‘Grupo’.

En esta etapa, puedes continuar y elegir un diseño para el bloque Grupo.

Mantenemos las cosas sencillas, así que elegiremos la primera opción.

Vamos a agregar un texto de llamado a la acción que aparecerá encima de los íconos de redes sociales.

Para hacer esto, simplemente haz clic en el botón ‘+’ dentro del bloque Grupo y selecciona el bloque ‘Párrafo’.

Ahora puedes insertar tu texto de llamado a la acción.

Puede ser cualquier cosa que desees, como ‘Síguenos en Redes Sociales’.

Una vez hecho, simplemente haz clic en el botón ‘+’ nuevamente y busca el bloque ‘Íconos Sociales’.

Ahora puedes empezar a agregar tus plataformas de redes sociales al bloque. Simplemente haz clic en el botón ‘+’ nuevamente y agrega tus botones de redes sociales uno por uno.

Siéntete libre de usar la función de búsqueda para explorar todas las opciones de redes sociales.

Una vez que hayas agregado todos los botones, puedes empezar a agregar enlaces personalizados a tus perfiles sociales.

Todo lo que necesitas hacer es hacer clic en un ícono social e ingresar la URL de tu perfil.

En esta etapa, puedes personalizar cómo se ven los íconos.

Si el tamaño de los botones no es lo suficientemente grande o pequeño, puedes usar la opción ‘Tamaño’ en la barra de herramientas del bloque.

En la Configuración del Bloque a la izquierda, puedes personalizar la justificación, orientación, configuración de enlaces y etiquetas de los íconos.

Recomendamos hacer que los enlaces se abran en una nueva pestaña para que los usuarios no tengan que salir de tu sitio web para visitar tus perfiles sociales.

Si cambias a la pestaña Estilos de Bloque, puedes cambiar los estilos y colores de los íconos para que se adapten al diseño de tu sitio web de WordPress.

Dependiendo de tu preferencia, puedes hacer que todos los íconos tengan colores diferentes o el mismo, como se muestra a continuación.

Al desplazarte hacia abajo en la misma pestaña, encontrarás la configuración de Dimensiones para personalizar el margen y el espaciado del bloque.

Estas configuraciones pueden ser útiles si deseas ajustar el espaciado entre el bloque de Iconos Sociales y otros bloques en la barra lateral.

También es una buena idea agregar un texto de llamada a la acción encima del bloque de Iconos Sociales para resaltar dónde están los botones y animar a los usuarios a convertirse en seguidores o suscriptores.

Para hacer esto, procede a agregar un bloque de Párrafo usando el botón '+'. Asegúrate de que esté encima de los iconos sociales.

Algunos ejemplos de llamadas a la acción que podrías usar son 'Síguenos', 'Únete a más de X lectores' o 'Recibe las últimas actualizaciones'.

Si aún no lo has hecho, también puedes agregar más elementos a la barra lateral, como tus entradas destacadas y comentarios recientes.

Ahora, simplemente haz clic en el botón 'Guardar' en la esquina superior derecha de la página.

Si no ves estos cambios reflejados en tus páginas o publicaciones, lo más probable es que ninguna de ellas esté utilizando la parte de plantilla de Barra Lateral.

Para asegurarte de que tu página deseada esté utilizando una plantilla de página con una Barra Lateral, puedes volver al menú principal del editor de sitio completo. Luego, selecciona 'Páginas'.

Ahora, selecciona la página donde deseas que aparezca la barra lateral y haz clic en el botón 'Editar' con forma de lápiz.

Como ejemplo, usaremos la plantilla de página con la Barra Lateral en nuestra Página de Ejemplo.

En esta etapa, puedes hacer clic en el ícono negro de ‘Configuración’ en la esquina superior derecha.

Luego, haz clic en ‘Páginas’ y selecciona ‘Intercambiar plantilla’.

Verás algunas plantillas de página que tu tema proporciona.

Aquí, simplemente elige la que tiene la barra lateral que acabamos de editar.

Una vez hecho, simplemente haz clic en ‘Guardar’ como de costumbre.

Cuando visites tu sitio web de WordPress, ahora deberías ver una barra lateral con algunos enlaces sociales.

Método 2: Agregar íconos de redes sociales con Widgets de WordPress (Temas Clásicos)

Este siguiente método es para personas que usan un tema clásico de WordPress con áreas de barra lateral listas para widgets.

Para agregar botones de redes sociales a tu barra lateral, simplemente dirígete a Apariencia » Widgets desde tu panel de WordPress.

Luego, navega al área de widgets de WordPress donde deseas agregar el widget de Íconos Sociales. En nuestro ejemplo, seleccionaremos ‘Barra lateral’, pero el nombre puede ser diferente dependiendo del tema que estés usando.

Ahora, haz clic en el botón ‘+’ para agregar bloque en la parte superior izquierda, junto a ‘Widgets’.

Aquí, puedes buscar el bloque de Íconos Sociales.

Después de eso, necesitas hacer clic en este widget de barra lateral o arrastrarlo y soltarlo en cualquier lugar del área de edición.

En general, es mejor agregar tus íconos de redes sociales cerca de la parte superior del área de widgets. De esta manera, pueden captar la atención de tus visitantes desde el momento en que llegan a la página.

Luego, similar al método anterior, puedes hacer clic en el botón ‘+’ para agregar nuevos botones de redes sociales uno por uno al widget.

En el ejemplo a continuación, hemos colocado el bloque de Íconos Sociales debajo del bloque de Búsqueda. También estamos agregando un ícono de WhatsApp.

En este punto, puedes comenzar a agregar tus enlaces sociales.

Para WhatsApp, puedes escribir ‘wa.me/’ y poner tu número de WhatsApp enseguida. No es necesario usar el símbolo +, pero asegúrate de agregar el código de país, como se muestra en esta captura de pantalla.

También tienes acceso a las opciones de Configuración de Bloque y Estilos en el panel derecho.

Para abrir estas opciones, puedes hacer clic en el ícono de ‘Configuración’ en la esquina superior derecha.

Adicionalmente, siéntete libre de agregar un bloque de Párrafo encima del widget de redes sociales para el texto de tu llamado a la acción.

Recomendamos agrupar los bloques de Párrafo e Íconos Sociales para que no se vean separados en la barra lateral.

Para hacer esto, simplemente selecciona el Párrafo e Íconos Sociales juntos. Después de eso, haz clic en el ícono de ‘Transformar’ en la barra de herramientas del bloque y selecciona ‘Agrupar’.

Una vez que hayas terminado, haz clic en el botón ‘Actualizar’ para que los cambios sean oficiales en todas tus barras laterales.

Así es como debería verse el resultado final:

Método 3: Agregar íconos de redes sociales personalizados con SeedProd (Temas Personalizados)

Si usas SeedProd, tendrás más control sobre cómo se ven tus botones de redes sociales en tu barra lateral. Por ejemplo, si usas una plataforma de redes sociales para la que WordPress no tiene un ícono, puedes crear uno tú mismo.

Adicionalmente, puedes ajustar el espaciado de los íconos específicamente para dispositivos móviles.

Si eres nuevo en SeedProd y quieres usarlo, primero necesitas instalar y activar el plugin. Necesitarás la versión Pro para poder acceder a la función de Perfiles Sociales.

Para obtener más información sobre cómo instalar un plugin, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Luego, puedes seguir este tutorial para configurar tu tema con SeedProd.

Ahora, para agregar los iconos sociales a la barra lateral, deberás ir a SeedProd » Theme Builder. Luego, pasa el cursor sobre la plantilla 'Sidebar' y haz clic en 'Edit Design'.

Ya estás dentro del constructor de páginas de SeedProd. El bloque de Perfiles Sociales debería haberse agregado por defecto a la plantilla del tema.

Si no es así, sin embargo, puedes usar la barra de búsqueda en el panel izquierdo y escribir 'Perfiles Sociales'. Después de eso, simplemente arrastra y suelta el bloque donde te sea más conveniente.

No olvides agregar un bloque de Texto encima de los botones y escribir algún texto de llamado a la acción.

De esta manera, diriges la atención de los visitantes a los botones de redes sociales en la barra lateral.

Para personalizar la apariencia de los íconos de los perfiles de redes sociales, simplemente haz clic en el elemento 'Perfiles Sociales'. Aquí verás diferentes pestañas para personalizar los botones.

En la pestaña 'Contenido', puedes agregar más íconos y cambiar el estilo del ícono, el tamaño del ícono y la alineación.

Además de las opciones estándar como Instagram y Facebook, SeedProd también tiene botones para Slack, Telegram, Github y más.

Para agregar un nuevo ícono de red social que SeedProd no tenga por defecto, necesitas hacer clic en el botón '+ Agregar Nuevo Compartir'.

Después de eso, selecciona 'Personalizado' del menú desplegable.

Para editar el botón, haz clic en el símbolo de engranaje de configuración junto al botón de flecha.

Una vez que hayas hecho eso, simplemente selecciona 'Elegir Ícono'.

Ahora, serás redirigido a la Biblioteca de Íconos, donde hay cientos de íconos de marcas para elegir, cortesía de íconos de Font Awesome.

En este ejemplo, usaremos Airbnb. Pero también hay otras opciones para plataformas como LinkedIn o Tumblr.

Una vez que hayas seleccionado un ícono, puedes ajustar el color y agregar el enlace a la página de la red social.

Aquí, hemos decidido mantener el color de marca de Airbnb. Al insertar el enlace de la cuenta social, asegúrate de incluir también el 'https://'.

Lo siguiente es la pestaña 'Plantillas'.

Si cambias a esta pestaña, puedes ajustar el diseño del ícono. Puedes hacerlo más cuadrado, circular y/o monocromático, dependiendo de tus preferencias.

Por último, la pestaña ‘Avanzado’ ofrece más formas de personalizar tus botones de redes sociales.

La sección Estilos es donde puedes cambiar el estilo, color, tamaño, espacio entre los iconos y el efecto de sombra.

En Espaciado, puedes editar el margen y relleno del bloque. Lo genial de SeedProd es que te permite hacer que el margen y el relleno sean diferentes para dispositivos de escritorio y móviles.

Para editar el margen y el relleno, simplemente elige uno de los iconos de dispositivo e inserta tus medidas de margen y relleno así:

Desplazándote hacia abajo, encontrarás Visibilidad del dispositivo y Efectos de animación.

En la primera configuración, puedes optar por ocultar el bloque en el escritorio o en el móvil. Esto puede ser necesario si has elegido usar el bloque de Perfiles Sociales en otra parte de tu sitio web y no quieres iconos duplicados de perfiles sociales.

Con Efectos de animación, puedes seleccionar un estilo de animación para el bloque cuando los iconos se cargan en la página web. Este efecto no es necesario si no quieres distraer demasiado al visitante del contenido principal.

Una vez que hayas configurado el bloque de Perfiles Sociales a tu gusto, simplemente haz clic en el botón ‘Guardar’ en la esquina superior derecha.

O haz clic en el botón ‘Vista previa’ para ver primero cómo se ve la barra lateral.

¡Y eso es todo! Has agregado exitosamente el bloque de perfiles sociales usando SeedProd.

Aquí tienes cómo puede verse el resultado final:

Consejo extra: Incrusta tus perfiles de redes sociales en tu sitio de WordPress

Agregar iconos de redes sociales a tu barra lateral es un gran primer paso para aumentar tu número de seguidores y mostrar prueba social. Dicho esto, también puedes querer incrustar tus feeds de redes sociales directamente en tu sitio de WordPress.

Esto permite a los visitantes ver tu contenido más reciente e interactuar contigo directamente en tu sitio web, lo que potencialmente aumenta el conocimiento y la participación de la marca.

La forma más fácil de incrustar fuentes de redes sociales en WordPress es usando Smash Balloon. Este plugin de redes sociales te permite conectar tu sitio web con varias plataformas sociales e incrustar fuentes de ellas.

¿La mejor parte? Smash Balloon facilita la personalización de estas fuentes a tu gusto. De esta manera, tus fuentes de redes sociales se ven geniales con el resto del diseño de tu sitio web.

Para más información, consulta estos tutoriales:

• Cómo crear una fuente personalizada de fotos de Instagram en WordPress
• Cómo crear una fuente personalizada de Facebook en WordPress
• Cómo mostrar tuits recientes en WordPress (paso a paso)
• Cómo mostrar los videos más recientes de un canal de YouTube en WordPress
• Cómo incrustar videos de TikTok en WordPress

Esperamos que esta guía paso a paso te haya ayudado a aprender cómo agregar iconos de redes sociales a la barra lateral de tu WordPress. También puedes consultar nuestro artículo sobre cómo agregar iconos de redes sociales a tu menú de WordPress y nuestra lista de los plugins de WordPress imprescindibles para sitios de negocios.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.