官方提供的分享插件进行分享,在官网里已经找不到文档了,但插件还是能用的。
一、代码结构
分享代码可以分为三个部分:HTML、设置和js加载
html:
<div id="share"> <div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_more" data-cmd="more">更多</a> <a class="bds_weixin" data-cmd="weixin"></a> <a class="bds_qzone" data-cmd="qzone" href="#"></a> <a class="bds_tsina" data-cmd="tsina"></a> <a class="bds_baidu" data-cmd="baidu"></a> <a class="bds_sqq" data-cmd="sqq"></a> <a class="bds_tieba" data-cmd="tieba"></a> </div> </div>
设置及js加载:
<script> //设置 window._bd_share_config = { common: { bdText: ‘分享内容‘, bdDesc: ‘分享摘要‘, bdUrl: ‘分享url地址‘, bdPic: ‘分享图片‘ }, share: [{ "bdSize": 16 }], slide: [{ bdImg: 0, bdPos: "right", bdTop: 100 }], image: [{ viewType: ‘list‘, viewPos: ‘top‘, viewColor: ‘black‘, viewSize: ‘16‘, viewList: [‘qzone‘, ‘tsina‘, ‘huaban‘, ‘tqq‘, ‘renren‘] }], selectShare: [{ "bdselectMiniList": [‘qzone‘, ‘tqq‘, ‘kaixin001‘, ‘bdxc‘, ‘tqf‘] }] } //js加载 with (document) 0[(getElementsByTagName(‘head‘)[0] || body).appendChild(createElement(‘script‘)).src = ‘http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=‘ + ~(-new Date() / 36e5)]; </script>
二、分享的媒体id对应表
通过更改html代码的class和data-cmd可以更改分享媒体:
名称ID | ID | 名称 | ID | |
---|---|---|---|---|
一键分享 | mshare | QQ空间 | qzone | |
新浪微博 | tsina | 人人网 | renren | |
腾讯微博 | tqq | 百度相册 | bdxc | |
开心网 | kaixin001 | 腾讯朋友 | tqf | |
百度贴吧 | tieba | 豆瓣网 | douban | |
搜狐微博 | tsohu | 百度新首页 | bdhome | |
QQ好友 | sqq | 和讯微博 | thx | |
百度云收藏 | bdysc | 美丽说 | meilishuo | |
蘑菇街 | mogujie | 点点网 | diandian | |
花瓣 | huaban | 堆糖 | duitang | |
和讯 | hx | 飞信 | fx | |
有道云笔记 | youdao | 麦库记事 | sdo | |
轻笔记 | qingbiji | 人民微博 | people | |
新华微博 | xinhua | 邮件分享 | ||
我的搜狐 | isohu | 摇篮空间 | yaolan | |
若邻网 | wealink | 天涯社区 | ty | |
fbook | twi | |||
复制网址 | copy | |||
打印 | 百度个人中心 | ibaidu | ||
微信 | weixin | 股吧 | iguba |
window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "24" }, "share": {}, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到:", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"] } }; with (document) 0[(getElementsByTagName(‘head‘)[0] || body).appendChild(createElement(‘script‘)).src = ‘//s.hangjiayun.com/house/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~(-new Date() / 36e5)];
<div class="bdsharebuttonbox bdshare-button-style0-24" data-bd-bind="1593434565925"> <span class="fl text">分享到:</span> <a href="#" class="bds_more" data-cmd="more"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a> <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a> <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> </div>