一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享

转载 2012年05月20日 11:45:06
一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享基本上就是聋子的耳朵摆设。除非这篇文章惊天地、泣鬼

一、功能简述

正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接:

零度科技

不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神,痛彻心扉,穿越前世今生。但是,如果有更加方便快捷的分享方式,这种冷淡得让人结冰的场面或许就不会经常出现。 内容来自www.00isp.com

一般翻译软件都有划词翻译功能,例如有道桌面词典的桌面划词翻译功能:

内容来自www.00host.cn

启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框:

内容来自零度科技

在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这就是本文要展示的内容。 内容来自www.00isp.com

二、效果与demo

随便选择一段文字,结果就会出现个新浪的怪眼睛logo,如下图:

零度科技提供技术支持

然后,点击那个晃啊晃的猥琐的眼睛,就实现了选中文字分享到新浪微博的功能啦——会打开个新页面——如下效果:

内容来自www.00host.cn

是不是分享起来很简单很方便啊!  内容来自www.00isp.com

三、方法与代码

选中即分享的功能看上去比较高级,其实实现是相当简单的。其中的会让人头大,一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪微博的功能我简单的封装了下,方法名是:$sinaMiniBlogShare,当然,您不喜欢可以换掉,甚至不要,此方法完整代码如下: 零度科技提供技术支持

var $sinaMiniBlogShare = function(eleShare, eleContainer) {
	var eleTitle = document.getElementsByTagName("title")[0];
	eleContainer = eleContainer || document;
	var funGetSelectTxt = function() {
		var txt = "";
		if(document.selection) {
			txt = document.selection.createRange().text;	// IE
		} else {
			txt = document.getSelection();
		}
		return txt.toString();
	};
	eleContainer.onmouseup = function(e) {
		e = e || window.event;
		var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
		var 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) {
			eleShare.style.display = "inline";
			eleShare.style.left = left + "px";
			eleShare.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
		}
	};
	eleShare.onclick = function() {
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open('http://v.t.sina.com.cn/share/share.php?title=' + txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href);
		}
	};
};copyright www.00isp.com

可以看到$sinaMiniBlogShare方法有两个参数,eleShare和eleContainer,其中,前一个参数是必须的,指的是文字选中后出现的浮动层元素(在本文demo中就是新浪眼睛图标);后面一个参数指文字选择的容器元素,可选参数,如果不设置则指document元素,也就是整个页面文字选中都会触发分享的功能。 内容来自零度科技

假设新浪微博分享图标的HTML如下:
<img class="img_sina_share" id="imgSinaShare" title="将选中内容分享到新浪微博" alt="" src="http://simg.sinajs.cn/blog7style/images/common/share.gif" /> 内容来自零度科技

则直接:$sinaMiniBlogShare(document.getElementById("imgSinaShare")); 零度科技提供技术支持

就实现了选中文字分享到新浪微博的功能了。 内容来自www.00host.cn

这里的方法没有兼容性问题,IE之流,firefox或是chrome浏览器可以轻松分享;另外,方法原生的javascript代码,不依赖于任何库,所以,只要浏览器不禁用javascript,哪里都可以使用,真可谓方便快捷,无孔不入,网页开发,必备良药。 零度科技

四、结语及补充

其实呢,此方法不仅支持新浪微博,支持企鹅微博(腾讯微博),狐狸微博(搜狐微博),也是可以的,只要根据各个微博分享页面的API地址,将window.open()中的地址换换就可以了,我想,应该很简单的。您要是有兴致,可以把这些乱七八糟的分享都集合到一个方法中,做出插件性质的,各个网站任意分享,通过参数接口灵活控制 零度科技

零度科技原文链接:http://www.00isp.com/webdesign/javascript/201202/1172.html

php 实现分享到QQ空间 新浪微博

//分享到新浪微博//分享到新浪微博 $('#blog').click(function(){ window.sharetitle = '';/...
  • zhangkaiadl
  • zhangkaiadl
  • 2015年11月11日 15:22
  • 3730

微信、微博、Facebook、Twitter等社交媒体分享方案探索

一、Web方式: 新浪微博: http://service.weibo.com/share/share.php? count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空...
  • cj1029
  • cj1029
  • 2015年03月19日 22:11
  • 2678

H5app应用调用shareSDK分享到qq,微信,微博

账户管理          scalable=0">                                                         ...
  • u010168807
  • u010168807
  • 2016年05月05日 14:07
  • 3315

自定义QQ、新浪微博等大型网站分享功能

截图: 微博: 新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需...
  • qq_30979185
  • qq_30979185
  • 2017年04月09日 21:45
  • 512

android 新浪微博分享功能开发

  • 2013年07月06日 14:31
  • 691KB
  • 下载

微博分享功能实现

  • 2012年08月16日 19:32
  • 362KB
  • 下载

新浪微博自定义分享增强下载功能

  • 2011年07月03日 11:31
  • 7KB
  • 下载

jquery分享代码在线制作鼠标一键复制url路径功能与分享信息 微博分享

  • 2014年03月19日 17:15
  • 34KB
  • 下载

Android新浪微博SDK分享功能接入

集成前准备1. 申请APP_KEY第三方需要接入微博SDK必须在微博开放平台上对应用进行注册,并获取APP_KEY,添加 应用的授权回调页面(Redirect URI)2. 注册应用程序的包名和签名...
  • zcn596785154
  • zcn596785154
  • 2017年10月04日 13:38
  • 745

使用第三方平台 ShareSDK 实现新浪微博的一键分享功能

http://software.intel.com/zh-cn/blogs/2014/03/02/android-sharesdk/?utm_campaign=CSDN&utm_source=inte...
  • xpplearnc
  • xpplearnc
  • 2014年03月25日 11:56
  • 1281
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接: 不过我觉得这些分享
举报原因:
原因补充:

(最多只允许输入30个字)