https://github.com/akulubala/responsive-social-buttons
Responsive Social Share buttons
https://github.com/akulubala/responsive-social-buttons
responsive social-shares webpack2 wechat-share weibo-share
Last synced: 2 months ago
JSON representation
Responsive Social Share buttons
- Host: GitHub
- URL: https://github.com/akulubala/responsive-social-buttons
- Owner: akulubala
- License: mit
- Created: 2017-05-26T01:47:17.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-07T06:57:16.000Z (almost 8 years ago)
- Last Synced: 2025-03-03T17:04:49.036Z (3 months ago)
- Topics: responsive, social-shares, webpack2, wechat-share, weibo-share
- Language: HTML
- Homepage: https://akulubala.github.io/responsive-social-buttons/
- Size: 615 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive Social Sharing Buttons
---
Responsive social buttons build by webpack.Easily customize it by tweaking a few css class or verialbles. Using SVGs support retina.
---
## Usage
1) Copy css to your document or link to the css file in header:
```html
```
---
2) Copy `.rrssb-buttons` unordered list to desired location(s):
```html
```
>- Only copy the `
- ` with `
- `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.)
>- ul with class `fixed-size` will make a fixed size button, check examples
>- icons folder have all social share buttons you can use
>- Each sharing URL requires various parameters that allow you to pass through messaging in the sharing dialog.
>- Alternatively, all share metadata and links can be configured [using Javascript](#javascript)
>- you can use webpack to modulize js and css. source files are under resource folder.```html
```
**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 automatically.Paste the following before the closing body tag, after the scripts you added in the last section:
```html
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
// required:
title: 'This is the email subject and/or tweet text',
url: 'https://www.npmjs.com/package/responsive-social-buttons',// optional:
description: 'Longer description used with some providers',
emailBody: 'Usually email body is just the description + url, but you can customize it if you want'
});
});```
---
## Example:
[https://akulubala.github.io/responsive-social-buttons/](https://akulubala.github.io/responsive-social-buttons/)
---
## Other install options:npm | `npm i responsive-social-buttons`
---
## Support
Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+.---
### Build setup:
- under root folder, run `npm install` to install the dependencies for this project.
- run `node_modules/.bin/webpack-dev-server` to create a local server at `http://localhost:8081` and watch for file changes.
---## About
responsive-social-buttons is a modify version of [rrssb](https://github.com/kni-labs/rrssb), add webpack, wechat, weibo support, for more detail you can check original version