Asp.Net 之 调用分享接口
一、后台分享方式
腾讯QQ、腾讯空间、腾讯微博、新浪微博分享接口,如下:
注意:在网站对接前,请先申请注册好您的QQ登录appid、新浪登录Appkey、腾讯微博appkey。
//腾讯QQ分享
http://connect.qq.com/widget/shareqq/index.html?url=xxx&desc=xxx&title=xxx&pics=xxx&site=xxx
//腾讯QQ空间分享
http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=xxx&desc=xxx&title=xxx&pics=xxx&site=xxx
//腾讯微博分享
http://share.v.t.qq.com/index.php?c=share&a=index&title=xxx&url=xxx&appkey=xx&site=xxx&pic=xxx
//新浪微博分享
http://v.t.sina.com.cn/share/share.php?appkey=3359020342&&source=&content=utf-8&url=xxx&title=xxx&pic=xxx
http://service.weibo.com/share/share.php?url=xxx&appkey=&title=xxx&pic&ralateUid=&language=
http://widget.renren.com/dialog/share?resourceUrl=xxx&title=xxx&charset=GB2312
二、前台方式
1、引用JS文件
2、HTML代码
分享控件:
<div class="share-ico16" tit="" url="" pic=""> 分享至: <a class="tsina g-mr-5" href="javascript:;"></a> <a class="qzone g-mr-5" href="javascript:;"></a> <a class="tqq g-mr-5" href="javascript:;"></a> <a class="copy g-mr-5" href="javascript:;"></a> </div>
控件说明:
[1]、tit:绑定分享标题。
[2]、url:绑定分享链接。
[3]、pic:绑定分享图片。实例:
<ul> <li> 分享1:C#面向对象程序设计 <div class="share-ico16" tit="C#面向对象程序设计" url="http://blog.csdn.net/pan_junbiao/article/details/5308139" pic="http://i0.sinaimg.cn/ty/g/pl/2014-01-05/U9977P6T12D6966211F1286DT20140105031220.jpg"> 分享至: <a class="tsina g-mr-5" href="javascript:;"></a> <a class="qzone g-mr-5" href="javascript:;"></a> <a class="tqq g-mr-5" href="javascript:;"></a> <a class="copy g-mr-5" href="javascript:;"></a> </div> </li> <li> 分享2:Java面向对象程序设计 <div class="share-ico16" tit="Java面向对象程序设计" url="http://blog.csdn.net/pan_junbiao/article/details/5297328"
pic="http://i1.sinaimg.cn/ty/nba/idx/2014/0116/U10236P6T1280D1F37777DT20140116094831.jpg" > 分享至: <a class="tsina g-mr-5" href="javascript:;"></a> <a class="qzone g-mr-5" href="javascript:;"></a> <a class="tqq g-mr-5" href="javascript:;"></a> <a class="copy g-mr-5" href="javascript:;"></a> </div> </li> </ul>
3、Javascript脚本
创建share.js脚本文件。
var loginState = false; //模拟登陆 //分享 var share = { param: { webid: '', name: '', title: document.title, url: window.location.href, pic: '', content: '' }, //初始化 init: function() { share.popup(); share.login(); share.sina(); share.qzone(); share.tqq(); $('#share_popup_login_wb').click(function() { !WB2.checkLogin() && alert('<b>新浪微博登录弹窗有可能被浏览器拦截,请手动允许弹出窗口。</b>') }); $('.share-box a, .share-ico32 a, .share-ico20 a, .share-ico16 a, #share_copy, #share_sina, #share_qzone, #share_qq').click(function() { var _this = $(this), _do = function() { if (_this.hasClass('copy') || _this.attr('id') == 'share_copy') { if (window.clipboardData) { window.clipboardData.setData('text', share.param.title + ' ' + share.param.url); alert('<b>复制成功</b>!<br />请粘贴到你的QQ/MSN上推荐给你的好友。') } else { alert('<b>非IE浏览器请手动复制以下内容</b>:<br />' + share.param.title + ' ' + share.param.url) } } else { if (_this.hasClass('qzone') || _this.attr('id') == 'share_qzone') { share.param.webid = 'qzone '; share.param.name = 'QQ空间'; share.popup_login_wb.hide(); share.popup_submit_wb.hide(); share.popup_login_tx.hide(); share.popup_submit_tx.hide(); share.popup_login_qq.show(); share.popup_submit_qq.show() } else if (_this.hasClass('tqq') || _this.attr('id') == 'share_qq') { share.param.webid = 'tqq'; share.param.name = '腾讯微博'; share.popup_login_wb.hide(); share.popup_submit_wb.hide(); share.popup_login_tx.show(); share.popup_submit_tx.show(); share.popup_login_qq.hide(); share.popup_submit_qq.hide() } else if (_this.hasClass('tsina') || _this.attr('id') == 'share_sina') { share.param.webid = 'tsina'; share.param.name = '新浪微博'; share.popup_login_wb.show(); share.popup_submit_wb.show(); share.popup_login_tx.hide(); share.popup_submit_tx.hide(); share.popup_login_qq.hide(); share.popup_submit_qq.hide() } share.popup.reset(); share.popup_div.popShow('分享到' + share.param.name) } }, _parent = _this.parent(), _title = _parent.attr('tit'), _url = _parent.attr('url'), _pic = _parent.attr('pic'), _content = _parent.attr('content'); _title != undefined && _title != '' && (share.param.title = _title); _url != undefined && _url != '' && (share.param.url = _url.toLowerCase().indexOf('http') > -1 ? _url : 'http://' + window.location.host + _url + (login.info.UserID ? '?uid=' + login.info.UserID : '')); _pic != undefined && _pic != '' && (share.param.pic = _pic.toLowerCase().indexOf('http') > -1 ? _pic : 'http://' + window.location.host + _pic); _content != undefined && _content != '' && (share.param.content = _content); if (loginState) { _do() } else { share.login_box.popShow("登录后分享送积分"); share.login_ignore.unbind('click').click(function() { share.login_box.popHide(); _do() }) } }) }, sina: function() { WB2.anyWhere(function(W) { W.widget.connectButton({ id: "share_popup_login_wb", type: "3,5", callback: { login: function(o) { share.popup_submit_wb.unbind('click').click(function() { W.parseCMD("/statuses/upload_url_text.json", function(sResult, bStatus) { if (bStatus == true) { share.success() } else { if (sResult.error_code == 20019 || sResult.error_code == 20111) { share.error('请不要重复分享!') } else if (sResult.error_code == 20016) { share.error('分享过于频繁!') } else if (sResult.error_code == 10022 || sResult.error_code == 10023) { share.error('新浪接口繁忙,请分享到QQ空间或腾讯微博。') } else { share.error('新浪接口繁忙,请分享到QQ空间或腾讯微博。') } } }, { 'status': share.param.title + ' ' + share.param.url, 'url': share.param.pic }) }).removeClass('dis') }, logout: function() { share.popup_submit_wb.unbind('click').addClass('dis') } } }) }) }, qzone: function() { QC.Login({ btnId: "share_popup_login_qq" }, function(reqData, opts) { var dom = document.getElementById(opts['btnId']); dom && (dom.innerHTML = QC.String.format(['<span>{nickname}</span>', '<span><a href="javascript:QC.Login.signOut();">退出</a></span>'].join(""), { nickname: QC.String.escHTML(reqData.nickname), figureurl: reqData.figureurl })); share.popup_submit_qq.unbind('click').click(function() { QC.api("add_share", { title: share.param.title, //summary: (share.param.content != undefined && share.param.content != '') ? share.param.content : share.param.title, url: share.param.url, images: share.param.pic }).success(function(s) { share.success() }).error(function(f) { share.error('QQ空间接口繁忙,请分享到新浪或腾讯微博。') }) }).removeClass('dis') }, function() { share.popup_submit_qq.unbind('click').addClass('dis') }) }, tqq: function() { T.init({ appkey: 你的APPKEY }); var _loginBtn = $('<a href="javascript:;" style="display:none;">登录到腾讯微博</a>').appendTo($("#share_popup_login_tx")).click(function() { T.login(function(loginStatus) { _login(loginStatus) }, function(error) { }) }), _name = $('<span style="display:none;"></span>').appendTo($("#share_popup_login_tx")), _logoutBtn = $('<a href="javascript:;" style="display:none;margin-left:5px;">退出</a>').appendTo($("#share_popup_login_tx")).click(function() { T.logout(function() { _logout() }) }), _login = function(loginStatus) { _name.show().text(loginStatus.nick); _logoutBtn.show(); _loginBtn.hide(); share.popup_submit_tx.unbind('click').click(function() { T.api("/t/add_pic_url", { "content": share.param.title + ' ' + share.param.url, "pic_url": share.param.pic, "clientip": "", "longitude": "", "latitude": "", "syncflag": "0" }, "json", "post").success(function(response) { share.success() }).error(function(code, message) { share.error('腾讯微博接口繁忙,请分享到新浪或QQ空间。') }) }).removeClass('dis') }, _logout = function() { _name.hide().text(''); _logoutBtn.hide(); _loginBtn.show(); share.popup_submit_tx.unbind('click').addClass('dis') }; T.tokenReady(function() { if (T.loginStatus()) { _login(T.loginStatus()) } else { _logout() } }) }, error: function(s) { alert(s || '分享失败!') }, success: function() { alert('分享成功!', 1000); share.popup_div.popHide(); share.post() }, //登录用户,记录日志 post: function() { if (loginState) { alert("登录用户,记录日志,赠送积分!"); } }, popup: function() { share.popup_div = $('<div id=\"share_popup\"></div>').appendTo('body'); share.popup_form = $('<div id=\"share_popup_form\"></div>').appendTo(share.popup_div); share.popup_msg = $('<div id=\"share_popup_msg\" class=\"g-c-r g-fw-b\"></div>').appendTo(share.popup_div); var top = $('<div class=\"top\"></div>').appendTo(share.popup_form), mid = $('<div class=\"mid\"></div>').appendTo(share.popup_form), bot = $('<div class=\"bot\"></div>').appendTo(share.popup_form); share.popup_login_qq = $('<span id=\"share_popup_login_qq\"></span>').appendTo(top); share.popup_login_wb = $('<span id=\"share_popup_login_wb\"></span>').appendTo(top); share.popup_login_tx = $('<span id=\"share_popup_login_tx\"></span>').appendTo(top); share.popup_img = $('<img id=\"share_popup_img\" src=\"/images/common/transparent.png\" onerror=\"noPic(this)\" />').appendTo(mid); share.popup_text = $('<textarea id=\"share_popup_text\" cols=\"20\" rows=\"3\"></textarea>').appendTo(mid); share.popup_submit_qq = $('<a class=\"dis\" id=\"share_popup_submit_qq\">分享到QQ空间</a>').appendTo(bot); share.popup_submit_wb = $('<a class=\"dis\" id=\"share_popup_submit_wb\">分享到新浪微博</a>').appendTo(bot); share.popup_submit_tx = $('<a class=\"dis\" id=\"share_popup_submit_tx\">分享到腾讯微博</a>').appendTo(bot); share.popup.reset = function() { share.popup_form.show(); share.popup_msg.hide(); share.popup_img.attr('src', share.param.pic); share.popup_text.val(share.param.title + ' ' + share.param.url) } }, login: function() { share.login_box = $('<div style=\"width:240px;padding:20px 0;display:none;text-align:center;\"></div>').appendTo('body'); share.login_link = $('<a class=\"g-btn\">马上登录</a>').appendTo(share.login_box).click(function() { share.login_box.popHide(); loginState = true; alert("模拟登陆成功"); }); share.login_ignore = $('<a class=\"g-btn g-ml-10\">继续分享</a>').appendTo(share.login_box) } }; //弹出层 $.fn.popShow = function(title) { var tag = this; $('<div class=\"g-mask\"><iframe frameborder=\"0\" scrolling=\"no\"></iframe></div>').appendTo('body'); this.show().attr('par', this.parent().length ? true : false).appendTo('body').wrapAll('<table class=\"g-popup\"><tr><td></td></tr></table>'); this.wrapAll('<div class=\"g-popup-wrap\" style=\"width:' + this.outerWidth(true) + 'px\"></div>').before('<div class=\"g-popup-title g-line-dashed\">' + (title ? title : '') + '</div>').before($('<a class=\"g-popup-hide\" href=\"javascript:;\">关闭</a>').click(function() { tag.popHide() })); return this }; $.fn.popHide = function() { var tab = this.closest('table'); this.attr('par') == 'true' ? this.hide().appendTo('body') : this.remove(); tab.prev().remove(); tab.remove(); return this };
3、CSS样式
/*分享图标*/
.share-ico32 a, .share-ico20 a, .share-ico16 a, .share-box a, .share-box b { display:inline-block; vertical-align:middle;
overflow:hidden; background:url(/images/common/share_ico.png) no-repeat; } .share-ico32 a { height:32px; line-height:32px; padding-left:32px;} .share-ico32 .tsina { background-position:0 0 } .share-ico32 .qzone { background-position:0 -40px } .share-ico32 .tqq { background-position:0 -80px } .share-ico32 .renren { background-position:0 -120px } .share-ico32 .kaixin { background-position:0 -160px } .share-ico32 .copy { background-position:0 -200px } .share-ico20 a { height:20px; line-height:20px; padding-left:24px; } .share-ico20 .tsina { background-position:0 -240px } .share-ico20 .qzone { background-position:0 -270px } .share-ico20 .tqq { background-position:0 -300px } .share-ico20 .renren { background-position:0 -330px } .share-ico20 .kaixin { background-position:0 -360px } .share-ico20 .copy { background-position:0 -390px } .share-ico16 a { height:16px; line-height:16px; padding-left:20px; } .share-ico16 .tsina { background-position:0px -420px } .share-ico16 .qzone { background-position:0px -440px } .share-ico16 .tqq { background-position:0px -460px } .share-ico16 .renren { background-position:0px -480px } .share-ico16 .kaixin001 { background-position:0px -500px } .share-ico16 .copy { background-position:0px -520px } .share-ico16 .tsina-grey{background-position:0 -541px;} .share-ico16 .qzone-grey{background-position:0 -560px} .share-ico16 .tqq-grey{background-position:0 -579px;} .share-box a, .share-box b { height:16px; line-height:16px; padding-left:20px; margin:5px 0; color:#666; } .share-box .tsina { background-position:0px -420px } .share-box .qzone { background-position:0px -440px } .share-box .tqq { background-position:0px -460px } .share-box .renren { background-position:0px -480px } .share-box .kaixin001 { background-position:0px -500px } .share-box .copy { background-position:0px -520px }/*分享弹出层*/ #share_popup { width:400px; display:none; } #share_popup_form { display:block; } #share_popup_form, #share_popup_msg { height:164px; } #share_popup_msg { line-height:164px; text-align:center; font-size:14px; display:none; } #share_popup_form .top { height:24px; line-height:24px; } #share_popup_form .mid { border: 1px solid #ddd; background:#F7F7F7; margin:10px 0; } #share_popup_img { width:80px; height:80px; margin:4px; background-image:url(/images/common/nopic_s.png); } #share_popup_text { width: 301px; height:80px; border:0; border-left: 1px solid #EBEBEB; padding:4px; } #share_popup_form .bot { text-align:right; } #share_popup_form .bot a { background: url(http://timg.sjs.sinajs.cn/t4/appstyle/widget/images/library/base/btns_word.png) -261px 0;
display: inline-block; height: 40px; width: 86px; overflow:hidden; border:0; text-indent:-99em; text-align:left; } #share_popup_form .bot a:hover { background-position:-435px 0; } #share_popup_form .bot a.dis { background-position: -522px 0; }/*弹出层*/ .g-mask, .g-mask iframe, .g-popup { width:100%; height:100%; } .g-mask { background:#fff; filter:alpha(opacity=80); opacity:0.8; } .g-mask iframe { filter:alpha(opacity=0); opacity:0; } .g-mask, .g-popup { position:fixed; top:0; left:0; z-index:10000; _position:absolute; _top:expression(documentElement.scrollTop + "px");} .g-black-mask {background:#000;opacity:0.7;} .g-black-popup{position:absolute;} .g-popup { text-align:center; } .g-popup-wrap { padding:30px; background:#fff; border:#E95A59 solid 4px; text-align:left; position:relative; margin:0 auto; } .g-popup-title { font-size:14px; height:28px; line-height:28px; overflow:hidden; margin-bottom:20px; font-weight:bold; color:#e25150;
border-bottom:1px dotted #AAAAAA} .g-popup-hide { width:34px; height:30px; display:block; position:absolute; right:5px; top:5px; background-position:0 -1320px; z-index:99; } .g-popup-hide:hover { background-position:0 -1360px; } .g-info-hide { width:34px; height:30px; display:block; position:absolute; background-position:0 -1320px; top:5px; right:5px; } .g-info-hide:hover { background-position:0 -1360px; } .g-popup-tip { height: 0; overflow: hidden; position: fixed; z-index:10001; bottom: 0; right: 0; _position: absolute; _bottom: auto;
_top: expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));}/*其他*/ .g-mr-5 {margin-right: 5px !important;} .g-btn {cursor: pointer; margin-right:10px;} /*分享图标*/ .share-ico32 a, .share-ico20 a, .share-ico16 a, .share-box a, .share-box b { display:inline-block; vertical-align:middle; overflow:hidden;
background:url(/images/common/share_ico.png) no-repeat; } .share-ico32 a { height:32px; line-height:32px; padding-left:32px;} .share-ico32 .tsina { background-position:0 0 } .share-ico32 .qzone { background-position:0 -40px } .share-ico32 .tqq { background-position:0 -80px } .share-ico32 .renren { background-position:0 -120px } .share-ico32 .kaixin { background-position:0 -160px } .share-ico32 .copy { background-position:0 -200px } .share-ico20 a { height:20px; line-height:20px; padding-left:24px; } .share-ico20 .tsina { background-position:0 -240px } .share-ico20 .qzone { background-position:0 -270px } .share-ico20 .tqq { background-position:0 -300px } .share-ico20 .renren { background-position:0 -330px } .share-ico20 .kaixin { background-position:0 -360px } .share-ico20 .copy { background-position:0 -390px } .share-ico16 a { height:16px; line-height:16px; padding-left:20px; } .share-ico16 .tsina { background-position:0px -420px } .share-ico16 .qzone { background-position:0px -440px } .share-ico16 .tqq { background-position:0px -460px } .share-ico16 .renren { background-position:0px -480px } .share-ico16 .kaixin001 { background-position:0px -500px } .share-ico16 .copy { background-position:0px -520px } .share-ico16 .tsina-grey{background-position:0 -541px;} .share-ico16 .qzone-grey{background-position:0 -560px} .share-ico16 .tqq-grey{background-position:0 -579px;} .share-box a, .share-box b { height:16px; line-height:16px; padding-left:20px; margin:5px 0; color:#666; } .share-box .tsina { background-position:0px -420px } .share-box .qzone { background-position:0px -440px } .share-box .tqq { background-position:0px -460px } .share-box .renren { background-position:0px -480px } .share-box .kaixin001 { background-position:0px -500px } .share-box .copy { background-position:0px -520px } /*分享弹出层*/ #share_popup { width:400px; display:none; } #share_popup_form { display:block; } #share_popup_form, #share_popup_msg { height:164px; } #share_popup_msg { line-height:164px; text-align:center; font-size:14px; display:none; } #share_popup_form .top { height:24px; line-height:24px; } #share_popup_form .mid { border: 1px solid #ddd; background:#F7F7F7; margin:10px 0; } #share_popup_img { width:80px; height:80px; margin:4px; background-image:url(/images/common/nopic_s.png); } #share_popup_text { width: 301px; height:80px; border:0; border-left: 1px solid #EBEBEB; padding:4px; } #share_popup_form .bot { text-align:right; } #share_popup_form .bot a { background: url(http://timg.sjs.sinajs.cn/t4/appstyle/widget/images/library/base/btns_word.png) -261px 0;
display: inline-block; height: 40px; width: 86px; overflow:hidden; border:0; text-indent:-99em; text-align:left; } #share_popup_form .bot a:hover { background-position:-435px 0; } #share_popup_form .bot a.dis { background-position: -522px 0; } /*弹出层*/ .g-mask, .g-mask iframe, .g-popup { width:100%; height:100%; } .g-mask { background:#fff; filter:alpha(opacity=80); opacity:0.8; } .g-mask iframe { filter:alpha(opacity=0); opacity:0; } .g-mask, .g-popup { position:fixed; top:0; left:0; z-index:10000; _position:absolute; _top:expression(documentElement.scrollTop + "px");} .g-black-mask {background:#000;opacity:0.7;} .g-black-popup{position:absolute;} .g-popup { text-align:center; } .g-popup-wrap { padding:30px; background:#fff; border:#E95A59 solid 4px; text-align:left; position:relative; margin:0 auto; } .g-popup-title { font-size:14px; height:28px; line-height:28px; overflow:hidden; margin-bottom:20px; font-weight:bold; color:#e25150;
border-bottom:1px dotted #AAAAAA} .g-popup-hide { width:34px; height:30px; display:block; position:absolute; right:5px; top:5px; background-position:0 -1320px; z-index:99; } .g-popup-hide:hover { background-position:0 -1360px; } .g-info-hide { width:34px; height:30px; display:block; position:absolute; background-position:0 -1320px; top:5px; right:5px; } .g-info-hide:hover { background-position:0 -1360px; } .g-popup-tip { height: 0; overflow: hidden; position: fixed; z-index:10001; bottom: 0; right: 0; _position: absolute; _bottom: auto;
_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop, 10) || 0) - (parseInt(this.currentStyle.marginBottom, 10) || 0)));} /*其他*/ .g-mr-5 {margin-right: 5px !important;} .g-btn {cursor: pointer; margin-right:10px;}
三、参考资料
1、QQ互联:http://connect.qq.com/
<script type="text/javascript"> (function(){ var p = { url:location.href, /*获取URL,可加上来自分享到QQ标识,方便统计*/ desc:'', /*分享理由(风格应模拟用户对话),支持多分享语随机展现(使用|分隔)*/ title:'', /*分享标题(可选)*/ summary:'', /*分享摘要(可选)*/ pics:'', /*分享图片(可选)*/ flash: '', /*视频地址(可选)*/ site:'', /*分享来源(可选) 如:QQ分享*/ style:'201', width:32, height:32 }; var s = []; for(var i in p){ s.push(i + '=' + encodeURIComponent(p[i]||'')); } document.write(['<a class="qcShareQQDiv" href="http://connect.qq.com/widget/shareqq/index.html?',s.join('&'),'" target="_blank">分享到QQ</a>'].join('')); })(); </script> <script src="http://connect.qq.com/widget/loader/loader.js" widget="shareqq" charset="utf-8"></script>
2、新浪微博开放平台:http://open.weibo.com/
3、腾讯微博开放平台:http://dev.t.qq.com/
4、附件:
share_ico.png图片。