Share the selected text from Blogger content to twitter Profile

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

6
data:blog.title
twitter

Among popular social media site Twitter is second largest site which is actively using by billions of users. In twitter we can share our content easily. Just we have to paste the Blog post link and twitter automatically grab the post title only. So visitors can read only post title and by clicking on short URL which is generated by Twitter a readers can redirected into the website. But if the post title is not so appealing or interesting then visitors may not click on your content title from twitter site. As a result you may lose big chunk of potential readers who might be interest to read good article.

You will see in facebook whenever we share a content link then it is able to grab the Image, post title and little description of the post. For this reason majority of readers are getting engaged with Blog site through Facebook. So the solution is if we can add some description of the content then it might be a great way to grab visitors from twitter.

In this article I will show you how we can share selected text from Blogger to Twitter site. The main positive feature of this widget that we can select most attractive sentence or line of a content and  share that on twitter site.

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click on Now click on -> Template -> Edit HTML

Step #3: Now find the </body> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #4: Copy the code from below and Paste the code above/before </body> 

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style>
.twittertextshare {
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;
}
.twittertextshare 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;
}
.twittertextshare a {
color:#f16786;
}
.twittertextshare:hover {
background:#5EA9DD;
}
.twittertextshare:hover span {
border-top-color:#5EA9DD;
}
.BloggerSpiceToolTip {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.BloggerSpiceToolTip a {
width:100%;
background:transparent url(http://3.bp.blogspot.com/-_cb1kQhPYKE/VMcY3jCl4pI/AAAAAAAAJPw/lsMCrFTIiuo/s1600/BloggerSpice%2BText%2Btweet.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;
}
</style>
<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 twittertextshare = document.getElementById("twittertextshare");
if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $("#twittertextshare").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== tooltipTitle) $('#twittertextshare').animate({
opacity: 0
}, 30);
if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
if ($('#twittertextshare').show()) {
$('#twittertextshare').animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + mytwitterAccount + "&url=" + pageURL;
$('#twittertextshare').show();
$('#twittertextshare').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();
$('#twittertextshare').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>
<script>var mytwitterAccount = &quot;BloggerSpice&quot;;</script>
<div class='twittertextshare' id='twittertextshare'>
<div class='BloggerSpiceToolTip'><a class='sharingLink twitter' target="_blank" href='' id='sendToTwitter'><span/></a></div>
</div>

Step #5: Now simply hit the Save template Button. 


Customization 


  • Replace BloggerSpice with your Blog Title. 


How it works?

This widget will work very easily and simply. You don't need to be worried. First sign in to your twitter account and then please follow the below steps to share the selected text from Blogger to twitter.

Step #1: After adding the code into your Blogger template Just select or block any line of an article by using mouse pointer.

selected text

Step #2: After that twitter icon will appear above selected line and now click on that icon. This will redirect you in twitter account with selected text.

text share

Step #3: Finally press the Tweet Button for sharing the text into twitter.

That's all. You have successfully shared your text into twitter. Now your twitter profile visitors will more actively engage with your post by reading content description. 
Share the selected text from Blogger content to twitter Profile
4 Stars stars - "Share the selected text from Blogger content to twitter Profile " Among popular social media site Twitter is second largest site which is actively using by bill...

Post a Comment

thanks, nice widget. i am impressed of the smoothness. Would be perfect if the twitter window was a popup or opening in a new tab. I don't know how to fix that

Hi Konstantinos Omegas, Thanks for your comment. I have just updated the code. Now Tweet will open in new window. Thanks again for your suggestion.
:-bd

hi Mohammad, a small problem found. If in the title of the post is the symbol '%' then Tweet can not be sent. With addthis not have such problem.

Yes this may happen for script. Because it doesn't support percentage. :(

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *