Botón emergente para tuitear un texto seleccionado | Oloblogger 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 ...

9 de octubre de 2015

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á.

Gadget para tuitear texto seleccionado

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
Copy URL

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

follow us in feedly

12 comentarios :

  1. Hola hace más de un año q entre tu blog y es muy bueno pero lo q más deseo es el código de los botones de compartir q tienes

    ResponderEliminar
  2. Hola, tengo una pregunta, ¿el tweet menciona la fuente de la que se ha extraído el texto? sería muy interesante de cara a ganar difusión de contenido en las redes sociales.

    Por cierto, mucha suerte en los bitácoras, cuentas con mi voto.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Carlos. El tweet incluye un enlace a la página de dónde se extrae el texto, automáticamente. Esa es la gracia. Si controlas un poco JavaScript, sería muy fácil añadir también el usuario (@loquesea).

      Eliminar
  3. Me gusta, pero en mi blog me hace cosas raras ya que se queda el botoncito del pajaro en el texto anterior de la primera foto que haya en la entrada, pero mola a pesar de ello, si sabes porque es el fallo ya me lo comentas, gracias.

    ResponderEliminar
    Respuestas
    1. Puede ser porque usas mucho código inline en tus entradas.
      Por ejemplo, si todas van a estar por defecto alineadas a la izquierda, prográmalo en el CSS y no añadas un <div align="left"> en todas ellas. Todo eso molesta tarde o temprano.
      La que quieras alinear de otra manera ya sí que añades lo que sea, pero lo general debe ser lo programado en plantilla.

      Eliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Recuérdame la dirección de tu blog y dime dónde tienes puesto el gadget, Moni.

      Eliminar
    2. Recién me di cuenta de que te he respondido haciendo otro comentario.
      Bueno, la cuestión es que responde bien si el texto seleccionado está al principio.
      Luego, me pasa lo mismo que a Xisco Servera. Estuve "limpiando código inline de todas mis entradas; y sigue pasando: el pajarillo se va al principio del blog.
      Repito: lo puse en gadget al final de la plantilla. Ya no sé qué hacer. Gracias.

      Eliminar
    3. Hola Moni. Supongo que tras la larga espera, al final lo quitaste. Acabo de echar un vistazo a tu blog y tiene muchos "cacharritos", así que es más que posible que alguno de ellos interfiera con esto... y me resultaría bastante complicado averiguar cual...

      Eliminar
  5. hola tengo una consulta. Soy nuevo en blogger y no entendí bien donde debo pegar este código. Gracias y espero tu respuesta

    ResponderEliminar