Wordpress将选中内容分享到新浪腾讯微博的方法

Wordpress将选中内容分享到新浪腾讯微博的方法

本文的重点是详细介绍Wordpress将如何把选中的内容分享到新浪腾讯微博，其中涉及到新浪和腾讯的微博套接字的使用。很有现实意义，一定要朋友们参考。

该案例描述了Wordpress将选定内容分享到新浪腾讯微博的方式。分享给大家参考。具体做法如下:

1.介绍jQuery。我坚信大多数WordPressblog都已经引入了jQuery，所以我可以立即开始第二步。

2.在网页底部，或者更准确的说，在jQuery库的介绍之后加上那个JS，你就能看到和这个网站一样的实际效果了。

也就是说，选择分享这个功能看起来很高级，但完成起来其实很简单，人会有一大批人头，普通人对它不感兴趣的原理在这里马上就被绕过了。我简单的封装了这个js词选中后分享到新浪新浪微博的功能，名字叫$sinaMiniBlogShare。

案例编码以下:

复制代码编码以下:varminiBlogShare=function(){
//特定部位驻入连接点
$('<imgid="imgSinaShare"class="img_share"title="将选中內容分享到新浪新浪微博"src="1328255868614.gif"/><imgid="imgQqShare"class="img_share"title="将选中內容分享到腾讯微博"src="/1328255868314.png"/>').appendTo('body');

//默认设置款式
$('.img_share').css({
display:'none',
position:'absolute',
cursor:'pointer'
});

//选中文本
varfunGetSelectTxt=function(){
vartxt='';
if(document.selection){
txt=document.selection.createRange().text;
}else{
txt=document.getSelection();
}
returntxt.toString();
};

//选中文本后显示信息微博图标
$('html,body').mouseup(function(e){
if(e.target.id=='imgSinaShare'||e.target.id=='imgQqShare'){
return
}
e=e||window.event;
vartxt=funGetSelectTxt(),
sh=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,
left=(e.clientX-40<0)?e.clientX20:e.clientX-40,
top=(e.clientY-40<0)?e.clientYsh20:e.clientYsh-40;
if(txt){
$('#imgSinaShare').css({
display:'inline',
left:left,
top:top
});
$('#imgQqShare').css({
display:'inline',
left:left30,
top:top
});
}else{
$('#imgSinaShare').css('display','none');
$('#imgQqShare').css('display','none');
}
});

//点一下新浪新浪微博
$('#imgSinaShare').click(function(){
vartxt=funGetSelectTxt(),title=$('title').html();
if(txt){
window.open('http://v.t.sina.com.cn/share/share.php?title='txt'——转载：'title'&url='window.location.href);
}
});

//点一下腾讯微博
$('#imgQqShare').click(function(){
vartxt=funGetSelectTxt(),title=$('title').html();
if(txt){
window.open('http://v.t.qq.com/share/share.php?title='encodeURIComponent(txt'——转载：'title)'&url='window.location.href);
}
});
}();
能够见到$sinaMiniBlogShare方式有两个主要参数,eleShare和eleContainer,在其中,前一个主要参数是务必的,指的是文本选中后出現的波动层原素(在文中demo中便是新浪眼睛图标),后边一个主要参数指文本挑选的器皿原素,可选主要参数,如果不设定则指document原素，也就是全部网页页面文本选中都是会开启共享的作用.案例代码如下:

复制代码代码如下:varminiblogShare=function(){
//特定部分的连接点
$('；<imgid="imgqqshare"class="img_Share"title="将所选内容分享到腾讯微博"src="/1328255868314.png"/>')。appendTo('body')；

//默认设置样式
$('。img_share’)。CSS({
display:'none'，
position:'absolute'，
游标:'。

//选择文本
varfungetselecttxt=function(){
vartxt=''；
if(document.selection){
txt=document.selection.createrange()。文本；
}else{
txt=document.getselection()；
}
returntxt.tostring()；
}；

/选中文本时，信息微博图标
$('html，body')。mouseup(function(e){
if(e.target.id=='imgSinaShare'||e.target.id=='imgQqShare'){
return
}
e=e||window.event；
vartxt=funGetSelectTxt()，
sh=window.pageyooffset||document.documentelement.scrolltop||document.body.scrolltop||0，
left=(e.clientx-40<；0)?e.clientX20:e.clientX-40，
top=(e.clienty-40<；0)?e.clientsh20:e.clientsh-40；
if(txt){
$('#imgSinaShare')。css({
display:'inline'，
left:left，
top:top
})；
$('#imgQqShare')。css({
display:'inline'，
left:left30，
top:top
})；
}else{
$('#imgSinaShare')。css('显示'，'无')；
$('#imgQqShare')。css('显示'，'无')；
}
})；

//点击新浪微博
$('#imgsinashare')。click(function(){
vartxt=fungetselecttxt()，title=$('title')。html()；
if(txt){
window.open('http://v.t.Sina.com.cn/share/share.PHP？title='txt'-转载:'title'&URL='window.location.href)；
}
})；

//点击腾讯微博
$('#imgqqshare')。click(function(){
vartxt=fungetselecttxt()，title=$('title')。html()；
if(txt){
window.open('http://v.t.QQ.com/share/share.PHP？title='encodeuricomponent(txt'——转载:'title'&URL='window.location.href)；
}
})；
}()；
可以看到$sinaminblogshare模式有两个主要参数，eleShare和eleContainer。其中，第一个主参数是必需的，指的是文本选择后出现的波动层元素(演示中是新浪的眼睛图标)，最后一个主参数指的是文本选择的容器元素，可选。如果未设置，则引用文档元素，即选择所有网页。

假定新浪新浪微博分享图标的HTML以下:

复制代码编码以下:<imgid="imgSinaShare"class="img_sina_share"title="将选中內容分享到新浪新浪微博"src="http://simg.sinajs.cn/blog7style/images/common/share.gif"/>
则立即应用以下编码:

复制代码编码以下:$sinaMiniBlogShare(document.getElementById("imgSinaShare"));假设新浪微博分享了图标的如下HTML:

复制以下代码:
然后立即应用以下代码:

复制以下代码:$sinaminblogshare(document.get

期待以上对大家的WordPress网站有所帮助。