在文章底部添加QQ空间分享及修正微信二维码生成方式

15日写过一篇给文章底部添加了微信二维码和weibo分享，最终因为js冲突导致需刷新一次页面才能点击生成二维码，这次修正了二维码的生成方式和显示方式，采用js+css方式让鼠标悬停显示二维码，添加QQ空间分享。

icon

由于在icomoon上找不到合适的QQ空间分享icon，特更换为阿里巴巴矢量图标库的icon，开始不清楚icon如何在 a 标签内定义class调用，后来了解到具体使用方法才成功更换图标库。阿里巴巴矢量图标库的icon使用说明这里我就不详细说了，有需要的朋友们请自行搜索，这里只写如何在css中重新定义选择器，代码如下。

//用以下代码将原本的css定义替换掉
[class*="icon-"],[class^="icon-"]{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:
antialiased;
-webkit-text-stroke-width:0.2px;
-moz-osx-font-smoothing:grayscale;}

QQ空间分享代码

<a href="javascript:void(0);" onclick="window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(document.location.href));return false;" class="icon-qz" title="分享到QQ空间"></a>

weibo分享代码

<a href="javascript:void((function(s,d,e){try{}catch(e){}var f='http://v.t.sina.com.cn/share/share.php?',u=d.location.href,p=['url=',e(u),'&amp;title=',e(d.title),'&amp;appkey='].join('');function a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=620,height=450,left=',(s.width-620)/2,',top=',(s.height-450)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})(screen,document,encodeURIComponent));" class="icon-weibo" rel="nofollow" title="分享到新浪微博"></a>

二维码生成代码

<img src="http://qr.topscan.com/api.php?el=l&w=100&m=0&text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/">

js+css实现图标悬停显示二维码

function showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}

<div id="weixin">
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()" rel="nofollow" title="分享到朋友圈">
</a>
</div>
<div id="wxImg" style="display:none; right: 0px; top: -110px;back-ground:#f00;position:absolute; z-index:999;"><img src="http://qr.topscan.com/api.php?el=l&w=100&m=0&text=<?php the_permalink(); ?>" alt="<?php the_title(); ?>"/">
</div>

好了，写完睡觉，不懂代码只能拿时间来填，忙活了半个晚上了。困死了～/哈欠
参考代码来源：格.部落格卡拉科技