解决jiathis/bshare/百度分享等网页分享工具图标丑陋难看的方法

对网站站长来说,网页分享工具是一种非常重要的获取流量的方法,同时也是给读者提供了良好的分享接口。网页分享工具最初还是从国外先流行,样式也很漂亮,比如下面的两种:

例一:
share2

例二:
share1

在国内,最流行的分享工具也就是JiaThisbShare百度分享几种,虽然功能上并没有什么缺失,但总感觉它们的分享图标十分的丑陋,看看它们的图标:

jiathis分享图标:
jiathis

bShare分享图标:
bshare

百度分享图标:
baidu

非常的类似,而且呆板。

作为一个程序员,我实际是可以自己创作出类似的分享系统,定制自己的分享图标,并不是很困难,困难的是,很难做到像上面说的这三种分享系统那样丰富,而且长期的维护也是个问题。

问题的最关键是它们的图标不好看,系统功能本身没有问题,我们如果有方法能够修改一下它们的图标,问题其实就解决了。

根据我简单的观察,这三种系统里并没有提供自定义图标的接口。要想修改它们的图标,那只能自己在安装的过程中做一些手脚了。

事实上,在写这篇文章的时候,我已经试验成功了,取得了很好的效果,你可以到 https://wkee.net 这个网站上观看实际效果,下面是效果截图:

wkee

你可能认不出来,我使用的是JiaThis分享系统,但从图标上完全看不出来。是不是漂亮多了。我把它修改成了圆形,你还可以修改成任何你喜欢的图标样式。下面讲讲我是如何做的。

首先,JiaThis里的这段CSS是关键:

.jiathis_style_32x32 .jtico {
    text-align: left;
    overflow: hidden;
    display: block!important;
    height: 32px!important;
    line-height: 32px!important;
    padding-left: 36px!important;
    background: url(../images/jiathis_ico_32x32.png) no-repeat left;
    cursor: pointer;
}

这段JiaThis里的CSS代码说明的它使用背景图来显示图标,我们可以把这个背景图下载下来(下载地址),修改一下。修改成我们想要的样式,然后放到自己的服务器上(修改后的背景图)。

接下来,我们在自己的要引用JiaThis的js脚本的页面上从新定义JiaThis背景图的CSS声明,重要的是,声明的CSS类名的优先级要高于JiaThis里的优先级,这样才能覆盖掉它CSS样式声明。我是这样写的:

body .jiathis_style_32x32 .jtico {
    background: url(https://www.webhek.com/jiathis_ico_32x32.png) no-repeat left;
}

在调试过程中,我本想,这已经足够了,我并没有改动背景图图标的大小和位置,只是修改了图案样式,这样应该就可以了,但实际上,我发现还有需要在自己的页面上添加每个图标的CSS位置信息,我使用的是下面几个:

body .jiathis_style_32x32 .jtico_qzone {
    background-position: 0px -32px;
}

body .jiathis_style_32x32 .jtico_tsina {
    background-position: 0px 0px;
}

body .jiathis_style_32x32 .jtico_weixin {
    background-position: 0px -3680px;
}

body .jiathis_style_32x32 .jtico_cqq {
    background-position: 0px -4032px;
}

body .jiathis_style_32x32 .jtico_fb {
    background-position: 0px -960px;
}

body .jiathis_style_32x32 .jtico_twitter {
    background-position: 0px -1024px;
}

只是重新声明了一下,并添加了更高的优先级,没有做其它的改动。为什么需要这样,我目前还没有想明白。如果哪位读者知道其中的原理,还请留言告知,谢谢。

总结一下,第一是修改图标文件,只修改样式,不能修改大小。然后把图片放到自己的服务器上,最后,重新声明图标背景的CSS样式。

如果按照正规的软件开发思想,这些修改是不安全的,因为,如果JiaThis系统升级更新,变更了CSS的内容,那这种修改就会失效。但在自己的一些个人系统里,这并不是大问题,即使失效了,我们发现后,在修改一下就行了,并不会引起其它方法的问题。bShare系统和百度分享也可以用同样的方法修改。

欢迎提出你的想法,谢谢!

阅读余下内容
 

《 “解决jiathis/bshare/百度分享等网页分享工具图标丑陋难看的方法” 》 有 2 条评论

  1. Hi,
    我对程序不是很懂。
    wordpress上面的关于中文网站的分享插件很少。
    图标确实很丑,不知道,这个问题在wordpress上面怎么解决?

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号