kni-labs/ rrssb

(1.14.0) over 4 years ago

facebook

CSS

social-buttons

Twitter

HTML

JavaScript

View on GitHub

Need help with rrssb?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kni-labs

3.4K Stars

444 Forks

MIT License

531 Commits

25 Opened issues

Description

:arrow_right_hook: Ridiculously Responsive Social Sharing Buttons

Services available

Need anything else?

Contributors list

Readme

Ridiculously Responsive Social Sharing Buttons

Name: rrssb
Brand: rrssb
SKU: //kni-labs/rrssb
Rating: 4.271222222222223 (3441 reviews)

Love them or hate them, social sharing buttons appear to be with us for a while. It seemed like we were constantly making custom buttons for every single project, so we decided to create a super flexible system that would work in any container.

RRSSB is built with SASS, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit -- the rest will fill in automagically in the container.

Demo

View the demo here

Usage

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

2) Copy

.rrssb-buttons

unordered list to desired location(s):

Only copy the
s of the buttons you want (index.html has examples of all available types).
Adding a class of
```
popup
```
to the anchor tag for each share button will make the share dialog open in a popup, rather than a new window. (Good for Facebook, Twitter, Google Plus, etc.)
Buttons will automatically flow to the size of the ul
```
rrssb-buttons
```
. If fixed sized buttons are needed, nest
```
rrssb-buttons
```
in a fixed-width container.
Each sharing URL requires various parameters that allow you to pass through messaging in the sharing dialog. A useful tool for URI escaping any messaging that needs to pass through the share URL can be found here.
Alternatively, all share metadata and links can be configured using Javascript

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, and

rrssb.min.js

Optional: Configure URL and share text with javascript:
Instead of editing each

href

by hand, you can call some Javascript to set the URLs on each social button dynamically.

Note: to support users who have disabled Javascript, you still need to edit the

href

s by hand.

Paste the following before the closing body tag, after the scripts you added in the last section:

Other install options:

Service	Link
npm	npm install rrssb
bower	bower install rrssb
Wordpress *	https://wordpress.org/plugins/rrssb/ https://wordpress.org/plugins/wpsso-rrssb/ https://wordpress.org/plugins/rrssb-for-wp/
Drupal *	Drupal Install Instructions
CDN *	CDN by jsDelivr

* Managed by 3rd parties. Please contact project hosts for support.

Support

Currently tested between 140px and 15,465px on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+.

Requires SVG

Contributing

Thanks for helping! Pull requests are welcomed.

Build setup:

Make sure gulp is installed globally:
```
npm install -g gulp
```
(May require
```
sudo
```
.)
run
```
npm install
```
to install the dependencies for this project.
run
```
gulp
```
to create a local server at
```
localhost:3000
```
and watch for file changes.

About

RRSSB is a KNI Labs freebie crafted by @dbox and @joshuatuscan.