Como insertar un botón de Click para Twittear

Como insertar un botón de Click para Twittear

boton-click-para-twittear

En el apartado anterior compartí el como colocar una caja de texto en html con la etiqueta textarea, que sirve para colocar códigos y que el navegador los lea como texto y no como lenguaje de programación.

Hoy te explicare como compartir contenido de un sitio web en twitter por medio de un botón en html y Css de fácil configuración. 

Antes de nada quiero comentar que este sistema de click to tweet o plugin social es muy aplicado por bloggeros que tienen sus sitios montados en la plataforma WordPress, y para ellos es muy sencilla su instalación y configuración, solo deben ingresar a la página web donde distribuyen el Plugin Click to Tweet en forma gratuita, lo descargan, configuran y listo.

La forma simplificada de implementar este sistema la pueden encontrar en la pagina de Click to Tweet de forma gratuita, solo ingresas con tu cuenta de twitter, colocas los datos que solicita la pagina y listo ya tienes el enlace para colocar en tu sitio web y pueda ser compartido por tus lectores.

Mejora tu sitio web y obtén más clientes

Suscríbete y conoce las características que tu sitio web necesita para convertirse en un imán de potenciales clientes
  • Multiplica tus ingresos aprovechando al máximo tu sitio web.
  • Comienza a generar tráfico cualificado y de interés para tu oferta.
  • Convierte tus visitas en clientes gracias a una web optimizada.

Tus datos están 100% seguros.
Ahora bien, vamos a implementarlo en nuestro sitio ya sea en paginas diseñadas en HTML o desarrollado con la tecnología blogger, para eso colocamos el código Css del estilo en nuestro archivo style.css o en blogger antes de la etiqueta ]]></b:skin>  y pegamos el siguiente código:

Codigo CSS


/*=====================================
= 
click to tweet 
=====================================*/ 
.tm-tweet-clear { zoom: 1; } 
.tm-tweet-clear:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } 
.tm-click-to-tweet { display: block; background-color: #fff; margin: 0; padding: 0; position: relative; border: 1px solid #dddddd; -moz-border-radius: 4px; border-radius: 4px; padding: 15px 30px; margin: 15px 0px; zoom: 1; } 
.tm-click-to-tweet .clearfix { zoom: 1; } 
.tm-click-to-tweet .clearfix:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } 
.tm-click-to-tweet .clear { clear: both; } 
.tm-click-to-tweet .f-left { float: left; display: inline-block; position: relative; } 
.tm-click-to-tweet .f-right { float: right; display: inline-block; position: relative; } 
.tm-click-to-tweet .list-reset { list-style: none; margin: 0; padding: 0; } 
.tm-click-to-tweet .list-reset li { list-style: none; margin: 0; padding: 0; } 
.tm-click-to-tweet .list-float { zoom: 1; } 
.tm-click-to-tweet .list-float:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } 
.tm-click-to-tweet .list-float li { float: left; display: inline-block; } .tm-click-to-tweet .kill-box-shadow { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } 
.tm-click-to-tweet .alignright { float: right; margin-bottom: 10px; margin-left: 10px; text-align: right; } 
.tm-click-to-tweet .alignleft { float: left; margin-bottom: 10px; margin-right: 10px; text-align: right; } 
.tm-click-to-tweet:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } 
.tm-click-to-tweet .tm-ctt-reset { margin: 0; padding: 0; position: relative; } 
.tm-click-to-tweet:after { display: block; visibility: hidden; height: 0; clear: both; content: "."; } 
.tm-click-to-tweet a { text-decoration: none; text-transform: none; } .tm-click-to-tweet a:hover { text-decoration: none; } 
.tm-click-to-tweet .tm-ctt-text { margin: 0; padding: 0; position: relative; margin-bottom: 10px; word-wrap: break-word; } 
.tm-click-to-tweet .tm-ctt-text a { margin: 0; padding: 0; position: relative; color: #999999; font-size: 24px; line-height: 140%; text-transform: none; letter-spacing: 0.05em; font-weight: 100; text-decoration: none; text-transform: none; } 
.tm-click-to-tweet .tm-ctt-text a:hover { text-decoration: none; color: #666666; } 
.tm-click-to-tweet a.tm-ctt-btn { margin: 0; padding: 0; position: relative; display: block; text-transform: uppercase; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; line-height: 100%; color: #999999; float: right; padding-right: 24px; text-decoration: none; background: transparent url(https://2.bp.blogspot.com/-gfB_n7LVvo0/WKS7rHIcd4I/AAAAAAAAD98/z4W0qZuJZBERF_pEmL71tyIfLwcZI4KEQCLcB/s1600/twitter-little-bird.png) no-repeat right top; } 
.tm-click-to-tweet a.tm-ctt-btn:hover { text-decoration: none; color: #666666; text-transform: uppercase; } 

El siguiente código lo colocaremos dentro de nuestro sitio web o blog, este fragmento de código HTML es el que nos mostrara el botón para compartir el texto en twitter. 

Codigo HTML


<div class="tm-click-to-tweet"> 
<div class="tm-ctt-text">
<a href="https://twitter.com/share?text=insertar un botón de Click para Twittear que puedes colocar en cualquier parte de tu post de forma rápida&amp;via=adaptacionesweb&amp;related=adaptacionesweb&amp;url=http://publisher-adaptacionesweb.blogspot.com/p/laboratorio-css.html" target="_blank">insertar un botón de Click para Twittear que puedes colocar en cualquier parte de tu post de forma rápida</a>
</div>
 <p><a href="https://twitter.com/share?text=insertar un botón de Click para Twittear que puedes colocar en cualquier parte de tu post de forma rápida&amp;via=adaptacionesweb&amp;related=adaptacionesweb&amp;url=http://publisher-adaptacionesweb.blogspot.com/p/laboratorio-css.html" target="_blank" class="tm-ctt-btn">Clic para tuitear</a> </p>
<div class="tm-ctt-tip">
</div> 
</div>

Puedes ver un ejemplo del botón funcionando a continuacion y no olvides dar dar click y compartir el tweet te lo agradecería mucho 

Resultado del Botón:

Derechos: Fuente e Imagen.
Compártelo con tus amigos. ¡GRACIAS!
Publicado por: Vicente Espinoza

Puedo hacerlo yo para ti, porque no tienes tiempo ni ganas: ¡Contrátame Aquí!
O puedo explicarte como crear un sitio web completamente dinámico sin ser un experto en programación web. ¡Suscríbete Ahora!

Mentoría blogging 1:1 Únete Ya!

¿Necesitas ayuda?