Los iconos de redes sociales son una funcionalidad imprescindible en casi cualquier página web.
Te voy a enseñar cómo integrar las redes sociales en tu web utilizando tres métodos muy sencillos.
El primero es utilizando el nuevo constructor de temas, esta funcionalidad apareció con la versión 4 y permite crear menús y pie de páginas 100% personalizados.
La segunda forma de hacerlo es utilizando el método clásico, con las opciones del tema, esta forma es más limitada, pero requiere menos tiempo.
Y por último te voy a enseñar como añadir los iconos sociales con el plugin Divi Booster.
⌛ Tiempo estimado de lectura: 3 minutos
Utilizando el nuevo Divi Theme Builder
Importante: Si vas a añadir los iconos sociales utilizando el theme Builder, recuerda que además vas a tener que crear el resto del encabezado o pie de página, ya que sustituirá al que trae por defecto.
Lo primero que tienes que hacer es acceder al Generador de temas, desde el panel de administración de WordPress.
Aquí puedes elegir o bien agregar un encabezado personalizado o un pie de página personalizado.
En este caso vamos a crear un encabezado con una distribución de columnas 2/3 + 1/3. En el lado izquierdo agregamos el menú y en el derecho el módulo de redes sociales.
Desde la configuración del módulo de seguir en medios sociales puedes agregar cualquier red social, actualmente divi dispone de un catálogo de más de 100 medios sociales.
Una vez hayas agregado las redes sociales que necesitas, simplemente debes personalizar el resto del encabezado a tu gusto.
Aquí te dejo una captura de como he personalizado yo mi menú.
También te puede interesar:
Método clásico desde las opciones del tema
Antes de la llegada del theme Builder, la única opción de agregar iconos sociales en divi era utilizando las opciones de tema.
Panel de administración de WordPress > Divi > Opciones de Tema
Una vez hayas agregado los iconos de las redes sociales que quieres agregar tienes que entrar en el personalizador de temas.
Desde aquí debes acceder a Cabecera y navegación > Elementos de cabecera y activar la opción “Mostrar iconos sociales”
En el caso de que quieras agregarlos en el pie de página debes ir a Pie > Elementos del Pie y activar la opción “Mostrar iconos sociales”
El principal problema es que por defecto solo trae 4 redes sociales: Facebook, Twitter, Google+ e Instagram.
Vamos a ver 2 métodos para agregar más iconos sociales en Divi
Añadir más iconos sociales con código
Tienes que editar el archivo “social_icons.php”, este archivo lo puedes encontrar accediendo vía FTP en la siguiente ruta:
wp-content/themes/Divi/includes
Aquí te dejo alguno de los códigos para agregar los iconos sociales más usados, debes copiarlo al final del archivo antes de la etiqueta </ul>
Código icono Instagram
<?php if ( 'on' === et_get_option( 'divi_show_instagram_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-instagram">
<a href="<?php echo esc_url( et_get_option( 'divi_instagram_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>Código icono Youtube
<?php if ( 'on' === et_get_option( 'divi_show_youtube_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-youtube">
<a href="<?php echo esc_url( et_get_option( 'divi_youtube_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Youtube', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>Código icono Linkedin
<?php if ( 'on' === et_get_option( 'divi_show_linkedin_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-linkedin">
<a href="<?php echo esc_url( et_get_option( 'divi_linkedin_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>Código icono Pinterest
<?php if ( 'on' === et_get_option( 'divi_show_pinterest_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-pinterest">
<a href="<?php echo esc_url( et_get_option( 'divi_pinterest_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>Código icono Flickr
<?php if ( 'on' === et_get_option( 'divi_show_flickr_icon', 'on' ) ) : ?>
<li class="et-social-icon et-social-flickr">
<a href="<?php echo esc_url( et_get_option( 'divi_flickr_url', '#' ) ); ?>" class="icon">
<span><?php esc_html_e( 'Flickr', 'Divi' ); ?></span>
</a>
</li>
<?php endif; ?>Después de copiar el código, simplemente debes sustituir el # por la URL de tu perfil social.
Agregar iconos sociales en divi utilizando un plugin
Una opción que usamos bastante a menudo en nuestro servicio de diseño web malaga es el de vitaminar divi con el plugin Divi Booster.
Este plugin permite añadir funcionalidades muy interesantes a las que trae Divi de base.
Puedes agregar directamente el enlace de tu red social favorita y aparecerá tanto en el pie de página como en el encabezado.
Si la red social que quieres añadir no está entre el listado puedes agregarla directamente desde el personalizador de temas.
Otra opción interesante a activar es la de abrir los enlaces en una nueva pestaña.
Cómo personalizar los atributos de los iconos sociales
Agregar atributo nofollow
Si quieres que los enlaces de tus iconos sociales sean nofollow, es decir que no traspasen autoridad. Entonces tienes dos opciones:
Si has agregado los iconos siguiendo el primer método con el Theme Builder, entonces debes añadir la siguiente línea de código al archivo functions.php
<script>
(function ($) {
$(document).ready(function () {
$(‘.et-social-icon a’).attr({
‘target’: ‘_blank’,
‘rel’: ‘nofollow’
})
});
})(jQuery);
</script>Si has utilizado el método clásico, entonces cuando vayas a añadir las redes sociales en el archivo social_icons.php debes incluir el siguiente atributo dentro de la etiqueta <a>
rel=nofollow
Quedaría algo tal que así:
Abrir enlaces de las redes sociales en una nueva pestaña
En ese caso debes añadir la etiqueta target=_blank , como por ejemplo:
Conclusión
Añadir iconos sociales en tu plantilla divi es bastante sencillo y rápido, dependiendo de tus necesidades puedes utilizar el theme Builder o las opciones del tema para agregar y personalizar estos botones.
Espero que te haya sido de utilidad y nos vemos en el próximo post.
¡Hola! Soy Matías Romero, diseñador web y consultor de SEO local. Me verás por aquí hablando de diseño web, wordpress, consejos de SEO, Google Maps y lo que se me vaya ocurriendo.
Nos vemos en las SERPS 😉
0 comentarios