改参数，可以改图标的尺寸：16x16、24x24、32x32
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //baidu共享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16",//16x16 //"bdSize": "24",//24x24 //"bdSize": "32",//32x32 }, "share": {} }; var $head = $('head'),scriptEle = document.createElement('script'); scriptEle.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js'; $head.append(scriptEle); }); </script> </head> <body> <!-- 点击分享按钮后的多个分享按钮层 --> <div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_tqq" data-cmd="tqq" title="腾讯微博"></a> <a class="bds_qzone" data-cmd="qzone" title="QQ空间"></a> <a class="bds_sqq" data-cmd="sqq" title="QQ好友"></a> <a class="bds_tsina" data-cmd="tsina" title="新浪微博"></a> <a class="bds_weixin" data-cmd="weixin" title="微信"></a> </div> <div class="bdsharebuttonbox" data-tag="share_2"> <a class="bds_tqq" data-cmd="tqq" title="腾讯微博"></a> <a class="bds_qzone" data-cmd="qzone" title="QQ空间"></a> <a class="bds_sqq" data-cmd="sqq" title="QQ好友"></a> <a class="bds_tsina" data-cmd="tsina" title="新浪微博"></a> <a class="bds_renren" data-cmd="renren" title="人人网"></a> <a class="bds_weixin" data-cmd="weixin" title="微信"></a> <a class="bds_bdxc" data-cmd="bdxc" title="百度相册"></a> <a class="bds_kaixin001" data-cmd="kaixin001" title="开心网"></a> <a class="bds_tqf" data-cmd="tqf" title="腾讯朋友"></a> <a class="bds_tieba" data-cmd="tieba" title="百度贴吧"></a> <a class="bds_douban" data-cmd="douban" title="豆瓣网"></a> <a class="bds_tsohu" data-cmd="tsohu" title="搜狐微博"></a> <a class="bds_bdhome" data-cmd="bdhome" title="百度新首页"></a> <a class="bds_thx" data-cmd="thx" title="和讯微博"></a> <a class="bds_bdysc" data-cmd="bdysc" title="百度云收藏"></a> <a class="bds_meilishuo" data-cmd="meilishuo" title="美丽说"></a> <a class="bds_mogujie" data-cmd="mogujie" title="蘑菇街"></a> <a class="bds_diandian" data-cmd="diandian" title="点点网"></a> <a class="bds_huaban" data-cmd="huaban" title="花瓣"></a> <a class="bds_duitang" data-cmd="duitang" title="堆糖"></a> <a class="bds_hx" data-cmd="hx" title="和讯"></a> <a class="bds_fx" data-cmd="fx" title="飞信"></a> <a class="bds_youdao" data-cmd="youdao" title="有道云笔记"></a> <a class="bds_sdo" data-cmd="sdo" title="麦库记事"></a> <a class="bds_qingbiji" data-cmd="qingbiji" title="轻笔记"></a> <a class="bds_people" data-cmd="people" title="人民微博"></a> <a class="bds_xinhua" data-cmd="xinhua" title="新华微博"></a> <a class="bds_mail" data-cmd="mail" title="邮件分享"></a> <a class="bds_isohu" data-cmd="isohu" title="我的搜狐"></a> <a class="bds_yaolan" data-cmd="yaolan" title="摇篮空间"></a> <a class="bds_wealink" data-cmd="wealink" title="若邻网"></a> <a class="bds_ty" data-cmd="ty" title="天涯社区"></a> <a class="bds_fbook" data-cmd="fbook" title="Facebook"></a> <a class="bds_twi" data-cmd="twi" title="Twitter"></a> <a class="bds_linkedin" data-cmd="linkedin" title="linkedin"></a> <a class="bds_copy" data-cmd="copy" title="复制网址"></a> <a class="bds_print" data-cmd="print" title="打印"></a> <a class="bds_ibaidu" data-cmd="ibaidu" title="百度个人中心"></a> <a class="bds_iguba" data-cmd="iguba" title="股吧"></a> <br><br> <a class="bds_more" data-cmd="more">更多</a> <a class="bds_count" data-cmd="count"></a> <a class="bds_mshare" data-cmd="mshare" title="一键分享"></a> </div> </body> </html>
baidu分享，自定义图标：
http://www.internetke.com/effects/menu/2015/0821/1723.html 2016-6-13
http://www.internetke.com/jsEffects/2015082102/index.html 2016-6-23
<h1 class="keTitle">自定义百度分享URL以及图标样式JS代码</h1> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- <link href="http://www.internetke.com/jsEffects/2015082102/css/style.css" rel="stylesheet" type="text/css"> --> <style type="text/css"> body {font-family:"微软雅黑";} ul, ol, li {list-style-type:none;} .mybds-list{margin:0px 4%;} .mybds-list .mybds-item{float:left;width:16.66%;text-align:center;} </style> <!--效果html开始--> <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(http://www.internetke.com/jsEffects/2015082102/images/gbRes_6.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_qzone { background: url(http://www.internetke.com/jsEffects/2015082102/images/gbRes_4.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_tqq { background: url(http://www.internetke.com/jsEffects/2015082102/images/gbRes_5.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_weixin { background: url(http://www.internetke.com/jsEffects/2015082102/images/gbRes_2.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_sqq { background: url(http://www.internetke.com/jsEffects/2015082102/images/gbRes_3.png) no-repeat center center/60px 60px; } .bdsharebuttonbox .bds_renren { background: url(http://www.internetke.com/jsEffects/2015082102/images/gbRes_1.png) no-repeat center center/60px 60px; } </style> <div class="bdsharebuttonbox"> <ul class="mybds-list"> <li class="mybds-item"> <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>微信好友 </li> <li class="mybds-item"> <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 class="mybds-item"> <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 class="mybds-item"> <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>腾讯微博 </li> <li class="mybds-item"> <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina" data-url="http://www.internetke.com/material/img/2013/1026/26.html"></a>新浪微博 </li> <li class="mybds-item"> <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> <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> <!--效果html结束-->
百度分享：http://share.baidu.com/
http://share.baidu.com/code/advance
加网：http://www.jiathis.com/
http://www.webhek.com/change-jiathis-bshare-baidu-share-icon 解决jiathis/bshare/百度分享等网页分享工具图标丑陋难看的方法 2016-2-23
http://www.xuanfengge.com/social-platform-to-share-your-custom-javascript-components.html 社交平台分享自定义javascript组件