Comunidad de diseño web y desarrollo en internet online

Crea y personaliza tus propios botones para Twitter


Una de los componentes más importantes de una web es el social. La posibilidad de compartir dicho sitio con más personas para que sea más conocido, visitado y referenciado. Con tal objetivo, solemos insertar botones de redes sociales como facebook, twitter o youtube.

Cada una de estas plataformas nos ofrecen desde sus sitios oficiales la opción de generar el código html que debemos incluir en el sitio web para añadir el botón de dicha red social. En el caso de twitter podemos generar estos botones desde https://about.twitter.com/resources/buttons#tweet.

Pero, ¿qué hay si queremos personalizar dichos botones y darle un estilo diferente y no tan estándar? En este tutorial veremos cómo hacerlo con los botones de twitter, pudiendo modificar el icono del pájaro, el mensaje que contenga el botón y el fondo de dicho botón. Dividiremos el proceso en 3 partes:

  • Estilos Genéricos del botón
  • Personalización del botón
  • Funcionabilidad Share / Follow


Estos son algunos ejemplos de los resultados que podemos obtener:




Advertencias


Antes de comenzar a explicar el proceso de desarrollo de la personalización de estos botones, debemos tener en cuenta algunos puntos:

  • La experiencia de usuario: Ponte en la piel del visitante: si estás navegando por un sitio web que te parece interesante y deseas compartirlo, automáticamente tu mente se pone a buscar a lo largo de la página los botones sociales, entre ellos el propio de twitear. Tenemos interiorizadas las características estándares de dicho botón (pájaro azul, letras negras, fondo blanco aunque gris en la parte inferior, tamaño no muy grande, etc). El visitante no es adivina, no sabe si tú has personalizado dichos botones, por ello tampoco sería recomendable que generes un estilo tan tan diferente que haga que el usuario no lo localice aunque haya pasado la vista por delante de tu botón cuando rastrea la página buscándolo. Tiene que ser fácil de ver, fácil de asociar mentalmente con la acción de twitear, e intuitivo.

  • Selección de colores: Muy relacionado con el punto anterior, y para conseguirlo, debes seleccionar correctamente qué colores usar para el icono del pájaro y las letras que destaquen del fondo, y así mismo de todo ese conjunto que forma el botón para que esté correctamente integrado con el aspecto del sitio web. Por lo general lo recomendable es que el fondo del botón sea muy similar a el fondo del sitio web, de esa forma lo que más destaca es el icono del pájaro y el mensaje de "Tweet" o cualquier otro que queramos poner.



Estilos Genéricos del botón de Twitter


Todo este primer punto puedes seguirlo con el siguiente video




En primer lugar, veremos qué código html y css debemos asociar para poder generar un aspecto propio del botón del twitter.

La etiqueta html que usaremos es <a href=""></a>. El mensaje que queramos que tenga el botón podemos también cambiarlo a nuestro gusto, escribiéndolo dentro de la etiqueta, aunque te recomiendo no pongas algo tan extraño que desoriente al usuario y le haga desconfiar de que el botón realmente hará uso de Twitter. Este sería el código inicial

Código :

<a class="tweet" href="#">Comparte!</a>


Puesto que a continuación iremos viendo cómo crear gamas diferentes de aspecto para los botones, por el momento solo tendremos una clase css asociada al botón para dar los estilo genéricos, la clase "tweet" con las siguientes propiedades css

Código :

.tweet{
   text-decoration: none;
   border: 1px solid black;
   padding: 5px 15px 5px 35px;
   border-radius: 3px;
   font-weight: bold;
   font-size: 17px;
   color: black;
   font-family: "Helvetica Neue", Arial, sans-serif;
   line-height: 15px;
   position: relative;
}




Lo siguiente ahora es insertar el icono del botón. Para ello acudimos a la herramienta online icomoon.io y seguimos los siguientes pasos:

  • Entramos en IcoMoon App
  • Seleccionamos los iconos que deseemos usar y pulsamos el botón "Font"
  • Descargamos la fuente personalizada con las imágenes vectoriales escogidas
  • Descomprimimos el archivo en el directorio de nuestro sitio web y lo asociamos al fichero html



Personalización del botón


Este segundo punto puedes seguirlo en este otro video




Una vez asociado la fuente que nos permite añadir el icono de twitter, en nuestro css le damos las siguientes propiedades al pseudo-elemento :before de nuestra clase "tweet"

Código :


.tweet:before{
   content: "\e602";
   font-family: 'icomoon';
   padding-right: 10px;
   font-size: 17px;
   position: absolute;
   top: 5px;
   left: 12px;
}



