社交按钮：在WordPress主题中使用RRSSB开源代码

导语：RRSSB的全称为Ridiculously Responsive Social Sharing Buttons，它是一套文章社交网络分享按钮的开源代码，包括国外主流的twitter、googleplus、reddit、youtube、pinterest等社交媒体网站，使用它，你可以很方便在自己的网站创建分享按钮，方便浏览者将文章分享到各个社交网站。

RRSSB由JS、CSS、HTML代码组成，你可以根据你的需要来随意删减，它使用SVG图标。

SVG图标是矢量图标，可以随意放大缩小而不变形。

RRSSB的演示地址为：kurtnoble.com/labs/rrssb/。

它在GITHUB上有一个地址：github.com/kni-labs/rrssb，你可以下载RRSSB的开源代码。

我们来看看它是如何使用的：

1) Copy css to your document or link to the css file in header:

…html

<link rel="stylesheet" href="css/rrssb.css" />

…
2) Copy `.rrssb-buttons` unordered list to desired location(s):

…html

<!-- Buttons start here. Copy this ul to your document. -->
<ul class="rrssb-buttons clearfix">
<li class="rrssb-facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
<span class="rrssb-text">facebook</span>
</a>
</li>
</ul>
<!-- Buttons end here -->

…

3) Copy `rrssb.min.js` to your document or link to javascript files at the bottom of your page (before the closing body tag for best results – jQuery CDN, [**jQuery fallback**](http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/), and `rrssb.min.js`):

…html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.1.10.2.min.js"><\/script>')</script>
<script src="js/rrssb.min.js"></script>

…

其实使用很简单：

1、将它的rrssb.css文件加载在网页头部head直接。

2、拷贝你需要的社交按钮的HTML代码到你需要放置的位置。然后，href你要根据社交网站指定的URL格式来拼写。

3、加载rrssb.min.js文件，你可以放置在网页头部或者网页的脚部。但在加载rrssb.min.js之前，你需要加载jQuery.js。

本站主题的社交分享按钮就是使用了RRSSB，不过，本站主题没有使用SVG图标，而是将图标改成了字体图标fontawesome。

<span class="rrssb-icon"><i class="fa fa-facebook-square"></i></span>
<span class="rrssb-text">facebook</span>

rrssb.css修改为：

.rrssb-buttons li a .rrssb-icon {
	display: block;
	left: 10px;
	padding-top: 9px;
	position: absolute;
	top: 0;
	width: 10%;
	font-size: 18px;
        color: #fff;
}
.rrssb-buttons li.small a .rrssb-icon {
	left: auto;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	top: auto;
	width: 100%;
	font-size: 14px;
        color: #fff;
}

.rrssb-buttons.small-format li a .rrssb-icon {
	height: 100%;
	padding-top: 5px;
}

.rrssb-buttons.large-format li a .rrssb-icon {
	height: 100%;
	left: 7%;
	padding-top: 6.5%;
	width: 12%;
	font-size: 50px;
}

修改后的CSS样式可能有些问题，但目前国内社交网络的SVG图标，我一时间没有找到，那么就只好先换成字体图标。