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)
Si quieres vivir de internet ¡Suscríbete!
Recibe Trucos / Consejos sobre SEO y Monetización
Información básica sobre protección de datos:
- Responsable: José Manuel Peña Fernández
- Finalidad: recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
- Legitimación: tu consentimiento de que quieres comunicarte conmigo.
- Destinatarios: tus datos serán guardados en Webempresa, (proveedor de hosting de Tu Web de Cero) dentro de la UE.
- Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
- Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.
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!
Puedes personalizar este widgets de redes sociales también directamente(si tu plantilla lo ofrece) desde las opciones de personalización de la plantilla, de esta manera podrás ver los cambios en directo
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.
Para poder usar esta opción necesitas Elementor Pro (plan de pago)
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.
Si quieres insertar los iconos en la barra superior(top bar) en vez de la cabecera sólo tienes que seguir el mismo proceso pero eligiendo el widgets «barra superior»
¿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:
.elementor-widget-wrap { padding-left:300px }Elige los pixeles que necesites para indicar más o menos distancia de separación.
Si tu plantilla no dispone de personalizador de CSS puedes descargar un plugin como Simple CSS
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
Fontawesome no solo te permite insertar iconos sociales, también puedes insertar cualquier tipo de imagen delante de cada apartado del menú o en las partes de la web que necesites.
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.
Para ajustarlo a la derecha se hace usando una pequeña linea de código CSS de la misma manera que hemos hecho en el apartado anterior.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.
Para desplazarlo a la derecha puedes usar los ejemplos de CSS de la misma manera que en los apartados anteriores.
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 😉
José que artículo más interesante. Yo uso un plugin, Simple Social Icons, pero he visto que hay muchas otras posibilidades.
Todo sea porque la gente pueda conectarse e interactuar con nosotros en las Redes Sociales.
Gran artículo
A veces podemos hasta evitar el plugin,
Gracias Mónia, me alegra que te haya gustado 😉
Como hacer si mi plantilla no tiene cabecera para agregar el widgets?
Eso va con código Berenice, si tu tema no lo soporta tienes que añadirlo en el functions.php del tema,habla con el soporte del tema a ver si te lo pueden facilitar
Hola, José M.:
Primero, gracias por tu artículo, te explicas perfectamente y facilita las cosas.
Tengo el mismo problema que Berenice. Mi tema es el Advertica Lite, he contactado con Wordpress y no me contestan. Mi servidor one.com, dice que eso es cosa de Wordpress, total que no hay manera. He buscado por Internet y no lo encuentro. La página web que gestiono no es lucrativa, es de un colegio, y yo soy una profesora con algún conocimiento de esto pero… no llego a tanto. ¿Podrías ayudarme?
Un saludo y gracias por atenderme.
Hola Raquel,si tu tema no lo tiene integrado hay que tocar código. Voy a ver si saco tiempo y creo un post sobre ello e intento hacerlo fácil ya que veo que hay interés.
Voy a intentarlo 😉
Hola, lo primero gracias por el post, muy bien explicado.
Tengo un problema con elementor, creo la plantilla pero no me genera shortcode, sale todo como en tu ejemplo, pero no hay shortcode. Hay que tener la versión pro o algo asi?
Hola Tony, sí, se necesita la versión pro
¡Me ha encantado, José!
Me impresiona lo fácil que lo pones, lo bien que lo explicas y la de opciones que nos das. Sin duda, sigo aprendiendo muchísimo contigo, así que gracias por seguir ahí.
Abrazos 😉
Gracias Miguel, me alegro si te ayudo!!
Abrazos!
Hola amigo muy buen articulo, yo tengo varios blogs unos en Blogger y otros en Wordpress, los blogs de Wordpress como tengo Genesis Framework lo que hice fue utilizar el plugin genesis simple share el cual añade botones sociales optimizados que no afectan la velocidad del blog en cuanto a los que tengo en Blogger tuve que añadir los botones para compartir en redes sociales manualmente mediante código HTML y CCS, en si fue sencillo y la velocidad de esos sitios esta super optimizada al no utilizar recursos externos.
Perfecto. Bien empleados evitas usar recursos externos
Muy Util..lo tengo implementado en 2 webs que tengo..saludos y sigue asi
Gracias Lucia, me alegro que lo hayas aplicado en tu proyecto.
ya tengo dos iconos , pero nose la forma en que lo hicieron y quiero agregar otro icono
Un artículo muy útil, me ha ayudado mucho y me ha enseñado algo nuevo. He utilizado Better Font Awesome y he buscado los códigos en la propia web del plugin, ya que dentro de WordPress no he encontrado la opción. ¡Muchas gracias!
Genial, todo lo que sea hacerlo sencillo perfecto!