Q-Share分享：扩展新浪+腾讯微博的实现

欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【Q-Share分享：扩展新浪+腾讯微博的实现】，下面是详细的分享！

Q-Share分享：扩展新浪+腾讯微博的实现

　　一、功能概述：

　　正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。

　　每个网站上面几乎都能见到分享到微博的功能。

　　

 

　　Q-share是腾讯微博的一款分享插件，通过JS实现，可以去腾讯的Q_Share官方网站获取代码添加到你的网站。

　　先介绍一下Q-Share：

　　使用Q-Share分享按钮后，用户在访问你网站时，只要选中功能区域中的任何一段文本，并点击“分享到微博”，就可以转播选中内容，分享到腾讯微 博。如果你的 网页中含有图片，程序会自动抓取功能区域中的所有图片供用户选择，默认使用第一张图片。安装此应用到你的网站中，为你的网站带来更多的粉丝和访问流量。

　　

 

　　Q-Share腾讯官方代码获取：http://open.t.qq.com/apps/qshare/explain.php

　　再来说说我这个扩展版的JS代码，它是对于Q-Share(腾讯微博选中文字分享按钮)的扩展，对腾讯官方的js代码进行了扩展，加上了新浪微博分享的实现。

　　我这里对Q_Share按钮的代码进行了修改，使其支持腾讯微博以及新浪微博，本想连搜狐微博，网易微博也扩展进来，不过4个按钮会显得很长，所以暂时只扩展了新浪微博。

　　二、 效果与demo

　　扩展后的效果：

　　选中一段文字：

　　

 

　　鼠标移动到图片上：

　　

 

　　demo效果预览：http://www.devexplore.com

　　效果预览可以移步至本人的博客任意页面选中一段文字，选中文字大于5个字即可出现分享至微博按钮，Q-Share默认是10个字，我修改为了5个字。

　　三、JS代码和使用方法：

