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

参考来源:《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了。腾讯通过率高,新浪的似乎比较严格。

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

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

本文固定链接: https://jucelin.com/js-share-to-weibo.html | Jucelin

该日志由 jucelin 于2012年03月24日发表在 前端设计 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: js实现选中文字分享到腾讯新浪微博 | Jucelin
关键字: , , , ,

js实现选中文字分享到腾讯新浪微博:目前有12 条留言

  1. 6楼
    gleaner:

    哇!貌似不错啊!呵呵

    2012-04-09 10:48
  2. 这个很强呀!!

    2012-04-09 09:22
  3. 你好像好久没更新了嘛

    2012-04-07 23:57
  4. 地板
    snowinmay:

    呵呵,,我也去试一下~

    2012-04-06 16:37
  5. 这个方法还是不错的 分享很方便

    2012-03-26 23:21
    • jucelin:

      像我这样的喜欢选中这选中那的,听不习惯这个的

      2012-03-26 23:38
  6. 沙发
    andychow1989:

    这效果很早就用上啦 哈哈 :lol:

    2012-03-24 19:52
    • jucelin:

      你可以申请个字段来源,这样分享出去之后会在微博下面有个导回链接。

      2012-03-25 08:15

发表评论

您必须 [ 登录 ] 才能发表留言!

更多