如何在网站安装国内社交分享代码CNRRSSB

导语：CNRRSSB是我根据国外的社交分享按钮RRSSB改写后符合国内使用习惯的社交分享代码，如果大家喜欢可以在本网站免费下载使用。这篇文章主要介绍一下CNRRSSB的安装，理论上来讲是可以按照在任何网站的。

安装前的准备工作

1、下载CNRRSSB包。在本站下载。

2、下载FontAwesome字体图标。你可以去它的官网下载：fontawesome.io。

3、下载jQuery.js。你可以去它的官网下载：jquery.com

安装

1、在网页head头部加载FontAwesome的css文件。

2、在网页head头部加载jquery.js。

3、在网页head头部或页面底部加载cnrrssb.js。一般来说我们放在底部有利于加快网页的加载打开速度，建议放在底部。

4、将cnrrssb.css文件复制放入你的CSS文件中，或者单独在head头部加载。

5、在需要放置分享按钮的地方复制HTML代码，安装自己的需要来删减：

<ul class="cnrrssb-buttons cnrrssb-1">
 <li class="cnrrssb-weibo" data-initwidth="12.5" data-size="49" style="width: calc(20% - 25.2px);">
 <a target="_blank" rel="nofollow" href="http://v.t.sina.com.cn/share/share.php?appkey=3036462609&amp;url=https://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;pic=https://www.wordpressleaf.com/wp-content/uploads/2016/05/wordpress-life_rrssb_facebook_20160608-700x350.jpg&amp;searchPic=true" class="popup">
 <span class="cnrrssb-icon">
 <i class="fa fa-weibo"></i>
 </span>
 <span class="cnrrssb-text">新浪微博</span>
 </a>
 </li>
 <li class="cnrrssb-qqstar" data-initwidth="12.5" data-size="44" style="width: calc(20% - 25.2px);">
 <a target="_blank" rel="nofollow" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;desc=&amp;summary=RRSSB的全称为Ridiculously Responsive Social Sharing Buttons，它是一套...&amp;site=&amp;pics=https://www.wordpressleaf.com/wp-content/uploads/2016/05/wordpress-life_rrssb_facebook_20160608-700x350.jpg" class="popup">
 <span class="cnrrssb-icon">
 <i class="fa fa-star"></i>
 </span>
 <span class="cnrrssb-text">QQ空间</span>
 </a>
 </li>
 <li class="cnrrssb-ttweibo" data-initwidth="12.5" data-size="49" style="width: calc(20% - 25.2px);">
 <a target="_blank" rel="nofollow" href="http://share.v.t.qq.com/index.php?c=share&amp;a=index&amp;title=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;url=https://www.wordpressleaf.com/2016/05/30/37.html&amp;appkey=801497376&amp;site=&amp;pic=https://www.wordpressleaf.com/wp-content/uploads/2016/05/wordpress-life_rrssb_facebook_20160608-700x350.jpg" class="popup">
 <span class="cnrrssb-icon">
 <i class="fa fa-tencent-weibo"></i>
 </span>
 <span class="cnrrssb-text">腾讯微博</span>
 </a></li>
 <li class="cnrrssb-qq" data-initwidth="12.5" data-size="44" style="width: calc(20% - 25.2px);">
 <a target="_blank" rel="nofollow" href="http://connect.qq.com/widget/shareqq/index.html?url=https://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;desc=&amp;summary=RRSSB的全称为Ridiculously Responsive Social Sharing Buttons，它是一套...&amp;site=baidu&amp;pics=https://www.wordpressleaf.com/wp-content/uploads/2016/05/wordpress-life_rrssb_facebook_20160608-700x350.jpg">
 <span class="cnrrssb-icon">
 <i class="fa fa-qq"></i>
 </span>
 <span class="cnrrssb-text">QQ好友</span>
 </a>
 </li>
 <li class="cnrrssb-weixin" data-initwidth="12.5" data-size="25" style="width: calc(20% - 25.2px);">
 <a target="_blank" rel="nofollow" class="jiathis_button_weixin" href="javascript:void(0);" onclick="js_method()" title="分享到微信"><span class="jiathis_txt jiathis_separator jtico jtico_weixin"><span class="cnrrssb-icon">
 <i class="fa fa-weixin"></i>
 </span>
 <span class="cnrrssb-text">微信</span></span></a>
 </li>
 <li class="cnrrssb-renren small" data-initwidth="12.5" data-size="37" style="width: 42px;">
 <a target="_blank" rel="nofollow" href="http://widget.renren.com/dialog/share?resourceUrl=https://www.wordpressleaf.com/2016/05/30/37.html&amp;srcUrl=https://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;description=RRSSB的全称为Ridiculously Responsive Social Sharing Buttons，它是一套...&amp;pic=https://www.wordpressleaf.com/wp-content/uploads/2016/05/wordpress-life_rrssb_facebook_20160608-700x350.jpg" class="popup">
 <span class="cnrrssb-icon">
 <i class="fa fa-renren"></i>
 </span>
 <span class="cnrrssb-text">人人网</span>
 </a>
 </li>
 <li class="cnrrssb-reddit small" data-initwidth="12.5" data-size="25" style="width: 42px;">
 <a target="_blank" rel="nofollow" class="jiathis" href="javascript:void(0);" onclick="js_method()" title="更多">
 <span class="cnrrssb-icon">
 <i class="fa fa-share-alt"></i>
 </span>
 <span class="cnrrssb-text">更多</span>
 </a>
 </li>
 <li class="cnrrssb-email small" data-initwidth="12.5" data-size="32" style="width: 42px;">
 <a target="_blank" rel="nofollow" href="mailto:?subject=社交按钮：在wordpress主题中使用RRSSB开源代码&amp;body=https://www.wordpressleaf.com/2016/05/30/37.html">
 <span class="cnrrssb-icon">
 <i class="fa fa-envelope"></i>
 </span>
 <span class="cnrrssb-text">Email</span>
 </a>
 </li>
 </ul>

另外请在这段HTML代码的后面加上：

 <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>

原因是分享到微信必须是二维码，我用了jiathis在生成。

安装完的效果，可参考这篇文章内容底部的分享按钮。