WordPress will select the text forwarded to the microblogging method

Tencent news recently looked at, when inadvertently found that when I selected the news in the text, the upper right corner of the mouse will display a “broadcast to microblogging” button, click on the selected text will be forwarded to the microblogging The This is a very good user experience, if it can be introduced into the WordPress blog, it is not very good?
I also specifically to register a developer of Tencent microblogging open platform, when I began to read the development of the document, only to find his sister, Tencent official has launched a similar function of the application, called “Q-Share “, And then read some of the other information, the original has been written by the older generation of js page text selected to share Sina microblogging method, then I more effort, the combination of the two, the microblogging and Tencent microblogging two A button are added, and then the pain of the egg I put it translated into a jQuery method.
Effect, then you can see the site, and select any text, it will show two microblogging button in the upper right corner, click to try it.
Implementation of the method is also very simple, only two steps:
1, the introduction of jQuery, I believe most of the WordPress blog has been introduced jQuery, it can be a direct second step.
2, at the bottom of the page, or more precisely, in the introduction of the jQuery library behind the addition of such a JS, you can see the same effect and the site.
var miniBlogShare = function () {
// Specify the location in the node
$ (‘<img id = “imgSinaShare” class = “img_share” title = “will be selected content to share Sina microblogging” src = “http://www.cmsjzy.cn /2012/0203/1328255868614.gif” /> <img id = “imgQqShare” class = “img_share” title = “will be selected content to share to Tencent microblogging” src = “http://www.cmsjzy.cn /2012/0203/1328255868314.png” /> ‘). appendTo (‘body’);

// default style
$ (‘. img_share’). css ({
display: ‘none’,
position: ‘absolute’,
cursor: ‘pointer’
});

// Select the text
var funGetSelectTxt = function () {
var txt = ”;
if (document.selection) {
txt = document.selection.createRange (). text;
} else {
txt = document.getSelection ();
}
return txt.toString ();
};

// Select the microblog icon after selecting the text
$ (‘html, body’). mouseup (function (e) {
if (e.target.id == ‘imgSinaShare’ || e.target.id == ‘imgQqShare’) {
return
}
e = e || window.event;
var txt = funGetSelectTxt (),
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left = (e.clientX – 40 <0)? e.clientX + 20: e.clientX – 40,
top = (e.clientY – 40 <0)? e.clientY + sh + 20: e.clientY + sh – 40;
if (txt) {
$ (‘# imgSinaShare’). css ({
display: ‘inline’,
left: left,
top: top
});
$ (‘# imgQqShare’). css ({
display: ‘inline’,
left: left + 30,
top: top
});
} else {
$ (‘# imgSinaShare’). css (‘display’, ‘none’);
$ (‘# imgQqShare’). css (‘display’, ‘none’);
}
});

// click Sina Weibo
$ (‘# imgSinaShare’). click (function () {
var txt = funGetSelectTxt (), title = $ (‘title’). html ();
if (txt) {
window.open (‘http://v.t.sina.com.cn/share/share.php?title=’ + txt + ‘- reprinted from:’ + title + ‘& url =’ + window.location.href);
}
});

// click on Tencent microblogging
$ (‘# imgQqShare’). click (function () {
var txt = funGetSelectTxt (), title = $ (‘title’). html ();
if (txt) {
window.open (‘http://vtqq.com/share/share.php?title=’ + encodeURIComponent (txt + ‘- reprinted from:’ + title) + ‘& url =’ + window.location.href) ;
}
});
} ();
Note: This method is not only applicable to WordPress, JS is common, you can mount this JS to any website can get the same effect.