En este tutorial veremos cómo añadir botones para compartir posts en redes sociales en Genesis Framework.

Podéis ver el final de este tutorial para ver cómo quedan estos botones. Si escribes contenido de valor, tus lectores compartirán tus entradas y tendrán mucha más visibilidad.

Antes de nada, repasaremos las tres cosas que necesitaremos:

• El plugin Genesis Simple Share. Lo puedes descargar en el repositorio de plugins de WordPress o más fácil aún, en el instalador de plugins de tu WordPress.
• Utilizar un child theme de Genesis. Esta condición es la más importante de todas. Genesis Simple Share sólo sirve exclusivamente para el framework de Genesis.
• Añadirle estilo CSS. Por defecto, el estilo de los botones que aporta Genesis Simple Share son poco minimalistas. Te proporcionaré el estilo CSS para que se vea mucho mejor.

¿Cumples las tres condiciones mencionadas? ¡Pues entonces vamos a ello!

Agregar botones para compartir con Genesis Simple Share

Los mismos dueños de Genesis, StudioPress, desarrollaron este plugin que funciona a las mil maravillas con su framework. Es el oficial. Por este motivo, no recomiendo otro plugin para compartir en redes sociales que no sea este.

Instalar Genesis Simple Share

La manera más fácil para instalar este plugin es dirigirnos al dashboard de WordPress, ir a «Plugins» y «Añadir nuevo». Buscaremos «Genesis Simple Share», lo instalaremos y activaremos.

Una vez activado, nos dirigiremos en «Genesis», «Simple Share». Esta pestaña podremos editar todos los ajustes del plugin que acabamos de instalar. Veremos algo parecido a esto:

A medida que vayamos cambiando las opciones del plugin, veremos una previsualización en directo de cómo quedarán en nuestra entrada.

No te preocupes si no te acaba de convencer el aspecto visual de los botones para compartir. Los cambiaremos más adelante para que se vean más minimalistas.

Configurar Genesis Simple Share

Vamos a repasar las opciones que tendremos que establecer:

• Tamaño de icono: seleccionaremos la caja. Las otras opciones de botón son muy estrechas y son poco accesibles en pantallas pequeñas.
• Aspecto del icono: es indiferente lo qué elijamos aquí. Esta opción hace referencia a la parte inferior de las cajas, dónde aparece los textos. Como en nuestro caso eliminaremos este texto con estilos CSS, no es importante.
• Posición a mostrar del icono: en mi caso he seleccionado «Después del contenido«, pero puedes elegir la opción que te parezca mejor. Es totalmente subjetivo.
• Ocultar contador: marcaremos esta opción. En caso contrario aparecería un número con las veces que se ha compartido el post en cuestión. Es una característica que no es muy útil, por eso la descartaremos.
• Activar en: deberemos marcar el tipo de post dónde queramos que aparezcan los botones. En mi caso sólo lo he seleccionado en tutoriales, ya que es el único tipo de entrada (Custom Post Type) que utilizo.
• Redes sociales: seleccionaremos las redes sociales que queramos que aparezcan. Te recomiendo que no selecciones todas, simplemente las más apropiadas para tus lectores. En mi caso he seleccionado Facebook, Twitter y LinkedIn. También podemos elegir el orden de aparición, simplemente arrastrando las cajas de las redes sociales.

Una vez hemos acabado guardaremos los ajustes con el botón «Save Changes» que aparece justo debajo de las cajas de las redes sociales.

¡Ya está! Aunque… si le echamos un vistazo cómo aparecen, quizás no nos guste demasiado.

Primeramente, no están centrados verticalmente y el estilo deja mucho que desear. Para ello, añadiremos un poco de CSS para que sean botones más minimalistas y luzcan mejor.

¡Vamos a ello!

Añadir estilo CSS a los botones para compartir de Genesis Simple Share

Para añadir estilo CSS a nuestros botones, tendremos que ir a «Apariencia«, «Personalizar» y «CSS adicional«. En caso que lo añadiéramos en el archivo «style.css» de nuestro tema, cuando lo actualicemos reemplazaría todos los estilos que le hemos añadido, y en consecuencia, los cambios no permanecerían.

Por otro lado, si estamos utilizando un child theme, este problema no lo tendríamos. En este caso sí que te recomendaría añadir estas líneas en el archivo «style.css» de tu child theme.

Con este tema aclarado, copiaremos y pegaremos este código:

/* Genesis Simple Share  */
.share-outlined {
	text-align: center;
}
.box .share {
	display: none;
}

a.count {
    border: none !important;
    border-radius: 0 !important;
    background-color: crimson !important;
    color: #fefefe !important;
} 	
a.count::before {
    position: none;
    line-height: 53px !important;
    top: 0 !important;
    background-color: crimson !important;
    color: #fefefe !important;
    border: 1px crimson solid;
}

a.count:hover::before {
    color: crimson !important;
    background-color: #fefefe !important;
    line-height: 53px !important;
    top: 0 !important;
    -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    -o-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
}

En este código tendrías que cambiar los valores de los selectores «color» y «background-color» por los colores corporativos de tu página web. Te recomiendo que utilices el color principal en el selector »
background-color», y el color de fondo en «color».

Fíjate que en el selector «a.count:hover::before» los colores tienen que ser invertidos, es decir, el color principal en «color» y el color de fondo en «background-color».

Si quieres conocer más acerca de este tema, te recomiendo que leas cuántos y cuáles colores debe usar tu página web.

¿A qué queda mucho mejor? Si quieres ver cómo quedan lo puedes ver justamente aquí debajo.

¡Ah! ¿Y por qué no compartes este tutorial en tus redes sociales? 🙂