Seguro que has visto muchos sitios con los iconos de redes sociales en la cabecera o junto al menú y te gustaría conseguir esto al crear tu página web.
Aunque en ocasiones pueden ser un punto de fuga, es cierto que resultan atractivos visualmente y dependiendo del sector, puede interesar que un usuario acuda a ver tus perfiles sociales nada mas acceder a tu Web.
Existen varias formas de insertar iconos de redes sociales en el menú y la cabecera en Wordpress, voy explicarte como hacerlo de las manera más fácil sin necesidad de editar el código.
Vas a ver como conseguir un buen diseño e insertar esos iconos fácilmente y adaptarlos al sitio que quieras mediante el uso de plugins y también de forma manual sin necesidad de ellos.
Si quieres ver como insertar los iconos de facebook, twitter, google+, linkedin, instagram, youtube etc… en la cabecera o dentro del menú de tu WordPress, te lo enseño paso a paso en este Tutorial con Videos de cada caso.
Vamos a ello.
Vas a ver como insertar iconos sociales en la cabecera de tu web a través de dos maneras.
- Usando un plugin como Lightweight social icons
- A través de un shortcode generado con un maquetador.
〉〉 1. Cómo insertar iconos con el Plugin Lightweight Social Icons

Se trata de un plugin para WordPress que permite usar un widget para habilitar esos iconos sociales en cualquier parte de la web, pero también en la cabecera que es donde nos interesa ahora mismo.
Es un plugin muy bueno del mismo creador de la plantilla GeneratePress (plantilla que uso y recomiendo siempre)
Te interesa leer
- Tutorial Generatepress
- Los 23 mejores temas para WordPress premium y gratis
- Las mejores plantillas para Woocommerce
Para usar esta forma de insertar iconos de redes sociales debes instalar el plugin, para ello, accede en el escritorio de WordPress a Plugins>añadir nuevo.
Busca «Lightweight Social Icons«, instálalo y actívalo.
Ahora sólo tienes que acceder a Apariencia>Widgets y una vez dentro arrastrar el widgets de lightweight Social icons al lado derecho «widgets de cabecera»
Puedes ver un ejemplo en esta imagen:
Una vez dentro podrás usar las siguientes opciones:
- Asignar color a los iconos.
- Ajustar su tamaño.
- Dotar de color de fondo.
- Dar más o menos redondez o forma a los distintos logos.
- Usar colores para añadir efecto hover(cambia de color al situar el ratón encima)
- Elige la red Social que quieras entre su enorme lista de redes sociales.
- Elige posición.
- Haz que se abra en otra pestaña nueva del navegador.
- Elige si quieres usar la opción de tooltips (muestra el nombre de la red social al situar el ratón encima del icono)
- Añade tantas redes sociales como quieras…
Una vez hayas configurado todo.haz clic en guardar y ¡listo!
Otros plugins similares que tiene prácticamente las mismas funciones que este son:
- Simple Social icons: Con opciones muy casi idénticas a Lightweight Social icons.
- Easy Social icons: Con él, vas a poder usar aparte de los logos de redes sociales, múltiples iconos ya que usa fontawesome(más abajo verás como funciona)
Además permite no sólo insertarlos a través de widgets, también mediante el uso de un shortcode o mediante código php(si tienes conocimientos)

Otra manera de insertar iconos de redes sociales en la parte de arriba de tu WordPress es usando un shortcode dentro del widget de cabecera.
Para ello necesitas un maquetador que tenga la opción de crear plantillas.
En mi caso yo uso Elementor Page Builder pro que te da está y mil opciones de diseño más.
Te gustará leer:
Contar con un constructor web como Elementor para tu blog, te da la opción de guardar cada diseño personalizado que quieras y adaptarla a cualquier sitio de tu web usando un Shortcode.
Para este caso que estamos viendo, queremos insertar un paquete de iconos en la cabecera que ya hemos creado con ese maquetador y ya tenemos guardados.
Puedes ver una muestra en la imagen de una plantilla guardada con Elementor Page builder:

Para hacerlo sólo tenemos que copiar el shortcode generado por esa plantilla en un widget html dentro del widget de cabecera.
¿No te has enterado de nada verdad? 🙂 Espera que en la imagen lo verás mejor, si no en el video de arriba te lo explico mejor y te vas a enterar perfectamente.
Es muy sencillo como ves, una vez has copiado ese shortcode con los logos de facebook, twitter… , guarda los cambios y ya tendrás los iconos en la cabecera sin necesidad de usar un plugin como en el apartado anterior.
¿Quieres insertar iconos en redes sociales dentro del menú de WordPress?, es muy fácil
Si lo que quieres es que los iconos de redes sociales se muestren dentro del menú de navegación de tu sitio web, en WordPress puedes hacerlo de tres maneras sencillas:
- A través de un plugin como Shorcode in menú
- Usando IconAwesome
- Insertando imágenes descargadas previamente

