Bien sea una web empresarial o personal, enlazar con las redes sociales se ha vuelto algo sistemático. Casi imprescindible. Veamos como hacerlo con Sinple Social icons y un par de extras algo avanzados para mejorarlo. Vamos allá!
He de confesar que no soy partidario de mostrar los enlaces de las redes sociales en plena cabecera. Ni siquiera en el pie de página. Y esto tiene una razón de ser.
Se trata de atraer tráfico de las redes sociales hacia la web y no lo contrario. Tu web o la de tu empresa debe ser el centro neurálgico del contenido creado. Por ello no debemos desviar tráfico a las redes sociales, si no lo opuesto.
Dejando de lado mi opinión sobre el tema, vayamos al grano. Trabajemos o no con Genesis podemos usar Simple Social Icons, que enlaza con tus redes sociales, mostrando sencillos y bien diseñados iconos. Cierto es que al ser un plugin de la gente de StudioPress está más que integrado en sus temas y todos ellos tienen soporte para este plugin.
Mi recomendación es poner los iconos en sitios lógicos ( al ahora de que alguien lo busque) pero no muy accesibles, tipo página de “Quien soy” o en la barra lateral de algunas páginas. De manera condicional. De esa forma estarán accesibles para la persona que quiera encontrarlos.
Configurando el plugin
Este es un plugin simple (como su nombre indica), sencillo y que se configura con facilidad. Simple Social Icons no tiene menú en el escritorio de WordPress. Crea, o mejor dicho, aporta un nuevo widget en el que configuraremos como queremos que se vean los iconos de nuestras redes sociales.
Las primeras opciones tienen que ver con los iconos en si (aparte del título). Por orden: si queremos que el enlace se abra en otra ventana la pinchar en los iconos, tamaño del propio icono, esquinas redondeadas del icono, grosor del borde y alineación con respecto a los márgenes.
También podemos configurar los colores del icono, del fondo del icono y del borde. Estos colores los debemos configurar por partida doble. Cada color por defecto, es decir, como se mostrará el icono y luego con el efecto “hover”, que es simplemente cuando pasamos el ratón por encima.
Lo siguiente que vemos es una larga lista de los servicios o redes sociales a las que podemos enlazar. Para ello en cada casilla debemos pegar la URL de nuestro perfil de esa red social. Dejo una lista de los servicios ( redes sociales) a los que se puede enlazar.
- Behance
- Bloglovin
- Dribbble
- Flickr
- Github
- Google+
- Medium
- Periscope
- Phone
- RSS
- Snapchat
- StumbleUpon
- Tumblr
- Vimeo
- YouTube
Como una imagen vale más que mil palabras, os dejo una captura de pantalla de como se vería en el tema Monochrome Pro. Por supuesto configuré los colores de los iconos en escala de grises para que estén en concordancia con el resto del diseño.
Extras (avanzados)
Como tal, este plugin no trae extras, puesto que no tiene menú en el escritorio de WordPress. Pero en su página del repositorio de WordPress, recomiendan dos posibles ediciones a base de código. De ahí el matiz de «avanzados» en el título de la sección.
Orden de los iconos
La primera edición es para cambiar el orden de los iconos. Es normal que queramos destacar una red social poniéndola la primera o agruparlas en base a si son de imagen o vídeo. Cada profesional o empresa tendrá sus necesidades.
No es un código demasiado complejo. Para organizar en distinto orden, simplemente habrá que ordenar la lista en el orden que queremos que aparezcan. Ten cuidado en no dejarte ninguna coma o comilla o te dará error la página.
Coloca los que quieres que aparezcan en primer lugar, en los primeros puestos de la lista. Ordénalos en el orden que quieres que aparezcan.
Te dejo el código para que lo puedas copiar. Este código lo debemos introducir al final del archivo functions.php de nuestro tema activo.
add_filter( 'simple_social_default_profiles', 'custom_reorder_simple_icons' );
function custom_reorder_simple_icons( $icons ) {
// Set your new order here
$new_icon_order = array(
'youtube' => '',
'behance' => '',
'bloglovin' => '',
'dribbble' => '',
'email' => '',
'facebook' => '',
'flickr' => '',
'github' => '',
'gplus' => '',
'instagram' => '',
'linkedin' => '',
'medium' => '',
'periscope' => '',
'phone' => '',
'pinterest' => '',
'rss' => '',
'snapchat' => '',
'stumbleupon' => '',
'tumblr' => '',
'twitter' => '',
'vimeo' => '',
'xing' => '',
);
foreach( $new_icon_order as $icon => $icon_info ) {
$new_icon_order[ $icon ] = $icons[ $icon ];
}
return $new_icon_order;
}Por defecto en Simple Social Icons vienen ordenados en orden alfabético. He puesto a Youtube el primero para que veas como se cambiaría el orden ;).
Más redes sociales
La segunda, es lógicamente añadir un icono que no aparezca en el plugin. Esto está dirigido para desarrolladores que trabajen en proyectos muy nicho que se muevan en redes sociales muy concretas y específicas.
Esta opción es más compleja. Implica tener un archivo SVG con una configuración concreta. No es que sea imposible de implementar pero desde luego no es de las fáciles. Tenéis una porción de código y luego el archivo SVG.