DIY 制作一键分享按钮

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

    单纯的分享按钮做起来不复杂,社交网站大都有开放的接口,比如上面这几个分享按钮就是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就不一一列举了,方法都一样~


    muyunfengliu

    「悟已往之不諫 知來者猶可追」

    You may also like...

    Leave a Reply

    Your email address will not be published. Required fields are marked *