zoukankan      html  css  js  c++  java
  • 添加分享

    以下案例,均可直接复制到html中,运行看结果,可直接修改应用
     
    bshare分享
    <!-- ---------------------------单独按钮分享---------------------------- -->
    <!-- 引用插分享插件 -->
    <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=2&amp;lang=zh&text=123"></script>
    <!--
         * src,#后面的参数为不同的选项(可选),参考:http://www.bshare.cn/help/apiJsParams
         * 个人用了一下,没有太大的意义,我们没有uuid,有些应用了但是没有效果,可能用法不对,大家可以一起看一下
    -->
    <h1>单独按钮分享</h1>
    <div class="share">
         <!--
              * 自定义的分享按钮
              * 其他分享的代码:http://www.bshare.cn/help/platformNames
         -->
        <a href="javascript:;" onclick="bShare.share(event,'qzone',1);return false;">
            <img src="http://i0.letvimg.com/pay/201504/27/1027/qqzonebg.png"/>
        </a>
        <a href="javascript:;" onclick="bShare.share(event,'weixin',1);return false;">
            <img src="http://i2.letvimg.com/pay/201504/27/1027/weixinbg.png"/>
        </a>
        <a href="javascript:;" onclick="bShare.share(event,'sinaminiblog',1);return false;"/>
            <img src="http://i2.letvimg.com/pay/201504/27/1027/sinabg.png"/>
        </a>
        <!-- 更多平台按钮,(可选择选择性添加) -->
        <a title="更多平台" onclick="javascript:bShare.more(event);return false;" style="cursor:pointer;color:#000;"/>
            <img src="http://static.bshare.cn/frame/images/logos/s4/more.gif" style="height:16px; 16px; vertical-align:middle;"/>
            <span style="padding-left:2px; vertical-align:middle;">更多平台</span>
         </a>
         <!-- 添加分享次数 (可选择选择性添加)-->
       <span class="BSHARE_COUNT" style="font-size:24px;">0</span>
    </div>
    <!--
         * 自定义分享链接、标题、摘要及图片等内容
         * 参考:http://www.bshare.cn/help/customShareContent
         * title: "分享的标题,默认为当前页面标题",
         * url: "分享的链接,默认为当前页面URL",
         * summary: "分享的文本摘要,默认为页面Meta标签中description的内容或者用户高亮的内容",
         * pic: "指定分享的图片的链接,目前支持新浪微博,QQ空间,搜狐微博,网易微博,人人网, * 嘀咕,腾讯微博和做啥。"
    -->
    <script type="text/javascript">
         bShare.addEntry({
             title: "羽泉2014北京圣诞演唱会",
             url: "http://www.letv.com",
             summary: "加入3个月乐视会员,不仅能看《羽泉2014北京圣诞演唱会》,还可领取官方何以礼品",
             pic: "http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg"
         });
    </script>
    <!-- ---------------------------单独按钮分享end---------------------------- -->
     
     
    <!-- ---------------------------一键分享 ---------------------------------- -->
    <!-- 引用插分享插件 -->
    <script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bsync.js#style=-1"></script>

    <h1>一键分享</h1>
    <!-- 参数
         * url     可选。分享的链接,默认为当前页面URL。
         * title     可选。分享的标题,默认为当前页面标题。
         * summary     可选。分享的文本摘要,默认为页面Meta标签中description的内容或者用户高亮的内容。
         * pic     可选。图片分享中默认被选中的图片。默认为页面图片中的第一张。
         * pics     可选。分享的图片链接,默认为页面中的图片。
    -->
    <div class="bsync-custom icon-medium-blue">
         <a title="一键分享到各大微博和社交网络" class="bshare-bsync" onclick="javascript:bSync.share(event, 'bsharesync', {
              url:'http://www.letv.com',
              title:'羽泉2014北京圣诞演唱会',
              summary:'加入3个月乐视会员,不仅能看《羽泉2014北京圣诞演唱会》,还可领取官方何以礼品~',
              pic:'http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg'
              })">
         </a>
         <!-- 添加分享次数 (可选择选择性添加)-->
         <span class="BSHARE_COUNT bshare-share-count">0</span>
    </div>
     
    <!-- ---------------------------一键分享end ---------------------------------- -->
     
     
    百度分享
    <!-- ---------------------------百度分享---------------------------- -->
     <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度分享</title>
        <style type="text/css">
            /*再样式上自定义默认按钮图片*/
            .bdshare-button-style0-16 a.bds_tsina{
                background-position: 0 0;
                background: url(http://i0.letvimg.com/pay/201504/27/1027/qqzonebg.png) no-repeat;
                52px;
                height:52px;
            }
        </style>
    </head>
    <body>
    <!--
    百度分享较为简单,大家可直接到
    http://share.baidu.com/code/advance参考
    -->
    <!-- 分享按钮 -->
    <div class="bdsharebuttonbox">
        <a href="#" class="bds_qzone" data-cmd="qzone"></a>
        <a href="#" class="bds_tsina" data-cmd="tsina"></a>
        <a href="#" class="bds_tqq" data-cmd="tqq"></a>
        <a href="#" class="bds_renren" data-cmd="renren"></a>
        <a href="#" class="bds_weixin" data-cmd="weixin"></a>
    </div>
    <!--
    common : {
        bdText : '自定义分享内容',
        bdDesc : '自定义分享摘要',
        bdUrl : '自定义分享url地址',  
        bdPic : '自定义分享图片'
    }, -->
    <script>
        window._bd_share_config = {
            "common": {
                "bdText": "hello123456",
                "bdDesc":"111",
                "bdUrl":"http://www.letv.com",
                "bdPic": "http://i1.letvimg.com/lc03_iscms/201510/15/09/24/01b234e689e04beeae4c1ed7251c36a0.jpg",
            },
            "share": {
            },
            "image": {"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到:", "viewSize": "16"},
            "selectShare": {"bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]}
        };
        document.body.appendChild(document.createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
    </script>
    </body>
    </html>
  • 相关阅读:
    Confluence 6 连接一个目录
    卸载 PrestaShop 1.7
    一“脚”到位-淋漓尽致的自动化部署
    从细节处谈Android冷启动优化
    视觉设计师的进化
    网易对象存储NOS图床神器
    移动端互动直播(入门篇)
    SpringBoot入门(五)——自定义配置
    SpringBoot入门(四)——自动配置
    SpringBoot入门(三)——入口类解析
  • 原文地址:https://www.cnblogs.com/qq735675958/p/7596951.html
Copyright © 2011-2022 走看看