如何自定义百度分享URL以及图标？

时间：2015-08-21 来源：互联网

如何自定义百度分享URL以及图标？在使用百度分享的时候，需要在一个页面中分享不同的URL，即动态设置URL，由于百度分享只提供当前网站URL的分享，所以我们需要使用Jquery编写相应的代码来实现动态的URL分享功能，通过覆盖CSS样式改变图标样式。演示 http://www.internetke.com/jsEffects/2015082102/index.html

这里先展示下全部的代码，下面会仔细的说明和分析。由于有用到jquery，所以要注意引用：


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta content="width=device-width,user-scalable=no" name="viewport">

<title>自定义百度分享URL以及图标样式JS代码</title>

<link href="http://www.internetke.com/jsEffects/2015082102/css/style.css" rel="stylesheet" type="text/css">

<script language="javascript" src="http://www.internetke.com/public/js/jquery.js"></script>

</head>

<body>

<style type="text/css">

.bdsharebuttonbox a { width: 60px!important; height: 60px!important; margin: 0 auto 10px!important; float: none!important; padding: 0!important; display: block; }

.bdsharebuttonbox a img { width: 60px; height: 60px; }

.bdsharebuttonbox .bds_tsina { background: url(images/gbRes_6.png) no-repeat center center/60px 60px; }

.bdsharebuttonbox .bds_qzone { background: url(images/gbRes_4.png) no-repeat center center/60px 60px; }

.bdsharebuttonbox .bds_tqq { background: url(images/gbRes_5.png) no-repeat center center/60px 60px; }

.bdsharebuttonbox .bds_weixin { background: url(images/gbRes_2.png) no-repeat center center/60px 60px; }

.bdsharebuttonbox .bds_sqq { background: url(images/gbRes_3.png) no-repeat center center/60px 60px; }

.bdsharebuttonbox .bds_renren { background: url(images/gbRes_1.png) no-repeat center center/60px 60px; }

.bd_weixin_popup .bd_weixin_popup_foot { position: relative; top: -12px; }

</style>

<div class="gb_resLay">

  <div class="gb_res_t"><span>分享到</span><i></i></div>

  <div class="bdsharebuttonbox">

    <ul class="gb_resItms">

      <li> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>微信好友 </li>

      <li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>QQ好友 </li>

      <li> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>QQ空间 </li>

      <li> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>腾讯微博 </li>

      <li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>新浪微博 </li>

      <li> <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>人人网 </li>

    </ul>

  </div>

</div>

<script type="text/javascript">

        //全局变量，动态的文章ID

        var ShareURL = "";

        //绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID

        $(function () {

            $(".bdsharebuttonbox a").mouseover(function () {

                ShareURL = $(this).attr("data-url");

            });

        });



        /* 

        * 动态设置百度分享URL的函数,具体参数

        * cmd为分享目标id,此id指的是插件中分析按钮的ID

        *，我们自己的文章ID要通过全局变量获取

        * config为当前设置，返回值为更新后的设置。

        */

        function SetShareUrl(cmd, config) {            

            if (ShareURL) {

                config.bdUrl = ShareURL;    

            }

            return config;

        }



        //插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID

        window._bd_share_config = {

            "common": {

                onBeforeClick: SetShareUrl, "bdSnsKey": {}, "bdText": ""

                , "bdMini": "2", "bdMiniList": false, "bdPic": "http://www.internetke.com/uploads/allimg/131026/1-1310261J0270-L.jpg", "bdStyle": "0", "bdSize": "24"

            }, "share": {}

        };

        //插件的JS加载部分

        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)];

</script>

</body>

</html>

CSS代码：


.bdsharebuttonbox a { width: 60px!important; height: 60px!important; margin: 0 auto 10px!important; float: none!important; padding: 0!important; display: block; }
.bdsharebuttonbox a img { width: 60px; height: 60px; }
.bdsharebuttonbox .bds_tsina { background: url(images/gbRes_6.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_qzone { background: url(images/gbRes_4.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_tqq { background: url(images/gbRes_5.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_weixin { background: url(images/gbRes_2.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_sqq { background: url(images/gbRes_3.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_renren { background: url(images/gbRes_1.png) no-repeat center center/60px 60px; }
.bd_weixin_popup .bd_weixin_popup_foot { position: relative; top: -12px; }

1.先看下CSS代码，这里通过CSS可覆盖属性重新定义了图标样式。

HTML代码：


  <div class="bdsharebuttonbox">

    <ul class="gb_resItms">

      <li> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>微信好友 </li>

      <li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>QQ好友 </li>

      <li> <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>QQ空间 </li>

      <li> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>腾讯微博 </li>

      <li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>新浪微博 </li>

      <li> <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>人人网 </li>

    </ul>

  </div>

2.这里显示分享按钮的HTML代码，这部分代码可以重复设置多个，注意在所有的按钮链接(a标签)中添加了一个自定义属性data-id，这个属性是用来保存文章URL的唯一标识，是实现自定义功能一个重要的参数。

JS代码：


//全局变量，动态的文章ID
var ShareURL = "";
//绑定所有分享按钮所在A标签的鼠标移入事件，从而获取动态ID
$(function () {
    $(".bdsharebuttonbox a").mouseover(function () {
        ShareURL = $(this).attr("data-url");
    });
});

/* 
* 动态设置百度分享URL的函数,具体参数
* cmd为分享目标id,此id指的是插件中分析按钮的ID
*，我们自己的文章ID要通过全局变量获取
* config为当前设置，返回值为更新后的设置。
*/
function SetShareUrl(cmd, config) {            
    if (ShareURL) {
        config.bdUrl = ShareURL;    
    }
    return config;
}

//插件的配置部分，注意要记得设置onBeforeClick事件，主要用于获取动态的文章ID
window._bd_share_config = {
    "common": {
        onBeforeClick: SetShareUrl, "bdSnsKey": {}, "bdText": ""
        , "bdMini": "2", "bdMiniList": false, "bdPic": "http://www.internetke.com/uploads/allimg/131026/1-1310261J0270-L.jpg", "bdStyle": "0", "bdSize": "24"
    }, "share": {}
};
//插件的JS加载部分
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)];

3.JS部分，使用Jquery绑定所有分享按钮中A标签的mouseover事件，每当我们想要点击某个分享按钮时，鼠标肯定就会移动到分享按钮所在的a标签上，这样就触发了mouseover事件（Jquery事件，当鼠标指针位于元素上方时，会发生 mouseover 事件），我们设置了一个全局变量ShareURL，一旦触发事件我们就获取当前分享按钮a标签的data-id属性，并将data-id赋值给ShareURL，最后赋值插件参数config.bdUrl实现分享功能。

标签 js特效分享代码百度分享

收藏分享评论

如何自定义百度分享URL以及图标？

分类导航

大家都在看

Photoshop制作斜纹背景的简便方法

pageSwitch.js用法

移动端webapp开发必备知识

PS抽出哪儿去了？如何找出使用该功能抠图？

ps教程：Banner制作中素材的融合技巧

最新更新

HTML5 终于定稿，八年后我们再一次谈谈怎么改变世界

HTML5 respond.js 解决IE6~8的响应式布局问题

HTML5之Canvas基础绘图教程

CSS3滤镜-Filters

Easeljs 中文API