移动端使用百度分享代码

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

<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://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=‘+~(-new Date()/36e5)];
</script>

通过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="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="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
                        <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
                        <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ</a>
                        <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
                        <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
                    </div>
                    <div class="bdsharebuttonbox">
                        <a href="#" onclick="return false;" class="popup_more" data-cmd="more"></a>
                    </div>
                </div>
            </div>
            <div class="close">关闭</div>
        </div>
    </section>
    <script src="js/zepto.min.js"></script>
    <script src="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;
    }
}

js

(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://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~(-new Date() / 36e5)];
})();

下载地方放到csdn上去了,地址为

http://download.csdn.net/detail/hufengsky123/9270163

时间: 2024-10-13 02:45:45

移动端使用百度分享代码的相关文章

百度分享代码

<a class="show-sc" data-value="@item.InfoID" data-name="收藏" data-type="lz"  title="收藏"></a> <!--百度分享--><!-- Baidu Button BEGIN --><div id="bdshare" class="bdshare_

百度分享代码,之前的找不到了啊

<!-- Baidu Button BEGIN -->   <script type="text/javascript" id="bdshare_js" data="type=slide&img=0&pos=right&uid=6558483" ></script>   <script type="text/javascript" id="bdshel

为博客园(或网站)添加百度分享按钮 自定义调用JS代码

1.百度分享代码调用地址 http://share.baidu.com/code 根据提示,一步一步的自定义选择,最后复制自定义好的样式,添加到WEB. 2.在页首Html代码中添加复制过来的JS代码 <!--baidu分享--> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini"

百度分享不支持https的解决方案

站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决 百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下使用 ~ 伸手党 先上伸手党的解决方案~ 博主修改好的分享代码(下面两个链接下载其中一个的即可)  http://pan.baidu.com/s/1pLnHk4j     密码:pfr7  (下面两个地址中文件不全) http://vdisk.weibo.com/lc/2wtonQtT2CvFl89

百度分享--分享按钮的实现

?? 百度分享代码: <%@ page contentType="text/html;charset=UTF-8"%><div class="bdsharebuttonbox"> <a href="#" class="bds_more" data-cmd="more"></a><a href="#"  class="bds_

解决https网站商品中百度分享无法使用的问题

百度分享不支持HTTPS这件事由来已久,但近期ecshop各最新模板咨询的比较多,我们就总结了解决方案. 第一步:下载百度分享必备文件 点此下载static.zip,将解压(解压密码:themebetter)后得到的static文件夹上传到网站根目录(注:域名/static). 最后一步:修改百度分享代码 删除百度分享代码中的以下网址 http://bdimg.share.baidu.com 至此,你就解决了百度分享不支持HTTPS的问题. 原文地址:https://www.cnblogs.co

百度分享怎么 自定义图片分享 【原创】

我们在应用百度分享插件的时候, 默认如果开启图片分享的话,连很多小图标也分享了,实在恼火! 去掉图片分享吧,分享效果又不好... 如何做到自定义图片分享呢? 就是预先定义tag标签 例如:  "tag": "sharePhoto", 然后在img标签里 加上 data-tag="sharePhoto" ======================= 完整代码送看官 html里: <img data-tag="sharePhoto&

解决WordPress百度分享图标不显示问题

最近在帮朋友维护博客时,发现他的百度分享居然不能使用了,首先很多人会认为,百度分享挂在那里就是一种摆设,又没有几个人去分享,有什么含义呢?其实挂百度分享的含义是非常重要的,网站增加一个百度分享是可以增加百度的收录.提升网站流量.但是经常会出现按照百度分享的操作一步一步操作了,分享的图标就是出不来,今天就以WordPress给大家解决百度分享图标不显示问题. 百度分享图标不显示问题原因及解决方法: 百度分享图标不显示问题主要原因在于,百度分享代码不支持https,下面就介绍具体的解决方法. 第一步

网站添加百度分享按钮代码实例

百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,借助百度分享按钮,网站的浏览者可以方便的分享内容到人人网.开心网.QQ空间.新浪微博等一系列SNS站点. 网站主可以在百度分享网站中获得分享按钮JS代码,嵌入到自己的网站,让网站链接分享到互联网各个角落! 步骤/方法 进入百度分享也面,选择分享按钮样式,有按钮式,文字式,图标式,浮窗式几种可一选择   选定样式后,点击免费获取代码,进去代码页面,复制分享按钮代码   进自己的网站后台,在需要的地方用源代码模式粘贴刚刚复制的代码