移动端使用百度分享代码

首页 > 代码库 > 移动端使用百度分享代码

移动端使用百度分享代码

2024-09-16 16:56:09 216人阅读

最近看了一些关于分享自媒体的代码，最后在在项目中使用了百度的分享代码，百度分享的代码格式，如下

<div class="bdsharebuttonbox" data-tag="share_1">
    <!-- 此处添加展示按钮 -->
</div>
<script>
    window._bd_share_config = {
    //此处添加分享具体设置
    }

    //以下为js加载部分
    with(document)0[(getElementsByTagName(‘head‘)[0]||body).appendChild(createElement(‘script‘)).src=http://www.mamicode.com/‘http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=‘+~(-new Date()/36e5)];>

通过config，可以对分享链接、分享图片、分享描述、分享渠道等信息进行配置。具体可以参考百度分享代码的文档

http://share.baidu.com/code/advance#config

我这边在实际使用中，并没有进行过多的配置，而是采用css重写部分样式的方式来制作。

以下我这边的demo展示效果图

技术分享

大概就是长这个样式，具体代码如下：

html:

<!DOCTYPE html>
<html>
<head lang="cn">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>移动百度分享demo</title>
    <link rel="stylesheet" href="http://www.mamicode.com/css/index.css" />
</head>
<body>
    <h2 id="share">
        分享
    </h2>
    <section class="screenW">
        <div class="subW">
            <div class="info">
                <div class="shareBox">
                    <h2>请选择您的分享方式：</h2>
                    <div class="bdsharebuttonbox">
                        <a href="http://www.mamicode.com/#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
                        <a href="http://www.mamicode.com/#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
                        <a href="http://www.mamicode.com/#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ</a>
                        <a href="http://www.mamicode.com/#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
                        <a href="http://www.mamicode.com/#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
                    </div>
                    <div class="bdsharebuttonbox">
                        <a href="http://www.mamicode.com/#" onclick="return false;" class="popup_more" data-cmd="more"></a>
                    </div>
                </div>
            </div>
            <div class="close">关闭</div>
        </div>
    </section>
    <script src="http://www.mamicode.com/js/zepto.min.js"></script>
    <script src="http://www.mamicode.com/js/main.js"></script>
</body>
</html>

css

html{font-size:10px;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight: normal; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; background:#f5f5f5;}
ol, ul { list-style:none;}
em, i{font-style: normal;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:‘‘; content:none;}
table { border-collapse:collapse; border-spacing:0;}
* {
    tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
input, textarea { outline:0; resize:none; -webkit-appearance: none;}
img{vertical-align: middle;}
a{display: block; color: #333; text-decoration: none;}

/*以下是样式代码*/
#share{margin: 50px;text-align: center;}

.screenW{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 999; display: none;}
.subW{width: 100%; height: 260px; position: absolute; left: 0; bottom: -260px; background-color: #FFF; z-index: 999;}
.subW.move{
    animation:sidebar-move .5s ease;
    -webkit-animation:sidebar-move .5s ease;
    bottom:0px;
}
.subW.back{
    animation:sidebar-back .5s ease;
    -webkit-animation:sidebar-back .5s ease;
    bottom:-260px;
}
.subW .title{width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: .4rem;}
.subW .close{width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: .4rem; color: #FFF; background: #2fc7c9;}
.subW .info{width:100%; height: 220px; padding: 0 10px;}
/*以下是对百度自带样式的改造*/
.shareBox .bdshare-button-style0-16{
    background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,.1) 50%,transparent 50%);
    background-image: linear-gradient(bottom,rgba(0,0,0,.1) 50%,transparent 50%);
    background-size:  100% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.shareBox .bdshare-button-style0-16:last-child{background: none;}
.shareBox .bdshare-button-style0-16:after{
    content: "";
    visibility: hidden;
    display: none;
    height: 0;
    clear: both;
}
.shareBox .bdshare-button-style0-16 a{
    text-align: center;
    float: none;
    font-size: 12px;
    padding: 35px 0 0 0;
    line-height: normal;
    height: auto;
    cursor: pointer;
    margin: 10px 0;
    position: relative;
    background: none;
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
}
.shareBox .bdshare-button-style0-16 a:after{
    content: " ";
    width:30px;
    height:30px;
    position: absolute;
    left: 50%;
    top: 0px;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.shareBox .bdshare-button-style0-16 a.bds_qzone:after{
    background: url("../img/icon_qqkongjian_yellow.png") no-repeat; background-size: 100%;
}
.shareBox .bdshare-button-style0-16 a.bds_tsina:after{
    background: url("../img/icon_xinlangweibo_red.png") no-repeat; background-size: 100%;
}
.shareBox .bdshare-button-style0-16 a.bds_sqq:after{
    background: url("../img/icon_qqhaoyou_blue.png") no-repeat; background-size: 100%;
}
.shareBox .bdshare-button-style0-16 a.bds_tqq:after{
    background: url("../img/icon_qqweibo_green.png") no-repeat; background-size: 100%;
}
.shareBox .bdshare-button-style0-16 a.bds_weixin:after{
    background: url("../img/icon_weixin_green.png") no-repeat; background-size: 100%;
}

.shareBox .bdshare-button-style0-16 a.popup_more{width: 100%; margin: 20px 0;}
.shareBox .bdshare-button-style0-16 a.popup_more:after{
    width:40px;
    height:40px;
    position: absolute;
    left: 50%;
    top: 0px;
    background: url("../img/icon_more_orange.png") no-repeat; background-size: 100%;

}
/*动画*/
@keyframes sidebar-move {
    0% {
        bottom:-260px;
    }
    100% {
        bottom:0px;
    }
}
@keyframes sidebar-back {
    0% {
        bottom:0px;
    }
    100% {
        bottom:-260px;
    }
}
@-webkit-keyframes sidebar-move {
    0% {
        bottom:-260px;
    }
    100% {
        bottom:0px;
    }
}
@-webkit-keyframes sidebar-back {
    0% {
        bottom:0px;
    }
    100% {
        bottom:-260px;
    }
}

(function() {
    var main = {
        node: {
            closeBtn: $(‘.close‘),
            screenW: $(‘.screenW‘),
            subW: $(‘.subW‘),
            share: $(‘#share‘),
            shareBox: $(‘.shareBox‘)
        },
        /*入口*/
        init: function() {
            var self = this;
            self.closeTap();
            self.shareTap();
        },
        /*分享点击弹窗*/
        shareTap: function() {
            var self = this;
            self.node.share.on(‘tap‘, function() {
                self.wShow();
                self.node.shareBox.show().siblings().hide();
            });
        },
        /*点击关闭弹窗*/
        closeTap: function() {
            var self = this;
            self.node.closeBtn.on(‘tap‘, function() {
                self.wHide();
            });
        },
        /*窗口显示*/
        wShow: function() {
            var self = this;
            self.node.screenW.show();
            self.node.subW.addClass(‘move‘).removeClass(‘back‘);
        },
        /*窗口隐藏*/
        wHide: function() {
            var self = this;
            self.node.subW.addClass(‘back‘).removeClass(‘move‘);
            setTimeout(function() {
                self.node.screenW.hide();
            }, 500);
        }
    };
    /*商品js入口*/
    main.init();

    /*百度分享js*/
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {},
        "image": {
            "viewList": ["qzone", "tsina", "sqq", "tqq", "weixin"],
            "viewText": "分享到：",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": ["qzone", "tsina", "sqq", "tqq", "weixin"]
        }
    };
    with(document) 0[(getElementsByTagName(‘head‘)[0] || body).appendChild(createElement(‘script‘)).src = http://www.mamicode.com/‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~(-new Date() / 36e5)];>

移动端使用百度分享代码

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 移动端使用百度分享代码

移动端使用百度分享代码

看完仍有疑问？有类似问题直接问程序猿