WordPress 将选中文字转发到微博
发布时间:2011-11-03 17:29:33
标签:腾讯,微博,wordpress
最近在看腾讯新闻的时候,无意中发现,当我选中新闻中的文字的时候,鼠标右上角会显示一个“转播至微博”的按钮,点击后就会将选中的文字转发到微博上。这是一个很不错的用户体验,如果能把它引入到 WordPress 博客中,那不是很好吗?
为此我还特地去注册了一个腾讯微博开放平台的开发者,当我开始阅读开发文档的时候,才发现,他妹的,腾讯官方已经推出一个相同功能的应用,叫作 “Q-Share”,再翻阅了一下其他资料,原来已经有前辈写出了js 页面文字选中后分享到新浪微博的方法,那我就省力多了,两者结合一下,把新浪微博和腾讯微博两个按钮都加上了,然后闲的蛋疼的我又把它翻译成了 jQuery 的方法。
效果的话就可以看本站了,选中任何文字,就会在右上角显示两个微博按钮,点击试试吧。
实现的方法也很简单,只需要两步:
1、引入 jQuery,相信大多数 WordPress 博客都已经引入了 jQuery,那就可以直接进行第二步了。
2、在页面底部,或者更确切的说,在引入 jQuery 库的后面加上这样一段 JS,你就可以看到和本站一样的效果了。
var miniBlogShare = function() {
//指定位置驻入节点
$('<img id="imgSinaShare" class="img_share" title="将选中内容分享到新浪微博" src="https://img.aspxhome.com/file/UploadPic/201111/3/1320285750869-10.gif" /><img id="imgQqShare" class="img_share" title="将选中内容分享到腾讯微博" src="https://img.aspxhome.com/file/UploadPic/201111/3/1320285750811-32.png" />').appendTo('body');
//默认样式
$('.img_share').css({
display : 'none',
position : 'absolute',
cursor : 'pointer'
});
//选中文字
var funGetSelectTxt = function() {
var txt = '';
if(document.selection) {
txt = document.selection.createRange().text;
} else {
txt = document.getSelection();
}
return txt.toString();
};
//选中文字后显示微博图标
$('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');
}
});
//点击新浪微博
$('#imgSinaShare').click(function() {
var txt = 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() {
var txt = funGetSelectTxt(), title = $('title').html();
if (txt) {
window.open('http://v.t.qq.com/share/share.php?title=' + encodeURIComponent(txt + ' —— 转载自:' + title) + '&url=' + window.location.href);
}
});
}();
是不是很简单呀?
赶紧选中本文的标题,在微博上通知你的好友来围观吧,哈哈~
PS:最后,说一句,其实这个方法不仅仅适用于WordPress,JS 是通用的,你可以把这段JS 挂载到任何网站上都可以得到相同的效果。
PS2:最最最后,再说一句,麻烦各位在使用前,把JS 里的两张微博的图片路径替换成自己的地址,因为小站流量有限,大家帮我省着点花呗,嘿嘿。
转载请注明来源:http://wange.im/wordpress-share-selected-text-to-weibo.html
0
投稿
猜你喜欢
- 目前做网站写独立博客,空间流量小是个挺头疼的问题,PNG比GIF色数高,但也没多少人敢用,如果你的空间只有几个GB的月流量那连GIF也得悠着
- WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL 数据库的服务器上架设自己的博客。也可以把 WordP
- 近两年,我们在实际工作中体验到:我们身边的中小型企业一旦准备利用互联网资源帮助自己做一些事情时,再也不会相信搭建一个简单的企业网站能给他们带
- 先来一张登陆界面吧从上次zblog更新至今也有2年多了,一直未见zblog有过更新,虽然去年愚人节的时候发布了一个版本,但那个版本真的只是一
- 由于企业希望改进IT基础架构节省成本,所以CIO和数据中心管理人员都转向了通过合并服务器的方法以实现节省费用。其实,这么做并非易事。由于企业
- 大家可以看首页下面的图文混排栏目块,全部是用的固定栏目,也就是先做出模板,每个栏目都是固定的,无法循环生成.这样就有个问题,标签是不是要一个
- 1、前言apache+resin来做想来大家都比较熟悉了,一般的配置都是很熟悉的了,我查看了一些论坛上的文章,这方便的文章比较多。在这里,我
- 这是一个关于网络广告商和网络销售的汇总列表,可以用来为您的网站或博客赚点钱。广告商都是英文的,加入广告请确认其是否支持中国地区支持,不支持的
- 在动易SiteFactory CMS后台管理员管理下面我们可以看到新增了“角色管理”和“添加角色”的按钮。“角色”,动易SiteFactor
- 昨天在听AdSense的一个网络会议的时候,主讲人提到了一个提高Adsense广告相关度的技巧,可供那些感觉广告匹配度不高、广告点击率低的A
- 很多新手的站长感觉建站难了、维护难了、推广更难了,一是由于国内禁止个人注册CN域名导致建站成本迅速上升,二是国家对网络管理异常严格,所有与色
- 北京时间11月6日消息,据国外媒体报道,Ancestry.con本周四在纳斯达克上市,交易代码为“ACOM&rd
- FTP命令是Internet用户使用最频繁的命令之一,不论是在DOS还是UNIX操作系统下使用FTP,都会遇到大量的FTP内部命令。熟悉并灵
- 为了方便大家使用,所建立的FTP站点不仅允许匿名用户访问,而且对主目录启用了“读取”和“写入”的权限。这样一来任何人都可以没有约束地任意读写
- 既然是我们的防范是从入侵者角度来进行考虑,那么我们就首先需要知道入侵者的入侵方式。目前较为流行web入侵方式都是通过寻找程序的漏洞先得到网站
- Web应用服务器优化方法 在对Web服务器进行优化时要根据真实的Web应用系统的情况和特征来采取有针对性地优化方案。首先根据不同的网络特性来
- 这次google历经三个月之久,终于又释放和大放血了。这让很多站长都为之疯狂。虽然多数国内站长都比较在乎和以百度为主,当google的作用也
- 为了给发布商提供更多的透明度以及控制网站上所展示的广告的权利,我们开发了广告查看中心,该功能将会在接下来的几个月中陆续推出。这个功能可以让您
- Google中文网站管理员博客在《由抄袭造成的重复内容》文章中提到:“鉴别内容的原创来源是Google所擅长的,在大多数情况下原创内容源都能