参考来源:《js页面文字选中后分享到新浪微博实现》
主要思路:在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了。腾讯通过率高,新浪的似乎比较严格。
来源字段相关说明:链接很长,点这里就行