Escrito por Matias Adrian Romero

04 Oct 2020

Añadir botones de Redes sociales en Divi

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.0 de Divi 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.

plantila generador de temas divi

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.

crear encabezado personalizado con redes sociales divi

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.

Anadir mas redes sociales divi

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ú.

encabezado personalizado con redes sociales divi
También te puede interesar:

Como crear un menu personalizado en Divi

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

activar iconos sociales en divi

Una vez hayas agregado los iconos de las redes sociales que quieres agregar tienes que entrar en el personalizador de temas.

personalizador de temas

Desde aquí debes acceder a Cabecera y navegación > Elementos de cabecera y activar la opción “Mostrar iconos sociales”

elementos de cabecera

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”

elementos del pie

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.

anadir iconos sociales con divi booster

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í:

anadir relnofollow

Abrir enlaces de las redes sociales en una nueva pestaña

En ese caso debes añadir la etiqueta target=_blank , como por ejemplo:

atributo blank

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.

5/5 (1 Review)

No te vayas aún, hay mucho más…

Los 5 mejores plugins para Divi

Los 5 mejores plugins para Divi

Recopilatorio con los mejores plugins third party para añadir funcionalidades exclusivas a tu página web. Potencia tu Divi al siguiente nivel.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Chat Whatsapp
Acepte nuestra política de privacidad primero para comenzar una conversación.