微信qq空间微博等分享代码css样式及js写法

直接给你看分享代码，把文字「微、Q、空、豆」全部换成对应平台的小图标 / 图片，你复制粘贴就能用，不用再改任何东西。[字母分别代表微博、qq、qq空间、豆瓣、微信】
该分享代码用的是通用社交图标（安全、无外链、不依赖第三方），风格统一、大小合适、鼠标悬浮有效果。

<div class="share">     <div class="social-share">       分享到：       <a onclick="shareWeibo()" class="social-share-icon icon-weibo">微</a>       <a onclick="shareQQ()" class="social-share-icon icon-qq">Q</a>       <a onclick="shareQzone()" class="social-share-icon icon-qzone">空</a>       <a onclick="shareDouban()" class="social-share-icon icon-douban">豆</a>       <a onclick="showWechat()" class="social-share-icon icon-wechat">微</a>     </div>     <div class="wechat-qrcode" id="wechatQrcode">       <h4>微信扫一扫：分享</h4>       <div id="qrcode_box" class="qrcode"></div>       <div class="help">         <p>微信里点“发现”，扫一下</p>         <p>二维码便可将本文分享至朋友圈。</p>       </div>     </div>   </div>   <div style="clear:both;"></div> <!-- 必加，否则被挤没 -->

 修改为带小图标的：

<div class="share"> <div class="social-share"> 分享到： <a onclick="shareWeibo()" class="social-share-icon icon-weibo"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzY2YjZGNiI+PHBhdGggZD0iTTEyIDJBNTAgNTAgMCAwIDEgMjIgMTJBNTAgNTAgMCAwIDEgMTIgMjJBNTAgNTAgMCAwIDEgMiAxMkE1MCA1MCAwIDAgMSAxMiAyWiIgLz48cGF0aCBkPSJNOC41IDkuNWMuNS0xLjUgMi0yLjUgMy41LTIuNXMyLjUuNSAzLjUgMi41YzAgMS41LTEgMy0zLjUgM2MtMi41IDAtMy41LTEuNS0zLjUtM3oiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEyIDE3YzIgMCAzLjUtMSAzLjUtMS41YzAtLjUtMi0xLjUtMy41LTEuNXMtMy41IDEtMy41IDEuNWMwIC41IDEuNSAxIDMuNSAxeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="> </a> <a onclick="shareQQ()" class="social-share-icon icon-qq"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzEyQjFGNCI+PHBhdGggZD0iTTEyIDJBNTAgNTAgMCAwIDEgMjIgMTJBNTAgNTAgMCAwIDEgMTIgMjJBNTAgNTAgMCAwIDEgMiAxMkE1MCA1MCAwIDAgMSAxMiAyWiIgLz48cGF0aCBkPSJNOC41IDkuNWMuNS0xLjUgMi0yLjUgMy41LTIuNXMyLjUuNSAzLjUgMi41YzAgMS41LTEgMy0zLjUgM2MtMi41IDAtMy41LTEuNS0zLjUtM3oiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEyIDE3YzIgMCAzLjUtMSAzLjUtMS41YzAtLjUtMi0xLjUtMy41LTEuNXMtMy41IDEtMy41IDEuNWMwIC41IDEuNSAxIDMuNSAxeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="> </a> <a onclick="shareQzone()" class="social-share-icon icon-qzone"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzlDMkU1RSI+PHBhdGggZD0iTTEyIDJBNTAgNTAgMCAwIDEgMjIgMTJBNTAgNTAgMCAwIDEgMTIgMjJBNTAgNTAgMCAwIDEgMiAxMkE1MCA1MCAwIDAgMSAxMiAyWiIgLz48cGF0aCBkPSJNOC41IDkuNWMuNS0xLjUgMi0yLjUgMy41LTIuNXMyLjUuNSAzLjUgMi41YzAgMS41LTEgMy0zLjUgM2MtMi41IDAtMy41LTEuNS0zLjUtM3oiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEyIDE3YzIgMCAzLjUtMSAzLjUtMS41YzAtLjUtMi0xLjUtMy41LTEuNXMtMy41IDEtMy41IDEuNWMwIC41IDEuNSAxIDMuNSAxeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="> </a> <a onclick="shareDouban()" class="social-share-icon icon-douban"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzQyQzgxRiI+PHBhdGggZD0iTTEyIDJBNTAgNTAgMCAwIDEgMjIgMTJBNTAgNTAgMCAwIDEgMTIgMjJBNTAgNTAgMCAwIDEgMiAxMkE1MCA1MCAwIDAgMSAxMiAyWiIgLz48cGF0aCBkPSJNOC41IDkuNWMuNS0xLjUgMi0yLjUgMy41LTIuNXMyLjUuNSAzLjUgMi41YzAgMS41LTEgMy0zLjUgM2MtMi41IDAtMy41LTEuNS0zLjUtM3oiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEyIDE3YzIgMCAzLjUtMSAzLjUtMS41YzAtLjUtMi0xLjUtMy41LTEuNXMtMy41IDEtMy41IDEuNWMwIC41IDEuNSAxIDMuNSAxeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="> </a> <a onclick="showWechat()" class="social-share-icon icon-wechat"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzE3OEY1NyI+PHBhdGggZD0iTTEyIDJBNTAgNTAgMCAwIDEgMjIgMTJBNTAgNTAgMCAwIDEgMTIgMjJBNTAgNTAgMCAwIDEgMiAxMkE1MCA1MCAwIDAgMSAxMiAyWiIgLz48cGF0aCBkPSJNOC41IDkuNWMuNS0xLjUgMi0yLjUgMy41LTIuNXMyLjUuNSAzLjUgMi41YzAgMS41LTEgMy0zLjUgM2MtMi41IDAtMy41LTEuNS0zLjUtM3oiIGZpbGw9IndoaXRlIi8+PHBhdGggZD0iTTEyIDE3YzIgMCAzLjUtMSAzLjUtMS41YzAtLjUtMi0xLjUtMy41LTEuNXMtMy41IDEtMy41IDEuNWMwIC41IDEuNSAxIDMuNSAxeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4="> </a> </div> <div class="wechat-qrcode" id="wechatQrcode"> <h4>微信扫一扫：分享</h4> <div id="qrcode_box" class="qrcode"></div> <div class="help"> <p>微信里点“发现”，扫一下</p> <p>二维码便可将本文分享至朋友圈。</p> </div> </div> </div> <div style="clear:both;"></div>

  再看Js部分：

// ====================== // 分享地址配置 // ====================== const shareUrl = '比如[!--titleurl--]'; const shareTitle = document.title; // 显示微信二维码 function showWechat() { var box = document.getElementById('wechatQrcode'); var qrcodeBox = document.getElementById('qrcode_box'); qrcodeBox.innerHTML = '<img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data='+encodeURIComponent(shareUrl)+'" style="width:100px;height:100px;">'; box.style.display = box.style.display === 'block' ? 'none' : 'block'; } // 分享功能 function shareWeibo() { window.open(`https://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareTitle)}`); } function shareQQ() { window.open(`https://connect.qq.com/widget/shareqq?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareTitle)}`); } function shareQzone() { window.open(`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareTitle)}`); } function shareDouban() { window.open(`https://www.zhhihu.com/share/submit?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareTitle)}`); }