How to Select Text and Share it to Twitter Widget in Blogger

In the past, we have already showed you how to add Twitter cards in blogger, add animated flying twitter bird in blogger, add a tweet to unlock widget in blogger and how to add Twitter feeds in blogger. Today we have come up with another Twitter widget for your BlogSpot site that is unique and efficient enough to help you gain more exposure to your site with the help of Twitter. In this article, we will show you how to select text and share it to Twitter widget in blogger.

What is Select text and share it to Twitter?

It is an efficient plugin that allows your users an ability to select any text on your blog or website to share it (selected text) on their favorite social site Twitter. It is extremely easy to install and use, plus extremely lightweight in nature.

In the above screenshot, we have shown how this widget works. Whenever a small part of the text is select a Twitter icon appears, upon clicking that icon you can share that piece of text to your twitter account, making sharing easier.

How to Install this widget?

The installing instructions are extremely simple and would take hardly few seconds to complete. The first thing, you need to do is to login to your blogger account and select the blog you'll like to install the widget on. Now to Template >> Edit HTML >> Search for ]]></b:skin> and just above it paste the following CSS codes.

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFYWV0nmLqG3QvuKQWpx8aTJ0nWZKlt1urSVwKu9tGfyh0lE_82LZuU_YDNS0g0RyOz8lsZN-WOqiTVZtldlTTI8ySzK5Gii96_wB-M_6Cki8IhQbuuBkjDs3IH9S2O4t3oADdP7I3lnAY/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;
}

After adding the above CSS codes, again in the template search for ending </head> tag and just above it paste the following jQuery code:

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

Now lastly, to display the widget we need to add the HTML code in the template. Search for the ending </body> tag and just above it paste the following code:

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

Once everything is done press the "Save Template" button present towards the top of your screen and you're done. Congratulations, you have successfully installed the widget on your site. Now visit your blog and select any text to see what happens next.

We hope this article may have helped you to add more Twitter friendly features to your BlogSpot site. Do let us know about your thoughts in the comment section below.

Share on Google Plus

About Education

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.