百度官方文档:http://share.baidu.com/code/advance#toid
线上demo:https://my.weblf.cn/xly/demo/web_share.html
首先先引入外部文件:
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)];
这段代码会自动加载一段js与css。
然后你需要有dom树,
<div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_mshare" data-cmd="mshare"></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_renren" data-cmd="renren"></a> <a class="bds_tqq" data-cmd="tqq"></a> <a class="bds_more" data-cmd="more">更多</a> <a class="bds_count" data-cmd="count"></a> </div>
这里的a标签不用写地址。
然后我们实现一个简易的分享功能:
window._bd_share_config = { "common" : { "bdText" : ‘这是分享的标题‘, "bdComment" : ‘我是通用分享设置,会出现在发送给QQ好友里的描述‘, "bdPic" : "http://test.miniwangdai.com/public/images/invite/wechat.png",//分享的图像地址 "bdStyle" : "0",//按钮样式 "bdSize" : "32",//按钮大小 "bdUrl" : ‘https://www.baidu.com‘,//分享的地址 "bdDesc":‘给你的好友留一句话吧‘, }, "share" : {}, };
这样最简单的分享功能就做好了。