<script> var bg_img='http://www.admin5.com/upimg/allimg/120413/-1-12041313524U10.png';//分享按钮背景图标文件地址 //地址数组，这些地址抓图为网站logo，注意主页后面的'/'不要漏了 var excludePages=new Array('http://www.devexplore.com/','http://www.devexplore.com/contact'); var areas;//抓图的区域，是一个DOM数组 for(var i=0;i<excludePages.length;i++){ if(window.location==excludePages[i]){//主页抓图为网站logo areas=new Array(document.body||document.documentElement); break; } } //文章页面抓图避免logo，抓取文章内容的图片 if(!areas) areas=new Array(document.getElementById('content'));</p> <p>var _share_tencent_weibo=function() { var share_btn=function(_arr) { if (_arr[0]) { return _arr[0]; } else { var o=document.createElement("a"), _ostyle="width:24px;height:24px;margin:0 1px;background:url("+bg_img+") no-repeat left -24px;display:inline-block;"; o.setAttribute("style", _ostyle); o.style.<u><a href='http://www.52ij.com/jishu/css/' target='_blank'>css</a></u>Text=_ostyle; o.setAttribute("href", "<u><a href='http://www.52ij.com/jishu/javascript/' target='_blank'>javascript</a></u>:;"); o.setAttribute("id", 'weibo-share-t'); var os=document.createElement("a"), _ostyle="width:24px;height:24px;margin:0 1px;background:url("+bg_img+") no-repeat left top;display:inline-block;"; os.setAttribute("style", _ostyle); os.style.cssText=_ostyle; os.setAttribute("href", "<u><a href='http://www.52ij.com/jishu/java/' target='_blank'>java</a></u>script:;"); os.setAttribute("id", 'weibo-share-s'); var di=document.createElement('div'); di.setAttribute("style", 'height:24px;position:absolute;display:none;z-index:9999999;'); di.style.cssText='height:24px;position:absolute;display:none;z-index:9999999;'; di.appendChild(o); di.appendChild(os); document.body.appendChild(di); //alert(di.childNodes[0].tagName); return di; } } (arguments); var share_area=function(_arr) { if (_arr[1]) { if ((typeof _arr[1]=="object" && _arr[1].length) || (_arr[1].constructor==Array)) { return _arr[1]; } else { return [_arr[1]]; } } else { return areas;//[document.body]; } } (arguments); var current_area=share_area[0]; var _site=""; //你的网站地址 var _appkey="801103182"; //你从腾讯微博开放平台获得的appkey var _web={ "name": document.title || "", "href": location.href, "hash": location.hash, "target": "toolbar=0,status=0,resizable=1,left="+((screen.width-613)>>1)+",top="+((screen.height-460)>>1) }; var _pic=function(area) { var _imgarr=area.getElementsByTagName("img"); var _srcarr=[]; for (var i=0; i < _imgarr.length; i++) { _srcarr.push(_imgarr[i].src); } return _srcarr;//.join("|"); }; //图片地址 var _u="http://v.t.qq.com/share/share.php?url=$url$&appkey=" + _appkey + "&site=" + _site + "&title=$title$&pic=$pic$"; var _select=function() { return (document.selection ? document.selection.createRange().text: document.getSelection()).toString().replace(/[\s\n]+/g, " "); }; var show=function(e, x, y) { with(share_btn.style) { display="inline-block"; left=x + "px"; top=y + "px"; position="absolute"; zIndex="999999"; } } var hide=function(e) { e.style.display="none"; }; if ( !! window.find) { HTMLElement.prototype.contains=function(B) { return this.compareDocumentPosition(B) - 19 > 0 } } String.prototype.elength=function() { return this.replace(/[^\u0000-\u00ff]/g, "aa").length; } String.prototype.tripurl=function() { return this.replace(new RegExp("((news|telnet|nttp|file|http|ftp|https)://){1}(([-A-Za-z0-9]+(\\.[-A-Za-z0-9]+)*(\\.[-A-Za-z]{2,5}))|([0-9]{1,3}(\\.[0-9]{1,3}){3}))(:[0-9]*)?(/[-A-Za-z0-9_\\$\\.\\+\\!\\*\\(\\),;:@&=\\?/~\\#\\%]*)*", "gi"), new Array(12).join("aa")); } document.onmouseup=function(e) { e=e || window.event; var o=e.target || e.srcElement; for (var i=0; i < share_area.length; i++) { if (share_area[i].contains(o) || share_area[i]==o) { var _e={ "x": e.clientX, "y": e.clientY }; var _o={ "w": share_btn.clientWidth, "h": share_btn.clientHeight }; var _d=window.pageYOffset || (document.documentElement || document.body).scrollTop || 0; var x=(_e.x - _o.w < 0) ? _e.x + _o.w: _e.x - _o.w, y=(_e.y - _o.h < 0) ? _e.y + _d - _o.h: _e.y + _d; if (_select() && _select().length >=5) { show(share_btn, x - 5, y); current_area=share_area[i]; break; } else { hide(share_btn); }</p> <p> } else { hide(share_btn); } } }; document.onmouseover=function(e) { var curtarget=(e && e.target) || (window.event && window.event.srcElement); if (curtarget.tagName.toLowerCase()=="img") { var erect=curtarget.getBoundingClientRect(); if (curtarget.clientWidth >=150 && curtarget.clientHeight >=50) { show(share_btn, erect.right - 140, erect.bottom + document.body.scrollTop + document.documentElement.scrollTop - 40); share_btn.setAttribute("shareimg", curtarget.src); //alert(share_btn.getAttribute("shareimg")); } } else if (curtarget !=share_btn&&curtarget.parentNode!=share_btn) { share_btn.removeAttribute("shareimg"); hide(share_btn); } } share_btn.onclick=function(e) { e=e || window.event; var o=e.target || e.srcElement; if(o.id&&o.id=='weibo-share-s')//新浪微博分享接口 _u="http://v.t.sina.com.cn/share/share.php?url=$url$&title=$title$&pic=$pic$"; else if(o.id&&o.id=='weibo-share-t')//腾讯微博分享接口 _u="http://v.t.qq.com/share/share.php?url=$url$&appkey=" + _appkey + "&site=" + _site + "&title=$title$&pic=$pic$"; var shareimg=o.parentNode.getAttribute("shareimg"); if (shareimg !=null) { window.open(_u.replace("$title$", encodeURIComponent(_web.name)).replace("$url$", encodeURIComponent(_web.href)).replace("$pic$", encodeURIComponent(shareimg)).substr(0,2048), 'null', _web.target); return; } var _str=_select(); var _strmaxlen=257 - _web.name.tripurl().elength(); var _resultstr=_str.slice(0,(_strmaxlen-4)>>1); if (_str.elength() > _strmaxlen) { _strmaxlen=_strmaxlen - 3; for (var i=_strmaxlen >> 1; i <=_strmaxlen; i++) { if ((_str.slice(0, i)).tripurl().elength() >=_strmaxlen) { break; } else { _resultstr=_str.slice(0, i); } } _resultstr +="..."; } else { _resultstr=_str; } if (_str) { if(o.id&&o.id=='weibo-share-t'){//腾讯微博分享接口 var url=_u.replace("$title$", encodeURIComponent(_resultstr + " " + _web.name)).replace("$pic$", _pic(current_area).join('|')); } else//新浪微博分享接口 var url=_u.replace("$title$", encodeURIComponent(_resultstr + " " + _web.name)).replace("$pic$", _pic(current_area)[0]); url=url.replace("$url$", encodeURIComponent(_web.href.replace(_web.hash, "") + "#" + (current_area["name"] || current_area["id"] || ""))).substr(0, 2048); window.open(url, 'null', _web.target); } }; }; _share_tencent_weibo(); //_share_tencent_weibo(share_btn,share_area);如须自定义功能，share_btn,share_area自己设置,其中share_area可以是一个DOM数组 </script>

 

　　　　使用方法：将上面的代码复制粘贴至网页body标签之间，一般放在页面最下方靠近html标签的地方。

　　用到的图标文件(鼠标右键另存为),可下载放到自己的服务器里，然后修改自定义变量bg_img为新的图片地址：

　　

 

以上所分享的是关于Q-Share分享：扩展新浪+腾讯微博的实现，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：点击分享至分享到新浪微博或分享到腾讯微博后即可...

　　答：Share to view all >>详细

　　相关问题：如何在应用中实现分享至微博的功能？？？？

　　答：仅供参考。[mw_shl_code=java,true]Intent intent_Share=new Intent(Intent.ACTION_SEND); intent_Share.setType("text/plain"); intent_Share.putExtra(Intent.EXTRA_SUBJECT, getString(R.string.setting_share_app_subject)); intent_Share.p... >>详细

　　相关问题：新浪微博分享按钮demo

　　答：去以下地址获取 http://open.weibo.com/sharebutton >>详细