El código de la propiedad content dependerá de qué icono sea el que tu quieras incluir de entre todos los que elegiste.



Llegados a este punto tenemos nuestro botón con la imagen del pájaro. Lo que viene ahora es poder definir el fondo degradado de nuestro botón para personalizarlo.
Para ello usamos la herramienta online http://www.colorzilla.com/gradient-editor/ siguiendo los siguientes pasos:

  • Indicamos una orientación vertical en el degradado
  • Marcamos tantos puntos de transición de color como colores tenga nuestro fondo (preferiblemente 2) y cuáles son los colores que tendrá el fondo del botón
  • Copiamos el código generado para aplicarlo a la gama de colores del boton para tweet que estemos generando


Cada gama de estilos personalizados para los botones de twitter serán referenciados en código como otra clase css, la cual tendríamos que asociarla a la etiqueta html. De modo que las propiedades estándares serían la clase "normal" con los siguientes atributos:



Código :

<a class="tweet normal" href="">Twitealo!</a>

Código :


.normal{
   color: #333;
   
   background: rgb(30,87,153); /* Old browsers */
   background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(252,252,252,1) 0%, rgba(214,214,214,1) 100%, rgba(4,5,7,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(214,214,214,1)), color-stop(100%,rgba(4,5,7,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(252,252,252,1) 0%,rgba(214,214,214,1) 100%,rgba(4,5,7,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#040507',GradientType=0 ); /* IE6-9 */
   
}

.normal:before{
   color: #37B4DD;
}




Si queremos crear un botón tipo "dark" con tonos inversos, usaríamos estas propiedades:



Código :


.dark{
   color: #f7f7f7; 
   
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(25,26,63,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(25,26,63,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(25,26,63,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#191a3f',GradientType=0 ); /* IE6-9 */
   
}



Para tonalidades más cálidas tendríamos la clase "hot", quizás más útil para sitios webs de temática más femenina como blogs de maquillaje o similares.



Código :

.hot{

   color: white;
   text-shadow:    1px 1px 1px #151515,
               -1px -1px 1px #151515;
   
background: rgb(252,186,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,186,232,1) 0%, rgba(137,36,23,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,186,232,1)), color-stop(100%,rgba(137,36,23,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(252,186,232,1) 0%,rgba(137,36,23,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcbae8', endColorstr='#892417',GradientType=0 ); /* IE6-9 */
}
.hot:before{
   color: #F7AC0A;
}



Y si queremos tonos más alegres podemos usar esta clase "happy":



Código :

.happy{

   color: #01062B;
   
background: rgb(224,219,80); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(224,219,80,1) 0%, rgba(136,209,35,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,219,80,1)), color-stop(100%,rgba(136,209,35,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(224,219,80,1) 0%,rgba(136,209,35,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0db50', endColorstr='#88d123',GradientType=0 ); /* IE6-9 */
}



Y con esto ya tendríamos todo el aspecto visual. Pero aún nos falta lo más importante: la funcionabilidad


Darle Funcionabilidad a los botones


Este último punto puedes seguirlo con el video final




Añadir Funcionabilidad Share



La clave para que el botón, al ser pulsado, realmente permita al usuario compartir el sitio que está visitando se halla en la propiedad href. El código que debamos atribuirle a dicha propiedad es el siguiente:

Código :

http://twitter.com/share?text=  mensaje que deseemos twitear, con url o menciones incluidas 


De modo que el resultado final del código html para el botón sería, por ejemplo:

Código :

<a class="tweet dark" href="http://twitter.com/share?text=estoy compartiendo algo de forma personalizada http://cristalab.com via @JoseCodFacilito">Twitealo!</a>


Añadir Funcionabilidad Follow



De nuevo, la clave para que nuestro botón permita seguir a un usuario de Twitter se encuentra en la propiedad href, pero con esta otra estructura:

Código :

https://twitter.com/intent/user?screen_name=@nombre_cuenta


Por ejemplo, yo pondría este código para que me sigan en Twitter

Código :

<a class="tweet seguir happy" href="https://twitter.com/intent/user?screen_name=@JoseCodFacilito">Sigueme :)</a>



Conclusión


Como puedes ver, no tienes por qué restringirte a dar el aspecto típico de Twitter a los botones de tu sitio web, puedes cambiarlos a algo más original, creativo y que llame más la atención, generando más interacción lo que facilitaría que tu web sea más compartida.
Por cierto, esto mismo puede hacerse con los botones de facebook. ¿Quieres saber cómo? ;)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate