DIY 制作一键分享按钮

单纯的分享按钮做起来不复杂，社交网站大都有开放的接口，比如上面这几个分享按钮就是HTML + Font Awesome实现的，你也可以用图片代替Font Awesome，嵌入到其它地方或者做成挂件之类的（记得加上nofollow和_blank）。

Facebook ref

https://www.facebook.com/sharer/sharer.php?&u=<?php the_permalink(); ?>

u=后面是当前页的固定链接，wordpress可以通过<?php the_permalink(); ?>获得。

Twitter ref

https://twitter.com/intent/tweet?text=<?php the_title(); ?> - <?php bloginfo(); ?>&url=<?php the_permalink(); ?>

text=后面是分享的文字，不一定用这样 网站标题 – Blog 的形式；
url=后面是固定链接。

Google+ ref

https://plus.google.com/share?url=<?php the_permalink(); ?>

url=后面跟固定链接。

新浪微博 ref

http://service.weibo.com/share/share.php?url=<?php the_permalink(); ?>&title=<?php the_title(); ?> - <?php bloginfo(); ?>&pic=<?php the_post_thumbnail_url(); ?>&searchPic=false&ralateUid=1779816120

url=后面跟固定链接；
title=和twitter的text=一样；
pic=可以指定一张图片的链接，可选；
searchPic=默认是true自动抓图，可选；
ralateUid=添加微博账号的UID后分享时会添加@信息（UID可以在关注页/粉丝页的地址栏找），可选。

微信

接下来是比较麻烦的微信，由于朋友圈相对封闭，没有开放的网页接口，只能通过扫二维码的方式在微信中打开再右上角手动分享。我用的是jquery.qrcode.js，一个浏览器生成二维码的jQuery脚本，minify后只有13.6KB，生成的二维码支持canvas和表格两种渲染方式，没有额外的开销或http请求。
jquery.qrcode.js的使用方法见脚本主页或自行Google，下面是我的代码供参考。

HTML:

<a title="微信" class="qr-botton"><i class="fa fa-weixin fa-lg"></i></a>
<span id="qrcode"></span><!--用来放生成的QR码-->

JavaScript(in PHP):

jQuery(function($) {
  var qr = $('#qrcode');
  $('a.qr-botton').click(function(){
    qr.qrcode({width:128,height:128,text:"<?php the_permalink(); ?>"}).css("display","inline");//可以指定高度和宽度，根据固定链接生成二维码，默认渲染方式是canvas
    $('#footer').append("<div id='overflowDiv'></div>");//建一个透明遮罩防止同时生成多个二维码
  });
  $(this).on('click','#overflowDiv', function(){
    $(this).remove();
    qr.css("display","none").empty();
  });
});

JavaScript(in external JS):

jQuery(function($) {
  var qr = $('#qrcode'),
      canonical = $('link[rel=canonical]').attr("href");//用head里的canonical链接替换<?php the_permalink(); ?>
  $('a.qr-botton').click(function(){
    qr.qrcode({width:128,height:128,text:canonical}).css("display","inline");//可以指定高度和宽度，根据固定链接生成二维码，默认渲染方式是canvas
    $('#footer').append("<div id='overflowDiv'></div>");//建一个透明遮罩防止同时生成多个二维码
  });
  $(this).on('click','#overflowDiv', function(){
    $(this).remove();
    qr.css("display","none").empty();
  });
});

CSS:

#overflowDiv {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;/*在.qr-botton上面就行*/
}

还有很多SNS就不一一列举了，方法都一样~