腾讯空间、新浪微博、腾讯微博分享接口。
注意：在网站对接前，请先申请注册好您的QQ登录appid、新浪登录Appkey、腾讯微博appkey。
1、引用JS文件
<script src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="appid" type="text/javascript" language="javascript"></script> <!--腾讯空间-->
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=Appkey" type="text/javascript" language="javascript"></script> <!--新浪微博-->
<script type="text/javascript" src="http://mat1.gtimg.com/app/openjs/openjs.js"></script> <!--腾讯微博-->
其中，上面代码中的“APPID”替换为申请接入QQ登录时获得的appid；“Appkey”替换为申请接入新浪登录时获得的Appkey。
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\" οnerrοr=\"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.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;}4、参考资料
QQ互联：http://connect.qq.com/
新浪微博开放平台：http://open.weibo.com/
腾讯微博开放平台：http://dev.t.qq.com/
附件：
share_ico.png图片。
今天的文章腾讯空间、新浪微博、腾讯微博分享接口分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/76036.html
