添加到百度首頁
添加收藏 RSS 網站地圖 舊版網站
  • 全部
  • 網頁特效
  • 建站教程
  • 設計分享
當前位置:首頁 > 建站教程 > JavaScript教程 >

如何自定義百度分享URL以及圖標?

時間:2015-08-21      來源:互聯網     

如何自定義百度分享URL以及圖標?在使用百度分享的時候,需要在一個頁面中分享不同的URL,即動態設置URL,由于百度分享只提供當前網站URL的分享,所以我們需要使用Jquery編寫相應的代碼來實現動態的URL分享功能,通過覆蓋CSS樣式改變圖標樣式。演示 http://www.wiwgwy.live/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.wiwgwy.live/jsEffects/2015082102/css/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="http://www.wiwgwy.live/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.wiwgwy.live/material/img/2013/1026/26.html"></a>微信好友 </li>
      <li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>QQ好友 </li>
      <li> <a title="分享到QQ空間" href="#" class="bds_qzone" data-cmd="qzone" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>QQ空間 </li>
      <li> <a title="分享到騰訊微博" href="#" class="bds_tqq" data-cmd="tqq" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>騰訊微博 </li>
      <li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>新浪微博 </li>
      <li> <a title="分享到人人網" href="#" class="bds_renren" data-cmd="renren" data-url="http://www.wiwgwy.live/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.wiwgwy.live/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.wiwgwy.live/material/img/2013/1026/26.html"></a>微信好友 </li>
      <li> <a title="分享到QQ好友" href="#" class="bds_sqq" data-cmd="sqq" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>QQ好友 </li>
      <li> <a title="分享到QQ空間" href="#" class="bds_qzone" data-cmd="qzone" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>QQ空間 </li>
      <li> <a title="分享到騰訊微博" href="#" class="bds_tqq" data-cmd="tqq" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>騰訊微博 </li>
      <li> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" data-url="http://www.wiwgwy.live/material/img/2013/1026/26.html"></a>新浪微博 </li>
      <li> <a title="分享到人人網" href="#" class="bds_renren" data-cmd="renren" data-url="http://www.wiwgwy.live/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.wiwgwy.live/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實現分享功能。

相關文章
web前端視頻教程


大家都在看

最新更新

web前端視頻教程
彩票中奖指 红球尾数的和排除法 股票配资软件 打板怎么赚钱呢 排列5红球杀号专家 体彩宁夏11选5 迅雷赚钱宝才几kb 复式在线过滤工具 山东11选5 干螺狮粉赚钱吗 山东群英会预测杀号 网络棋牌游戏外挂透视 代发广告怎么赚钱 贵州十一选五怎么玩 阿里巴巴股票行情 足彩17182合买 黄金城棋牌官网下载