"Select Text and Share it on Twitter" Widget for Blogger

This is an efficient twitter widget for blogger blog which makes it easy for your readers to share any piece of text to twitter. This widget allows your blog visitors to tweet selected text on twitter easily. Whenever a visitor visit your blog and select any line of text a small black colored twitter tweet button will be visible now if your readers want that selected line to be tweeted on twitter then they just have to click on that black colored twitter button. Here is a screenshot of this widget that you can see how actually it works.

How to Add "Select Text and Share it on Twitter" Widget in Blogger?

To install this widget on blog, Just follow the easy steps given below:

Go to Blogger Dashboard> Template> Edit HTML
Press CTRL + F to enable search box then Search for ]]></b:skin>
Now, Copy and paste the following CSS code just above it.

.BWGSharetip {
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;
}
.BWGSharetip 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;
}
.BWGSharetip a {
color:#f16786;
}
.BWGSharetip:hover {
background:#3D566E;
}
.BWGSharetip: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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2XCgMA6IVtfv-7VXv9a6bGdy6_tm7uvBGh1P6W67u0YOcLJnHj1eENrNnDuY1FhNSvUbS8bFobqVf-PfIDgNqWznjp2igWUURM2I2eKgOV2i2bPYmTjHjWd9IAVwqottWZyIGoJDSZIRX/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;
}

Next search for </head> tag and copy paste the following code just above it.

<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 BWGSharetip = document.getElementById("BWGSharetip");
    if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
    var textToShare = getTextToShare();
    var tooltipTitle = null;
    var newTooltipTitle = $("#BWGSharetip").attr("title");
    if (newTooltipTitle == "") return;
    if (newTooltipTitle !== tooltipTitle) $('#BWGSharetip').animate({
        opacity: 0
    }, 30);
    if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
    if ($('#BWGSharetip').show()) {
        $('#BWGSharetip').animate({
            opacity: 0
        }, 30);
    }
});
function showMeTooltip() {
    var pageURL = window.location.toString();
    var twitterLink = "https://twitter.com/intent/tweet?text=" +  getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
    $('#BWGSharetip').show();
    $('#BWGSharetip').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();
        $('#BWGSharetip').css({
            top: (rect.top + pos - 20) - 32 + 'px',
            left: rect.left + (rect.width / 2) + 'px',
        });
    }
}
/*]]>*/
</script>

Now final code is an HTML code which we need to add to show the widget. Just search for </body> tag and paste the following HTML code just above it.

<script>var twitterAccount = "nitinmaheta";</script>
    <div class="BWGSharetip" id="BWGSharetip">
         <div class="tooltipContainer"><a id="sendToTwitter"  href="" class="sharingLink  twitter"><span></span></a></div>
     </div>

Now save your template and you're done.

Drop your comments and questions below.

Add Comment