Si lo que necesitas es añadir los botones para compartir en redes sociales al final de tus entradas, o posts, este tutorial es para ti.
Para ello vamos a necesitar sólo dos, digo tres cosas:
- Un plugin.
- Un poco de CSS para customizar los botones con el color de nuestra CTA.
- También necesitaremos un theme dónde hacer las pruebas.
Para los ejemplos yo he elegido utilizar nuestro T Theme por que me gusta mucho el color azul que utiliza por defecto en sus CTA’s.
¡Vamos allá!
Cómo añadir botones para compartir en redes sociales utilizando el plugin Genesis Simple Share
Genesis Simple Share es un plugin oficial de Studiopress (los inventores de Genesis), que se integra a la perfección con los hooks del propio framework.
Podrás descargarte el plugin en esta URL o instalarlo desde el gestor de plugins de tu WordPress.
Cuando lo tengas instalado y activado deberás navegar hasta Genesis > Simple share y verás algo muy parecido a esta captura:
Tal y cómo puedes ver el plugin es muy sencillo y claro.
Las opciones de Genesis Simple Share
Una previsualización del aspecto de los botones. A medida que vayas cambiando las opciones verás como cambia el aspecto del diseño de los botones.
En primer lugar eliges el tamaño del icono: barra pequeña, barra mediana o caja.
Después le toca al aspecto del icono: delineado o rellenado.
lógicamente tenemos una opción para controlar la posición en la cual queremos mostrar los botones. Dichas opciones son: antes del contenido, después del contenido, o antes y después del contenido.
Tienes una opción para mostrar o esconder el contador que cuenta el número de veces que tu artículo o post se haya compartido.
Con la opción activar en tienes la opción de mostrar los botones sociales en: posts, páginas, adjuntos ó imágenes, en tus productos, o en las páginas de archivo de las categorías.
Por último, pero no menos necesario, puedes elegir en qué redes sociales quieres compartir tus entradas: Google +, Facebook, Twitter, Piterest, Linkedin y StumbleUpon.
Para cambiar el orden en el que aparecen los botones simplemente deberás arrastrar las cajas de las redes sociales en el orden que tu desees.
Mis opciones utilizadas en el ejemplo
Para este ejemplo yo voy a utilizar las siguientes opciones:
- Tamaño del icono: caja.
- Aspecto del icono: rellenado.
- Posición a mostrar el icono: después del contenido
- Ocultar el contador.
- Voy a activarlo en los posts.
- Voy a utilizar las redes de Facebook, Twitter, Google + y Linkedin además de mantener ese orden.
Si lo has configurado igual en la previsualización verás algo parecido a esto:
Gurdamos los cambios y vamos a ver como queda en nuestro blog:
¡No está mal! pero, ¿y si centramos los botones y les damos un color acorde a nuestra CTA principal?
Cómo cambiar el color y alineado de los botones sociales que crea el plugin Genesis Simple Share
Para mejorar el aspecto de nuestros botones vamos a añadir unas líneas de CSS bien a nuestro archivo ‘style.css’ o bien, a través del Personalizador del Theme en el apartado CSS adicional.
Yo voy a optar por utilizar el Personalizador ya que si actualizo mi child theme no perderé los cambios ya que estos se guardan en la base de datos.
Navega hasta el Personalizador > CSS adicional.
Ahora copia y pega este CSS:
/* Genesis Simple Share
--------------------------------------------- */
.share-before, .share-after {
overflow: auto;
text-align: center;
}
.content a.count,
.content a.count:hover,
.content a.share,
.content a.share:hover {
border: none;
}
.content .share-filled .share {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.content .share-filled .count {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.content .share-filled .facebook .count,
.content .share-filled .facebook .count:hover,
.content .share-filled .googlePlus .count,
.content .share-filled .googlePlus .count:hover,
.content .share-filled .linkedin .count,
.content .share-filled .linkedin .count:hover,
.content .share-filled .pinterest .count,
.content .share-filled .pinterest .count:hover,
.content .share-filled .stumbleupon .count,
.content .share-filled .stumbleupon .count:hover,
.content .share-filled .twitter .count,
.content .share-filled .twitter .count:hover {
color: #2296F3;
border: 1px solid #2296F3;
}
.content .share-filled .facebook .share,
.content .share-filled .facebook:hover .count,
.content .share-filled .googlePlus .share,
.content .share-filled .googlePlus:hover .count,
.content .share-filled .linkedin .share,
.content .share-filled .linkedin:hover .count,
.content .share-filled .pinterest .share,
.content .share-filled .pinterest:hover .count,
.content .share-filled .stumbleupon .share,
.content .share-filled .stumbleupon:hover .count,
.content .share-filled .twitter .share,
.content .share-filled .twitter:hover .count {
background: #2296F3 !important;
}
.content .share-filled .facebook:hover .count,
.content .share-filled .googlePlus:hover .count,
.content .share-filled .linkedin:hover .count,
.content .share-filled .pinterest:hover .count,
.content .share-filled .stumbleupon:hover .count,
.content .share-filled .twitter:hover .count {
color: #2296F3;
}
y guarda los cambios.
El resultado
Si navegas hasta una de tus entradas deberías ver algo parecido a esta hermosa captura:
Mucho mejor ¿no?
¡Así de fácil!
En tu caso sustituye el valor hexadecimal #2296F3 (azul claro), por el color que tu quieras.
Ahora que ya sabes cómo incluir los botones para compartir en redes sociales en tu blog…
¿Qué tal si compartes nuestro artículo en tus redes sociales?
Gracias :)