Para añadir los imágenes de redes sociales dentro del menú de navegación podemos hacerlo optando por el shortcode generado a través de una plantilla creada por un maquetador como Elementor Page builder(exlicado en el apartado anterior).
Para hacer uso de ese shortcode y que los iconos se inserten dentro del menú tienes que descargar un plugin como Shortcode in menus.
Una vez descargado y activo sólo tienes que ir a Apariencia>Menús y copiar ese shortcode generado en el campo nuevo adaptado para ello «Shortcode»
Puedes ver en la imagen como es para entenderlo mejor:
Asegúrate que en las opciones de pantalla de la parte de arriba, está marcada la opción Shortcode, en caso contrario ese campo nuevo no aparecerá
Una vez has insertado el shortcode, haz clic en añadir al menú y listo, ya tendrás los iconos de esa plantilla creada previamente en el menú de navegación.
¿Problema? Poca cosa.
El incoveniente es que los iconos se insertarán muy pegados a los distintos elementos de la barra de menú y lo normal es que estén más a la derecha.
Si esa es tu idea, es muy fácil si añades una linea de Css.
Te voy a mostrar un ejemplo muy sencillo.
Es muy fácil insertar esa linea de CSS ya que sólo queremos desplazarlo hacia la derecha.
Para ello lo primero que tenemos que hacer es localizar la id o class que tienen esos iconos
Esto se hace de manera muy sencilla(ya visto en otros artículos), haz clic en el botón derecho de ratón y selecciona inspeccionar.
Una vez aparezca la barra con la codificación haz clic en el puntero de la esquina superior izquierda.
Acto seguido sitúa el puntero encima de los símbolos sociales y copia la linea que muestra(será el que necesitarás para añadir la linea CSS)
En el video de arriba te indico como se hace, de todas formas de dejo la imagen para que lo entiendas:
Una vez copiada la linea de código accede al escritorio de tu WordPress y en personalizar CSS tendrás que insertar un código parecido al siguiente:
Elige los pixeles que necesites para indicar más o menos distancia de separación.
Hasta aquí una forma sencilla de añdir simbolos sociales en el menú.
Vamos a ver más formas.
〉〉 2. Usar FontAwesome para insertar iconos

La plantilla Generatepress trae por defecto FontAwesome integrado, en caso contrario necesitas instalar en tu WordPress el plugin Better Font Awesome
Este plugin te permite insertar iconos de redes sociales gratis y de manera sencilla en el menú
Para ello, accede a la pagína de FontAwesome.
Una vez dentro selecciona, escoge la opción «Icons» y selecciona el que necesites.
Puedes buscar el que quieras a través del buscador (search icons)
Para el caso que estamos tratando busca: facebook, twitter, linkedin, Google +…
Una vez seleccionado, es tan fácil como copiar el código que muestra.
¿Que hacemos con ese código? Muy sencillo
Accede dentro del escritorio de WordPress a Apariencia>Menús
Copia el código en el campo Enlaces Personalizados>Texto de enlace y en el campo Url introduce tu perfil de la red social que has insertado mediante el icono.
Haz clic en añadir al menú y ya está todo hecho.
Haz lo mismo con cada red social que quieres añadir.
Si quieres puedes usar el mismo procedimiento (si tu plantilla lo permite) y adaptar cada icono social dentro de un menú secundario.

Otra opción que tienes si no quieres instalar ningún plugin, es usar imágenes propias.
Para ello es importante que las imágenes tengan el tamaño, color y peso adecuado antes de subirla para que se adapten perfectamente al tamaño de las letras del menú.
Te puede resultar útil leer:
Aunque puede dar algo más de trabajo es una forma personalizada y simple de crear tus propios iconos y evitar un plugin de instalación.
Una vez tengas todas las imágenes de las redes sociales elegidas, es necesario que crees una entrada de WordPress que luego podrás borrar una vez veas la linea de código de html para redes sociales que se ha generado.
Para ello una vez creada la entrada(de la misma manera que hacemos para crear un post) inserta la imagen y selecciona la versión Html (este será la linea de código que necesitas, copiala)
El siguiente paso será copiar esa línea de código accediendo Apariencia>menú y luego en enlaces personalizados>texto del enlace que será donde copiaremos el código de la misma manera que hicimos en el apartado anterior.
Asigna la url del perfil social que vayas a insertar y ya está.
Como ves en la imagen no cuadra mucho, por eso la importancia de subir imágenes adecuadas en tamaño, forma y color.
Optando por esta última opción prescindirás de instalar plugins en tu WordPress y subir los logos que hayas descargado o creado.
Conclusión
Estas son algunas de las formas de insertar iconos de redes sociales en la cabecera y menús de tu WordPress.
Has visto que son muy sencillas y prácticas de usar, escoge la que más te guste para tu blog y haz que conozcan tus perfiles sociales.
¿Tú cual usas? ¿Conoces otros métodos más sencillos?¿Usas estos iconos en tu web o consideras que desvían la atención? Déjame un comentario y si te ha gustado el post agradezco que puntues el artículo y si lo compartes mejor aún 😉