分享 | Jucelin

主要思路：在zxx的demo中添加上分享到腾讯微博的功能，并且把选定文字限制在正文范围内，以太平洋电脑网文章页为例

实现过程中遇到问题：IE下腾讯微博分享的url中含有中文会引起实际分享内容乱码

解决方案：选中部分和url的中文部分使用encodeURIComponent()方法

实际效果如图：

核心方法：

var eleImgShare = document.getElementById("imgSinaShare");  //新浪微博图标
var eleImgShare2 = document.getElementById("imgQqShare");  //腾讯微博图标
var artMain = document.getElementById("artMain");  //限定在的id容器
 
var $miniBlogShare = function(eleShare,eleShare2,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";
			eleShare2.style.display = "inline";
			eleShare2.style.left = left + 30 + "px";
			eleShare2.style.top = top + "px";
		} else {
			eleShare.style.display = "none";
			eleShare2.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);	
		}
	};
	eleShare2.onclick = function() {  //点击腾讯微博图标
		var txt = funGetSelectTxt(), title = (eleTitle && eleTitle.innerHTML)? eleTitle.innerHTML : "未命名页面";
		if (txt) {
			window.open( 'http://v.t.qq.com/share/share.php?appkey=93807795cd1948718beee8c9677a864a&title=' + encodeURIComponent(txt + '→来自页面"' + title + '"的文字片段&url=' + window.location.href));	
		}
	};
}(eleImgShare,eleImgShare2,artMain);

大家在使用分享时可以先申请一个来源字段，这样以来，在从本站分享出去的微博都会在微博的来源中显示转自哪，如此可带来回访流量。以腾讯微博为例，在http://open.t.qq.com/中登录，选择网站主，再进入选择一键转播，填写资料，此时会显示出代码，在代码中找到【var _appkey = “801118079” || “801000271”; //你从腾讯微博开放平台获得的appkey】第一个数字串就是appkey，更换上面代码中appkey=后面的值（jucelin使用的是旧版的应用的appkey，所以比较长），同时上面会提示需要提交审核，来源字段才能生效，提交吧。通过后就OK了。腾讯通过率高，新浪的似乎比较严格。

来源字段相关说明：链接很长，点这里就行

原文转自：http://www.ryanbay.com/?p=198

Jucelin

标签归档：分享

js实现选中文字分享到腾讯新浪微博