sexta-feira, 18 de setembro de 2015

share select text twiter widget blogger

share-selected-text-twitter-widget-blogger



Hoje vamos mostrar a você como adicionar esse código que faz toda diferença para melhorar também a experiência com o visitante ele vai permitir que selecione uma parte do texto e compartilhe isso no twitter isso também ajuda todo blogueiro a tornar seu blogger mais compartilhavel aumentando assim sua influencia na rede social, share select text twitter é algo que permite que o  usuário consiga fazer isso.

Para adicionar isso siga os passos abaixo:

Faça login no blogger vá no menu modelo então>> editar html
Com as teclas combinadas CTRL+F busque por: ]]></b:skin> e acima disso adicione o seguinte código

.MBLSharetip {
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;
}
.MBLSharetip span {
position:absolute;
content:” “;
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;
}
.MBLSharetip a {
color:#f16786;
}
.MBLSharetip:hover {
background:#3D566E;
}
.MBLSharetip:hover span {
border-top-color:#3D566E;
}
.tooltipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.tooltipContainer a {
width:100%;
background:transparent url(http://4.bp.blogspot.com/-HCutv6Nw8iM/VK_Q-v7WT1I/AAAAAAAAFTY/rbxVAhvs_dM/s1600/sprites.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}


Agora busque por </head> e acima disso cole o código

<script type=’text/javascript’>
/*<![CDATA[*/
$(document).ready(function() {
textToShare = ”;
$(document).mousemove(function(m) {
generateTooltipPosition();
});
});
$(document).mouseup(function() {
$(document).mousemove(function(m) {
generateTooltipPosition()
});
var textToShare = getTextToShare();
var MBLSharetip = document.getElementById(“MBLSharetip”);
if (textToShare != ”) showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $(“#MBLSharetip”).attr(“title”);
if (newTooltipTitle == “”) return;
if (newTooltipTitle !== tooltipTitle) $(‘#MBLSharetip’).animate({
opacity: 0
}, 30);
if (textToShare != “”) showMeTooltip();
});
$(window).resize(function() {
if ($(‘#MBLSharetip’).show()) {
$(‘#MBLSharetip’).animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = “https://twitter.com/intent/tweet?text=” + getTextToShare() + “&via=” + twitterAccount + “&url=” + pageURL;
$(‘#MBLSharetip’).show();
$(‘#MBLSharetip’).animate({
opacity: 1
}, 30);
$(‘#sendToTwitter’).attr(‘href’, twitterLink);
}
function getTextToShare() {
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();
$(‘#MBLSharetip’).css({
top: (rect.top + pos – 20) – 32 + ‘px’,
left: rect.left + (rect.width / 2) + ‘px’,
});
}
}
/*]]>*/
</script>

Agora procure por </body> e acima disso cole o código 

<script>var twitterAccount = “MSLangah”;</script>
<div class=”MBLSharetip” id=”MBLSharetip”>
<div class=”tooltipContainer”><a id=”sendToTwitter” href=”” class=”sharingLink twitter”><span></span></a></div>
</div>

Salve o template e esta pronto.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner