Questo articolo spiega come fare in modo che, quando si seleziona del testo su una pagina web, appaia un pulsante che, una volta cliccato, rimanda a Twitter e apre una finestra pop-up per la composizione di tweet. Il testo apparirà nel testo, seguito dal link alla pagina da cui è stato ottenuto.
È simile a ciò che alcuni chiamano "frasi tweettabili", solo che in questo caso non è necessario programmare frasi specifiche; invece, qualsiasi cosa l'utente selezioni verrà inviata direttamente a Twitter, né più né meno.
Beh, meno, sì, perché il codice si occupa di eliminare le immagini selezionate e di troncare il testo in modo che il numero di caratteri inviati non superi il massimo consentito dalla rete Blue Bird.
Allora, cosa aspetti a provarlo? È installato subito in questo post. Seleziona la frase che desideri e vedrai un pulsante blu con il logo di Twitter; cliccaci sopra e guarda il risultato. Non preoccuparti, finché non ci clicchi sopra, vedrai il risultato.
Cinguetta
, il messaggio non verrà inviato.
La verità è che il codice è un po' complicato se si ha una buona padronanza di JavaScript, ma dato che ne so abbastanza, non ho avuto altra scelta che rivolgermi a qualcuno che ne sa molto di più per finire di perfezionarlo. Quel qualcuno si chiama...+Furoya Il, collaboratore abituale del blog KsesoCss per argomenti JS . Entrambi sono altamente raccomandati.
Per semplificare le cose ai blogger, il codice è impostato in modo da poterlo copiare e incollare in un gadget in una volta sola... e funzionerà.
<style>
.post-body {posizione: relativa !importante;}
#pajarito {display: none;posizione: assoluta;larghezza: 25px;altezza: 25px;margine: -2em 2em 0 0;sfondo: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmK2GYUXNB5s-eRPrH9OlDetH6ble_PK5ZZcdjgEV5ZBXXAb w3YXmpFi0AYr8gGGMW7vAnd_0iGRy6jqwIo7KoPclMmL8B6HId2iIvhcnjwtQ1ZeHDWnChEisl6D3xBuOvNkpUqPNndh0/s1600/twitter.png) bianco;bordo: solido .2em #0CB7F2;border-radius: 100%;cursor: pointer;}
#bird:hover {background-color: #eee;}
</style>
<script type="text/javascript">
var selected = '';
var horiz, vert, reference;
function load() {
reference = document.getElementsByClassName('post-body')[0];
var little bird = document.createElement('span');
little bird.setAttribute('id', 'little bird');
littlebird.setAttribute('onmousedown', 'open()');
reference.appendChild(littlebird);
reference.onmouseup = capture;
}
function capture(e) {
selected = (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text);
se (selezionato != '') {
se (e.offsetX == non definito) {
orizz = e.pageX - $(this).offset().sinistra;
vert = e.pageY - $(this).offset().top;
}
altrimenti {
orizz = e.offsetX;
vert = e.offsetY;
}
document.getElementById('uccellino').style.display = 'inline-block';
document.getElementById('uccellino').style.left = orizz + 'px';
document.getElementById('uccellino').style.top = vert + 'px';
} altrimenti {
document.getElementById('uccellino').style.display = 'none';
}
}
function opens() {
var source = window.location.href;
var messaggio = selected.toString().substring(0, 100).replace('#','%23');
var indirizzo = 'http://twitter.com/home?status=' + messaggio + ' ' + origine;
window.open(indirizzo,'','larghezza=500,altezza=500');
}
onload = caricamento;
</script>
La spiegazione di come funziona è relativamente semplice.
Per prima cosa, diamo un'occhiata allo stile. Con esso, posizioniamo il contenuto dei post ( .post-body ) in modo relativo, in modo da poter posizionare correttamente il pulsante in relazione al contenuto selezionato. Il prossimo è il pulsante ( #pajarito ), inizialmente nascosto. Le dimensioni del box e l'immagine di sfondo di questo ID possono essere facilmente modificate per personalizzare l'aspetto finale.
Per quanto riguarda il JS, ci sono tre funzioni che fanno tutto: load() , capture() e open() .
La prima crea l'elemento corrispondente al pulsante all'interno del corpo del post e poi controlla con onmousedown se viene premuto un pulsante del mouse, nel qual caso viene avviata la funzione open() . Questa, a sua volta, ottiene l'indirizzo della pagina, il testo selezionato (che tronca a 100 caratteri), genera il link necessario per accedere a Twitter in modalità tweet broadcast e infine avvia il pop-up.
La funzione capture() rileva esattamente il testo selezionato e in quale punto è stata effettuata la selezione, per poi posizionare il pulsante nelle vicinanze e renderlo visibile.
Tutto questo può essere sicuramente migliorato, quindi qualsiasi variante vi venga in mente può essere testata clonando questo Codepen , modificandolo e linkando il vostro risultato nei commenti.
Vogliamo dare un'occhiata a un altro post a caso, nel caso lo trovassi utile, o forse preferisci essere più sistematico e iscriverti ai nostri post via email ? Puoi anche stampare questo articolo e, naturalmente, condividerlo sui social media se ti è piaciuto.
Commenti
Posta un commento