JS实现：HTML页面一键分享到微博、QQ空间、QQ好友

发布时间：2024年01月24日

一、效果展示

在这里插入图片描述

二、代码实现：

1.微博分享

<a title="分享到新浪微博" id="wb" class="bshare-sinaminiblog"></a>

 <script>
 	//分享到微博
    var currUrl = window.location.href   // 实际的分享链接  
    $('#wb').click(function(){
        window.open('http://service.weibo.com/share/share.php?url=' + currUrl + '&title=' + '{$data['title']}' + '&pics=' + '{$data['image']}');
     })
  </script>

2.QQ好友分享

<a title="分享到QQ好友" id="hy" class="bshare-qqim"  onclick="qq();"></a>
<script>
 		//qq好友
        function qq(title,url,pic)
          {
             var p = {
                url: window.location.href,/*获取URL，可加上来自分享到QQ标识，方便统计*/
                desc: '', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                title : '{$data['title']}',/*分享标题(可选)*/
                summary : '',/*分享描述(可选)*/
                pics : '{$data['image']}',/*分享图片(可选)*/
                flash : '', /*视频地址(可选)*/
                //commonClient : true, /*客户端嵌入标志*/
                 site: 'QQ分享'/*分享来源 (可选) ，如：QQ分享*/
            };
            var s = [];
            for (var i in p) {
               s.push(i + '=' + encodeURIComponent(p[i] || ''));
             }
              var target_url = "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&') ;
              window.open(target_url, 'qq','height=520, width=720');
          }
 </script>

3.QQ空间分享

<!DOCTYPE HTML>
<html>
 <head>
   <title>QQ空间分享</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
     <input type="button" onclick="shareQQzone();" value="分享"></input>
 </body>
 <script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>
 <script>
     //QQ空间分享方法:这样写可以对分享事件进行绑定
     function shareQQzone(){
         var _url = 'www.wodexiangce.cn';
         var _showcount = '0'
          var _desc = '我正在我的相册网冲洗照片';
         var _summary = '大家都来看看吧';
         var _title = '真不错';
         var _site = '我的相册网';
         var _pic = '';
         var _width= '800px';
         var _height= '500px';         
         var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
         _shareUrl += 'url=' + encodeURIComponent(_url||document.location);   //参数url设置分享的内容链接|默认当前页location
         _shareUrl += '&showcount=' + _showcount||0;      //参数showcount是否显示分享总数,显示：'1'，不显示：'0'，默认不显示
         _shareUrl += '&desc=' + encodeURIComponent(_desc||'分享的描述');    //参数desc设置分享的描述，可选参数
         _shareUrl += '&summary=' + encodeURIComponent(_summary||'分享摘要');    //参数summary设置分享摘要，可选参数
         _shareUrl += '&title=' + encodeURIComponent(_title||document.title);    //参数title设置分享标题，可选参数
         _shareUrl += '&site=' + encodeURIComponent(_site||'');   //参数site设置分享来源，可选参数
         _shareUrl += '&pics=' + encodeURIComponent(_pic||'');   //参数pics设置分享图片的路径，多张图片以＂|＂隔开，可选参数
         window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',top='+(screen.height-_height)/2+',left='+(screen.width-_width)/2+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
     }
 </script>
</html>

全部代码：

       <div class="focus_details_title">{$data['title']}</div>
        
       <div class="bshare-custom">
            <span>分享:</span>
            <!-- <a title="分享到微信" id="wx" class="bshare-weixin"  οnclick="weixin();"></a> -->
			<a title="分享到新浪微博" id="wb" class="bshare-sinaminiblog"></a>
			<a title="分享到QQ空间" id="kj" class="bshare-qzone" onclick="shareQQzone();"></a>
			<a title="分享到QQ好友" id="hy" class="bshare-qqim"  onclick="qq();"></a>
       </div>
       <script src="http://qzonestyle.gtimg.cn/qzone/app/qzlike/qzopensl.js#jsdate=20111201" charset="utf-8"></script>
       <script>
                     //QQ空间分享方法:这样写可以对分享事件进行绑定
                     function shareQQzone(){
                         var _url = window.location.href;
                         var _showcount = '0'
                        var _desc = '';
                         var _summary = '';
                         var _title = '{$data['title']}';
                         var _site = '';
                         var _pic ='{$data['image']}';
                         var _width= '800px';
                         var _height= '500px';
                         
                         var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
                         _shareUrl += 'url=' + encodeURIComponent(_url||document.location);   //参数url设置分享的内容链接|默认当前页location
                         _shareUrl += '&showcount=' + _showcount||0;      //参数showcount是否显示分享总数,显示：'1'，不显示：'0'，默认不显示
                         _shareUrl += '&desc=' + encodeURIComponent(_desc||'分享的描述');    //参数desc设置分享的描述，可选参数
                         _shareUrl += '&summary=' + encodeURIComponent(_summary||'分享摘要');    //参数summary设置分享摘要，可选参数
                         _shareUrl += '&title=' + encodeURIComponent(_title||document.title);    //参数title设置分享标题，可选参数
                        _shareUrl += '&site=' + encodeURIComponent(_site||'');   //参数site设置分享来源，可选参数
                         _shareUrl += '&pics=' + encodeURIComponent(_pic||'');   //参数pics设置分享图片的路径，多张图片以＂|＂隔开，可选参数
                         window.open(_shareUrl,'_blank','width='+_width+',height='+_height+',top='+(screen.height-_height)/2+',left='+(screen.width-_width)/2+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
                     }

                     //qq好友
                     function qq(title,url,pic)
                        {
                            var p = {
                                url: window.location.href,/*获取URL，可加上来自分享到QQ标识，方便统计*/
                                desc: '', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
                                title : '{$data['title']}',/*分享标题(可选)*/
                                summary : '',/*分享描述(可选)*/
                                pics : '{$data['image']}',/*分享图片(可选)*/
                                flash : '', /*视频地址(可选)*/
                                //commonClient : true, /*客户端嵌入标志*/
                                site: 'QQ分享'/*分享来源 (可选) ，如：QQ分享*/
                            };


                            var s = [];
                            for (var i in p) {
                                s.push(i + '=' + encodeURIComponent(p[i] || ''));
                            }
                            var target_url = "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&') ;
                            window.open(target_url, 'qq',
                                    'height=520, width=720');
                        }

	                    //分享到微博
	                    var currUrl = window.location.href   // 实际的分享链接  
	                    $('#wb').click(function(){
	                        window.open('http://service.weibo.com/share/share.php?url=' + currUrl + '&title=' + '{$data['title']}' + '&pics=' + '{$data['image']}');
	                    })
                 </script>

完成~

文章来源:https://blog.csdn.net/weixin_48596030/article/details/135816215
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章