https://github.com/terstudio/vsocial
"V Social" social media panels (share panels) use only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks.
https://github.com/terstudio/vsocial
ecmascript6 facebook javascript media-buttons media-panel share share-buttons share-panel share-panels social-buttons social-media-panels social-network webpack
Last synced: about 2 months ago
JSON representation
"V Social" social media panels (share panels) use only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks.
- Host: GitHub
- URL: https://github.com/terstudio/vsocial
- Owner: TerStudio
- Created: 2018-01-13T09:20:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-14T17:46:46.000Z (over 8 years ago)
- Last Synced: 2025-02-19T09:42:12.567Z (over 1 year ago)
- Topics: ecmascript6, facebook, javascript, media-buttons, media-panel, share, share-buttons, share-panel, share-panels, social-buttons, social-media-panels, social-network, webpack
- Language: CSS
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
vsocial
-------
_"V Social" social media panels (share panels) use only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks._
#### Description
* VSocial creates customizable Share panel. You can easily change form, size and color of buttons.
* The tool adds an argument with date and time to the url each time you post it to Facebook, Twitter etc. So you will never have a problem when you occasionally post a page to FB with "not correct" image, than change the image on your website, than post again - and every time - the same old pic. With this solution it will be fresh every time you post it.
* VSocial panels provide the buttons to share at:
- Facebook
- VKontakte
- LinkedIn
- Pinterest
- Twitter
- Google Plus
* VSocial does not require jQuery. Easy to use with webpack.
* Opens a popup share-window
* Loads no external script
### Package Managers
##### NPM
```sh
npm install vsocial
```
### Usage
Just import Class (for example in the js code that you bundle later with webpack):
```html
import SocialClass from '../node_modules/vsocial/SocialClass';
```
Add a link to two css files in your `` (one of them is the main css file, the second - is theme css file for your panel:
```html
```
Add empty div with custom class in any place of your html code, for example in footer of the page.
```html
```
Finally "tell" VSocial in what element it should be used and add options if necessary
```html
import SocialClass from '../node_modules/vsocial/SocialClass';
let panel = new SocialClass('v-social');
```
Customize the panel if you want to:
```html
import SocialClass from '../node_modules/vsocial/SocialClass';
let mediaPanel = new SocialClass('v-social', {
buttons: {
vkontakte: false
},
pinterestImageSelector: [
'.first__image-class',
'.second__image-class'
],
twitterHash: 'web, develop',
title: 'Share this page',
titleFontSize: 20,
titleColor: '#777',
customStyle: {
background: '#204b72',
borderColor: '#831111'
}
});
```
### Themes
##### Simple small theme
##### Simple large theme
##### Square small theme
##### Square large theme
##### Sand large theme
##### Sand small theme
##### Gray large theme
##### Gray small theme
##### White custom theme (example): here you choose your own colors
##### Dark custom theme (example): here you choose your own colors
### Meta properties
For proper work of VSocial it is highly recommended to use proper og and twitter (including twitter:card) properties in head block of he website
### Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
buttons | object | true | Enables and disables different social networks
pinterestImageSelector | array | [] | Defines the classes of images to be used for Pinterest (img src="" class="first__image-class"). You can specify several classes - in this case the system will choose the first image that matches the selector
twitterHash | string | '' | Hashtags to be added to twitter
title | string | '' | Title of the share panel
titleFontSize | integer | 24 | Font-size of title of the panel
customStyle | Object with 2 possible items: background (value is string), borderColor (value is String) | - | css parameters of the buttons to be used with white_custom_theme.css and dark_custom_theme.css
#### Icons credit
Icons made by Freepik from www.flaticon.com
#### Browser support
VSocial works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
#### License
Copyright (c) 2018 tstudio
Licensed under the MIT license.