我们经常看到某些自媒体网站信息列表都会有个分享功能,可以分享对应的信息内容。大部分都是自行开发的分享接口,为了节省开发时间,我们也可以用百度分享API来完成这种功能。
近期案列用到的一个页面多个百度分享组件代码,由于百度分享官网关闭了,所以看不了官方API,网上各种查资料才找到一个可以用的。
一个页面多个百度分享代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <script>window._bd_share_config = {share: []};</script> <body> <div class="bdsharebuttonbox col-xs-5" data-tag="share_1"> <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> <a href="#" class="bds_more" data-cmd="more"></a> <a class="bds_count" data-cmd="count"></a> </div> <script> var share1 = { tag: "share_1", bdText: "分享的内容", bdUrl: "http://www.wdzzz.com", bdDesc:"111" }; window._bd_share_config.share.push(share1); </script> <div class="bdsharebuttonbox col-xs-5" data-tag="share_2"> <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> <a href="#" class="bds_more" data-cmd="more"></a> <a class="bds_count" data-cmd="count"></a> </div> <script> var share2 = { tag: "share_2", bdText: "分享的内容", bdUrl: "http://www.wdzzz.com", bdDesc:"222" }; window._bd_share_config.share.push(share2); </script> <script> 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> </div> </body> </html>
首先需要在头部重置一下百度分享插件
<script>window._bd_share_config = {share: []};</script>
然后在分享组件加个
data-tag="share_1">
区分一下百度分享组件。
接着是分享内容代码
<script> var share1 = { tag: "share_1", bdText: "分享的内容", bdUrl: "http://www.wdzzz.com", bdDesc:"111" }; window._bd_share_config.share.push(share1); </script>
这里的share_1对应的分享按钮的share_1,share1也是为了区分分享内容需要不同。
最后在底部引用百度分享的JS
<script> 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>