教你如何自定义百度分享插件以及bshare分享插件的分享按钮

 更新时间:2014年06月20日 10:57:36   投稿:hebedich  
在项目中我们常用到百度分享插件或者bshare分享插件,虽然官方都有自定义按钮的功能,但是毕竟还是只有少数几种,我们如何来制作有自己特色的分享按钮呢?

百度分享插件

<style>
  .userStyle{
    width:100%;
    height:30px;
    display:block;
  }
  .userStyle span.bds_more{
    background:url("/wap/images/rfhui1.jpg") no-repeat scroll 0 5px rgba(0, 0, 0, 0) !important;
  }
</style>
<div class="userStyle">
  <!-- Baidu Button BEGIN -->
  <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
    <span class="bds_more"></span>
  </div>
  <script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
  <script type="text/javascript" id="bdshell_js"></script>
  <script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
  </script>
  <!-- Baidu Button END -->
</div>

bShare分享插件

<div class="bsync-custom icon-medium-blue">
  <a title="一键分享到各大微博和社交网络" class="bshare-bsync" onclick="javascript:bShare.more(event);return false;"></a>
</div>
<a class="bshareDiv" href="http://www.bshare.cn/share">分享按钮</a>
<script 
    type="text/javascript" 
    charset="utf-8" 
    src="http://static.bshare.cn/b/buttonLite.js#uuid=773faa5d-cee1-4696-9c99-d400a5d7a1c1&amp;style=999&amp;img=http%3A%2F%2Fjingguan.365use.com%2Fwap%2Fimages%2Frfhui1.jpg&amp;h=20&amp;w=23&amp;mdiv=0&amp;pop=-1&amp;bp=qqmb,bsharesync,sinaminiblog,qzone,189share,sohuminiblog,renren,xinhuamb,tianya,shouji,ifengmb,neteasemb,qqxiaoyou,kaixin001,weixin,douban,qqim">
</script>

相关文章

  • JS处理下划线的方法步骤

    JS处理下划线的方法步骤

    本文主要介绍了使用JavaScript处理下划线,特别是在双引号内的下划线不作为分隔符的情况,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • cypress中丰富的调试工具使用方法

    cypress中丰富的调试工具使用方法

    这篇文章主要为大家介绍了cypress中丰富的调试工具及使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 微信小程序HTTP请求从0到1封装

    微信小程序HTTP请求从0到1封装

    这篇文章主要给大家介绍了关于微信小程序HTTP请求从0到1封装的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • uniapp APP消息推送方案实现全过程

    uniapp APP消息推送方案实现全过程

    前段时间开发app的时候要开始做消息推送功能了,下面这篇文章主要给大家介绍了关于uniapp APP消息推送方案实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JS中的防抖与节流及作用详解

    JS中的防抖与节流及作用详解

    这篇文章主要介绍了JS中的防抖与节流及作用详解,本文通过文字说明加示例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • ES6 Promise对象概念与用法分析

    ES6 Promise对象概念与用法分析

    这篇文章主要介绍了ES6 Promise对象概念与用法,简单分析了Promise对象的基本状态与三种重要方法,并结合实例形式给出相关使用技巧,需要的朋友可以参考下
    2017-04-04
  • 通过js实现压缩图片上传功能

    通过js实现压缩图片上传功能

    这篇文章主要介绍了通过js实现压缩图片上传功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JS简单实现禁止访问某个页面的方法

    JS简单实现禁止访问某个页面的方法

    这篇文章主要介绍了JS简单实现禁止访问某个页面的方法,涉及基本的页面跳转操作技巧,需要的朋友可以参考下
    2016-09-09
  • 微信小程序scroll-view实现自定义滚动条

    微信小程序scroll-view实现自定义滚动条

    这篇文章主要为大家详细介绍了微信小程序scroll-view实现自定义滚动条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • uniapp实现单选框的示例代码

    uniapp实现单选框的示例代码

    本文给大家介绍uniapp实现单选框的示例代码,采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序,感兴趣的朋友跟随小编一起看看吧
    2024-03-03

最新评论