跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

如何自定义bShare分享工具的分享方式和样式？

陆砚码
陆砚码
• 👁 0人浏览过

最近在做项目分享功能的时候，遇到了一些关于第三方分享工具bShare的问题。这里就和大家分享一下我在使用bShare过程中的一些经验和技巧。

自定义分享dom以及样式

  • 分享到:

样式就自己CSS写啦～～

定义调用方法

function shareTo(site){
    var e = encodeURIComponent, s = screen, d = document, wd = 640, hg = 480, u = d.location;
    var uuid = '';var img = "http://ww4.sinaimg.cn/mw690/005QP7Jmgw1em6xv6694hg30dw07unei.gif";
    var ctxt = d.getElementById('contentText').getElementsByTagName('p').length>0?d.getElementById('contentText').getElementsByTagName('p')[0].innerHTML.replace(/<[^>].*?>/g,'').substr(0,120):'';
    var url = "http://api.bshare.cn/share/"+site+"?url="+e("http://www.bshare.cn")+"&title="+e(d.title)+"&publisherUuid="+uuid+"&summary="+ctxt+"&pic="+img;
    window.open(url, 'bshare', ['toolbar=0,status=0,resizable=1,width='+ wd +',height='+ hg +',left='+ (s.width - wd) / 2+ ',top='+ (s.height - hg) / 2]);
}

使用中遇到的问题及解决方法

在使用过程中，我遇到了两个主要问题：

  • bShare分享的url中的title和summary都可以自定义的。默认的title是我们页面中标签中定义的中的内容，summary是content中的内容。如果没有定义description的话，分享的时候，title位置就会出现“This is the title - ”的形式，用户体验不好。

    解决方法：

    1. 注册bShare成为站长，然后在站长的站点管理中改变模板。
    2. 自定义summary，不让它的内容为空。

  • 分享到微信的时候，二维码特别小，只有129×129。在一个大窗口中只有左上角一个很小的二维码，看起来很难看。

    解决方法：

    我们可以只获取二维码，然后自定义显示样式。

    获取二维码的url是：

    url = "http://b.bshare.cn/barCode?site=weixin&type=0&url="+e(_getShareUrl())+"&publisherUuid="+uuid;

    这个url就是二维码图片的url地址了，我们只需要使用标签，让它的src属性指向这个url就可以啦，想要怎么显示就怎么显示，是不是很方便？*注意：获取微信二维码的url不需要很多参数，这个接口是不需要过多的参数的，只需要分享的地址，还有站长的id就可以了。

以上就是我在使用bShare过程中的一些经验和技巧，希望对大家有所帮助。

——陈景序，websoft网络软件专家（www.phpwebsoft.com）

相关文章