分享按钮

之前我的网站上的分享按钮一直用的一个开源的组件,但是发现放到我的网站加载会出现一个小错误,强迫症的我实在无法忍受了,于是花了一些时间把代码缩减分离出来,只写我人为需要的,然后分享给大家。

目前网上的分享按钮,开源的很少,一般都是用百度分享、B-share或者JiaThis,这些开源组件用起来可玩性不高,而且它还加广告!它还加广告!它还加广告!重要的事情说3遍,不管是不是想推广自己,身为患有强迫癌的程序员,眼里容不得沙子!

下面直接上图:

20160429165644

我觉得这个样式很好看,当然也可以自己DIY。下面教大家怎么做,不难,就是一段html加一个css,外加一个字体。

一、html部分

除了微信其他都是个链接而已,没有要收的。微信分享用了国外的一个二维码API,它可以生成给定链接的二维码,用微信扫一下之后会出现在微信内置浏览器上,这时候就用到了微信内置浏览器中自带的微信分享功能(浏览器右上角有三个点,点击后就会出现分享的选项)。下面是用到的国外的API:

国内的也有一个:

这个功能还不完善,我后期会修改一下,因为在手机上用这个很不方便(在我手机上显示的二维码我拿什么扫?)。至于点击微信按钮弹出二维码,就是个简单的css,用了hover而已,我看网上大多数用了js,其实没多大必要。

二、CSS

这个内容有点多,我就不贴了,下面把我的git地址贴上,里面可以下载。

三、字体

这个分享图标比如qq、微博的图案是放在一个字体文件里面的(就是@font-face),在css引用就可以了,这样提高加载速度并且节省资源。

资源下载:https://git.oschina.net/wdy_/share-button.git

2 COMMENTS
  1. 2017/03/31
    晨风

    网站做的很精致 值得学习。

  2. 2017/06/14
    慧珍网

    网站做的很用心,从小细节可以看出,站长是个很讲究审美很高的人。学习了!

LEAVE A REPLY
loading
正在赶回来……