分享按钮

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

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

下面直接上图:

20160429165644

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

一、html部分

<div class="share_1" style="width:20%;margin:200px auto;">
      <ul class="social-share">
	<li><a href="http://v.t.sina.com.cn/share/share.php?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&appkey=1935557189" target="_blank" rel="nofollow" class="social-share-icon icon-weibo" title="新浪微博"></a></li>
	<li><a href="" class="social-share-icon icon-wechat" title="微信朋友圈">
	  <div class="wechat-qrcode"><h4>微信扫一扫:分享</h4>
          <div class="qrcode" title="<?php the_permalink(); ?>"><img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/></div>
	  <div class="help"><p>微信里点“发现”,扫一下</p><p>二维码便可将本文分享至朋友圈。</p></div></div></a></li>
	<li><a href="http://connect.qq.com/widget/shareqq/index.html?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" class="social-share-icon icon-qq" title="QQ好友"></a></li>
	<li><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" rel="nofollow" class="social-share-icon icon-qzone" title="QQ空间"></a></li>
	<li><a href="http://v.t.qq.com/share/share.php?title=<?php the_title(); ?>&url=<?php the_permalink(); ?>&site=<?php bloginfo('url');?>" target="_blank" rel="nofollow" class="social-share-icon icon-tencent" title="腾讯微博"></a></li>
	<li><a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank" rel="nofollow" class="social-share-icon icon-twitter" title="Twitter"></a></li>
	<li><a href="http://facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="_blank" rel="nofollow" class="social-share-icon icon-facebook" title="facebook"></a></li>
	</ul>
</div>

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

<img src="http://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

国内的也有一个:

<img src="http://qr.liantu.com/api.php?w=200text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/>

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

二、CSS

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

三、字体

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

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

标签: ,   |  
时间: 2016年04月29日下午17:09  |  
作者:
2 COMMENTS
  1. 2017/03/31
    晨风

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

  2. 2017/06/14
    慧珍网

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

LEAVE A REPLY
loading
正在赶回来……