给网页增加分享功能

Posted 2020-09-25 catherinehd

  想给自己的网站的文章增加分享按钮，查询资料后发现，均使用了目标网站提供的分享接口，比如新浪微博更可以直接使用其提供的分享按钮，按其规则添加js和页面代码就能实现新浪风格的分享按钮。因为想同时添加各大主流平台的分享按钮，所以自己添加了js代码来完成。

  首先在需要分享页面中添加按钮，比如我需要QQ，豆瓣，微博这三个分享，我用了li分别列出来。

<ul>

  <li class="share" shareto="qq">QQ</li>

  <li class="share" shareto="qq">微博</li>

  <li class="share" shareto="qq">豆瓣</li>

</ul>

js文件里面写分享的功能，为了便于复用，将分享功能封装写成一个类，方便调用。

（function(window,document）{

    var share = function(ele,options,callback){

        var that=this,

             array = typeof ele === "string" ? document.querySelectorAll(ele) :ele ,

             img = document.getElementsByTagName(‘img‘)[0];//获取文档的第一张图。

        that.options = {

               shareTitle:document.title,

               shareUrl:window.location.hred,

               shareCon:‘‘,

                shareImage:img?img.attribution.src.value:‘‘,

                sina: {

                     ralateUid:""       //需要分享到的人的新浪数字账号

                  }

              }；

          for(i in options) {

                 that.options[i] = options[i];

             };

          if (array.length === 0) callback(‘没有获取到元素‘)；

          for (var i=0,l=array.length;i<l;i++){

                 array[i].addEventListener(‘click‘,function(){

                        var shareTo = this.attributes.shareto;

                        if(!sharetTo){

                             callback(‘没有设置shareto‘)

                         }else {

                               share(shareto.value)

                            };

            },false);

};

var shaer = function(type){

     var surl;

     var options = that.options;

     switch(type){

        

case ‘qq‘:
       surl = "http://connect.qq.com/widget/shareqq/index.html?url=" + options.shareUrl + "&title=" + options.shareTitle + "&desc=" + options.shareCon + "&pics=" + options.shareIamge;
        break;
  case ‘sina‘:
       surl = "http://v.t.sina.com.cn/share/share.php?url=" + options.shareUrl + "&title=" + options.shareTitle + "&searchPic=true&pic=" + options.shareIamge + "&ralateUid=" + options.sina.ralateUid;
       break;
  case "douban":
         surl = "https://www.douban.com/share/service?href=" + options.shareUrl + "&name=" + options.shareTitle + "&image=" + options.shareIamge + "&text=" + options.shareCon;
       break;
       default:
       callback("shareto设置错误");
       return false;

    };

 window.open(surl,‘‘);

  };

 };

window.share=share;

})(window,docuement);

下面是具体调用上面的方法：

var myshare = new share(‘.share‘,{

   shareTitle:"",

   shareUrl:"",

   shareCon:"",

   sina:{

     ralateUid:""

   },function(data){console.log(data)}

};

可以按照自己需要设置，也可以使用默认。

这个方法主要参考自 前端网的panio123发布的js小组件练习，觉得写法简单易懂，很利于学习，这里进行分享。

关于更多的网页分享接口：

微信可以采用在线二维码生成器。

百度贴吧：surl="http://tieba.baidu.com/f/commit/share/openShareApi?title"+options.shareTit+"&url"+options.shareUrl+"&pic"+options.shareImage;

 

开心网：surl="http://www.kaixin001.com/repaste/share.php?

rtitle"+options.shareTit;

或则：surl="http://www.kaixin001.com/rest/records.php?

url"+options.shareUrl+"&content"+options.shareCon+"&pic"+options.shareImage+"&showcount=0&style=11";

 

facebook:surl="http://www.facebook.com/sharer/sharer.php

?u"+options.shareUrl+"&t"+options.shareTit;