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

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

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

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

安装前的准备工作

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

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

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

安装

如何在网站安装国内社交分享代码CNRRSSB
WordPressLeaf.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=http://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮:在wordpress主题中使用RRSSB开源代码&amp;pic=http://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=http://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=http://static.estory365.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=http://www.wordpressleaf.com/2016/05/30/37.html&amp;appkey=801497376&amp;site=&amp;pic=http://static.estory365.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=http://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=http://static.estory365.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=http://www.wordpressleaf.com/2016/05/30/37.html&amp;srcUrl=http://www.wordpressleaf.com/2016/05/30/37.html&amp;title=社交按钮:在wordpress主题中使用RRSSB开源代码&amp;description=RRSSB的全称为Ridiculously Responsive Social Sharing Buttons,它是一套...&amp;pic=http://static.estory365.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=http://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在生成。

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

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

2 条评论

  1. 2016-07-10 在 21:46
    回复

    怎么说呢 我觉得基本能够看得懂代码或者懂互联网的话 基本一个二维码就可以解决了 这个就是为什么我仅仅只有一个二维码分享

    • 2016-07-11 在 00:16
      回复

      确实,有道理,有时候那些按钮就是个装饰。简单就是好的。

留下一条回复

关闭