Botón emergente para tuitear un texto seleccionado

Este artículo de lo que trata es de cómo hacer para que al seleccionar un texto en una página web, aparezca un botón que al pulsarlo enlace con Twitter y se abra una ventana emergente de las de redactar tuits. En ella aparecerá escrito dicho texto y a continuación el enlace de la página desde dónde se obtuvo.

Es algo parecido a lo que algunos llaman "frases tuiteables", sólo que en este caso no hay que estar programando frases concretas, sino que directamente se remitirá a Twitter aquello que el usuario seleccione, ni más ni menos.

Bueno menos sí, porque el código se ocupa de eliminar las posibles imágenes seleccionadas y de truncar el texto para que el número de caracteres a enviar no supere el máximo que atiende la red del pájaro azul.

Y bien ¿a qué estáis esperando para probarlo? Ahora mismo está montado en esta entrada. Selecciona la frase que quieras y verás un botón azul con el logo de Twitter; pincha en él y observa el resultado. Tranquilos, que hasta que no le déis a

Twittear

, el mensaje no se enviará.

La verdad que el código es una pequeña chorrada si se controla bien JavaScript, pero como de eso sé lo justo no tuve más remedio para terminar de afinarlo que acudir a alguien que sabe bastante más. Ese alguien atiende por el nick de +Furoya El, un colaborador para las lides de JS habitual en el blog KsesoCss. Ambos dos muy recomendables.

---

Para que no os compliquéis lo más mínimo los de Blogger, el código está montado para poder ser copiado y pegado del tirón en un gadget... y que funcione.

<style>
.post-body {position: relative !important;}
#pajarito {display: none;position: absolute;width: 25px;height: 25px;margin: -2em 2em 0 0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmK2GYUXNB5s-eRPrH9OlDetH6ble_PK5ZZcdjgEV5ZBXXAbw3YXmpFi0AYr8gGGMW7vAnd_0iGRy6jqwIo7KoPclMmL8B6HId2iIvhcnjwtQ1ZeHDWnChEisl6D3xBuOvNkpUqPNndh0/s1600/twitter.png) white;border: solid .2em #0CB7F2;border-radius: 100%;cursor: pointer;}
#pajarito:hover {background-color: #eee;}
</style>
<script type="text/javascript">
var seleccionado = '';
var horiz, vert, referencia;
function carga() {
referencia = document.getElementsByClassName('post-body')[0];
var pajarito = document.createElement('span');
pajarito.setAttribute('id', 'pajarito');
pajarito.setAttribute('onmousedown', 'abre()');
referencia.appendChild(pajarito);
referencia.onmouseup = captura;
}
function captura(e) {
seleccionado = (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);
if (seleccionado != '') {
if(e.offsetX == undefined){
horiz = e.pageX - $(this).offset().left;
vert = e.pageY - $(this).offset().top;
}
else{
horiz = e.offsetX;
vert = e.offsetY;
}
document.getElementById('pajarito').style.display = 'inline-block';
document.getElementById('pajarito').style.left = horiz + 'px';
document.getElementById('pajarito').style.top = vert + 'px';
} else {
document.getElementById('pajarito').style.display = 'none';
}
}
function abre() {
var origen = window.location.href;
var mensaje = seleccionado.toString().substring(0, 100).replace('#','%23');
var direccion = 'http://twitter.com/home?status=' + mensaje + ' ' + origen;
window.open(direccion,'','width=500,height=500');
}
onload = carga;
</script>

La explicacion de cómo funciona esto es relativamente sencilla.

En primer lugar vemos el estilo. Con él posicionamos de manera relativa el contenido de las entradas (.post-body) para después poder ubicar bien el botón con relación a lo seleccionado. Lo siguiente es el botón (#pajarito), inicialmente oculto. El tamaño de la caja y la imagen de fondo de esta id la podéis cambiar fácilmente para personalizar la apariencia final.


Con respecto al JS hay tres funciones que lo hacen todo, carga(), captura() y abre().

La primera crea el elemento correspondiente al botón dentro del cuerpo de las entradas y a continuación controla con onmousedown si se pulsa algún botón del ratón, en cuyo caso arranca la función abre(). Esta por su parte consigue la dirección de la página, el texto seleccionado (que trunca a 100 caracteres), genera el enlace necesario para acceder a Twitter en modo emisión de tweet y por último lanza el pop up.

La función captura() básicamente se ocupa de detectar cuál es exactamente el texto seleccionado y en qué punto se ha hecho dicha selección para poder luego ubicar el botón cerca al tiempo que lo hace visible.


Todo esto seguro que es mejorable, así que cualquier variante que se os ocurra la podéis probar clonando este Codepen, modificándolo y enlazando vuestro propio resultado en los comentarios.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter