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>

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

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

  1. Coney说道:

    效果不错,简洁。。。

  2. 归臧说道:

    不错~学习了

    1. 言小五说道:

      @归臧 谢谢捧场~

  3. 不点儿说道:

    不错,支持一个

    1. 言小五说道:

      @不点儿 哈哈哈~谢谢捧场,说不定哪天就腻了的

  4. nyun说道:

    一直对于分享这种功能不感冒,主题自带的话我都是先把这玩意干掉的…独立博客的交流还是喜欢只限定在友链、邮件。

    1. 言小五说道:

      @nyun 哈哈哈哈~就是觉得好玩弄的

  5. 自定义说道:

    你这个代码显示是咋搞的呀,上次下载你说的插件下来没用。

    1. 言小五说道:

      @自定义 在文章编辑界面,要pre包裹代码的

      1. 自定义说道:

        @言小五 是的呀,标签用和code,没效果。。

        1. 言小五说道:

          @自定义 在Wordpress 大学,有具体使用方法的,搜索插件名字就有的。你看看?要是再不行,我回家了在电脑上看看。

  6. 灰狼说道:

    这种会导入一个字体库,前天本来想换掉博客图标的,想着加载个字体库也不会很小,就放弃了

    1. 言小五说道:

      @灰狼 额,我是在线引用的,都没想过这玩意多大。

发表评论

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