Come condividere su Twitter il testo selezionato su Blogger.

Come twittare in automatico il testo selezionato in Blogger cliccando sulla icona che verrà mostrata sotto forma di tooltip.

La condivisione sui social network è uno dei modi più efficaci per rendere virale i contenuti del nostro sito. Google Plus è in forte ribasso dopo che la casa madre ha deciso di non investirci più quindi rimangono Facebook e Twitter i luoghi di destinazione più importanti delle condivisioni.

I lettori possono usare i classici bottoni di condivisione per twittare i titoli dei post ma non sempre questi sono attraenti perché sono rivolti essenzialmente ai motori di ricerca. In questo modo si possono perdere delle potenziali condivisioni. Infatti se un navigatore volesse condividere una frase presente nel post dovrebbe selezionarla, copiarla quindi aprire il proprio account Twitter, incollarla e inviarla ai follower.

Se avete dei dati interessanti riguardo alle condivisioni via Twitter potrebbe risultare utile inserire nel vostro sito un sistema automatico per la condivisione di un testo selezionato. Con l'inserimento nel template di Blogger di un apposito script basato su jQuery si può rendere più facile questa operazione

Chi selezionerà una porzione di testo del sito visualizzerà l'icona di Twitter e, cliccandoci sopra, si aprirà una nuova scheda con cui twittare il testo selezionato insieme all'URL del post e al vostro account Twitter. Questo ovviamente sarà possibile solo se il lettore è loggato con Twitter.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga </body>.  Subito sopra a questa riga si incolla questo codice

<!-- Twittare testo selezionato - Inizio -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<style>
.twittatesto {
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.twittatesto span {
position:absolute;
content:&quot; &quot;;
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.twittatesto a {
color:#f16786;
}
.twittatesto:hover {
background:#5EA9DD;
}
.twittatesto:hover span {
border-top-color:#5EA9DD;
}
.IpCeItooltip {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.IpCeItooltip a {
width:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9Dy2FixmAqYSxYuDOSSBx8uk_8kbYyyHNCFdvFdssnnkWDYlglfgLC7v4dnApYmRYzfQoamPa3tXV9pR7tA_ku_anSWKMPspC2P3oAQ2VR-7SVbTJwqyvkDLw0AFyuba1yxkOeBHoKc/s41-Ic42/twitter-button.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.condividilink {
display:block;
position:absolute;
text-indent:-9999px;
}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function() {
sharetext = '';
$(document).mousemove(function(m) {
generateTooltipPosition();
});
});
$(document).mouseup(function() {
$(document).mousemove(function(m) {
generateTooltipPosition()
});
var sharetext = getText();
var twittatesto = document.getElementById("twittatesto");
if (sharetext != '') mostratooltip();
});
$(document).click(function() {
var sharetext = getText();
var titolotooltip = null;
var newTooltipTitle = $("#twittatesto").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== titolotooltip) $('#twittatesto').animate({
opacity: 0
}, 30);
if (sharetext != "") mostratooltip();
});
$(window).resize(function() {
if ($('#twittatesto').show()) {
$('#twittatesto').animate({
opacity: 0
}, 30);
}
});
function mostratooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getText() + "&via=" + AccountTwitter + "&url=" + pageURL;
$('#twittatesto').show();
$('#twittatesto').animate({
opacity: 1
}, 30);
$('#InviaTwitter').attr('href', twitterLink);
}
function getText() {
shareTxt = '';
if (window.getSelection) {
shareTxt = window.getSelection();
generateTooltipPosition();
} else if (document.getSelection) {
shareTxt = document.getSelection();
generateTooltipPosition();
}
return shareTxt;
}
function generateTooltipPosition() {
var selection = window.getSelection && window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
pos = $(window).scrollTop();
selection_text = selection.toString(), rect = range.getBoundingClientRect();
$('#twittatesto').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>
<script>
/*<![CDATA[*/
var AccountTwitter =  "parsifal32";
/*]]>*/
</script>
<div class='twittatesto' id='twittatesto'>
<div class='IpCeItooltip'><a class='condividilink' href='' id='InviaTwitter'><span/></a></div>
</div>
<!-- Twittare testo selezionato - Fine -->

L'unica cosa da modificare è il nome utente al posto di parsifal32 è che sarà visualizzato nei tweet condivisi con questo sistema. Se nel vostro sito fosse già presente la libreria jQuery allora potete fare a meno di incollare nuovamente lo script cancellando dal codice la riga evidenziata di giallo.

Demo
Clicca qui