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

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

社交按钮:在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的开源代码。

在wordpress主题中使用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>

...

在wordpress主题中使用RRSSB开源代码
WordPressLeaf.com

其实使用很简单:

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图标,我一时间没有找到,那么就只好先换成字体图标。

编辑 杨

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

或许您还喜欢下面的文章

2 条评论

  1. 2016-10-18 在 17:20
    回复

    妹子,网站做这么好,能不能跟贵站换下友链啊~~哈哈

    • 编辑 杨
      2016-10-18 在 21:12
      回复

      加了。你加我的。

留下一条回复

关闭